luftikus143

Example (Code) for Charts using AJAX

Recommended Posts

Hi there,

 

 

 

are there any examples of charts using AJAX for generating graphs without the need of reloading the whole page? If possible with the used code? I am not a big Javascript/AJAX programmer, so I would like to reuse some code to achieve that...

 

 

 

Thanks for any help!

 

 

 

Stef

Share this post


Link to post
Share on other sites

Yes - we've a lot of examples in our documentation at www.fusioncharts.com/docs > Guide for Web Developers > FusionCharts and JavaScript.

Share this post


Link to post
Share on other sites
Pallav (10/5/2007)
Yes - we've a lot of examples in our documentation at www.fusioncharts.com/docs > Guide for Web Developers > FusionCharts and JavaScript.

 

But these are not AJAX examples, no? Just normal Javascript ones. There is no direct Javascript interaction with the server, as I can see it... Please correct me if I am wrong.

Share this post


Link to post
Share on other sites

Hi,

 

 

 

Here is a sample example with AJAX (using ASP and Access at the backend).. in ASPAjaxSample folder.

 

This example first extracts data from database and calculates the total output of 3 factories..this is plain ASP.Then it renders a pie chart. Now the ajax part...when on clicks on a pie it calls a a javascript function. The intension is to load a chart with details of production of that particular factory.

 

 

 

AJAX part : the javasctipt calls ajax to send request to an asp page FactoryData.asp which returns an XML for the detailed chart. Then that detailed chart (column 2d) will load below the pie chart. ON clicking on another slice the ajax call will again reload the detailed chart with different data....

Samples_asp.AJAX.zip

Edited by Guest

Share this post


Link to post
Share on other sites

I wish there was simpler example of AJAX integration with FusionCharts. I am in the same boat as the original poster, I am not a professional web developer. An example using AJAX and PHP such as where a user simply clicks on one of three text links and one of three corresponding charts is rendered into a chart container without the page refreshing would be very helpful as a very basic but highly useful example of AJAX, PHP and FusionCharts.  I can't use JS-only because eventually I want to have far more than 3 possible charts, so I need to generate the FusionCharts XML dynamically. I just can't seem to put it all together: AJAX, PHP and FusionCharts. Looking at ASP examples is like looking at Mandarin to me.

If anyone happens to have a simpler example of AJAX, PHP and FusionCharts in action I would much appreciate it.

Share this post


Link to post
Share on other sites

hi,

This can be achieved using AJAX. But, may be, that would confuse you more. YOu can just use simple JS to imlpement this. I am saying this because you have no need to use AJAX backbone to fetch XML for the chart. FusionCharts' charts has the capability to dynamically fetch XML data from a server side script or any XML source without page refresh. You just need to specify the datURL path from where the XML is to be fetched.

 

Still, you can provide us the structure (i mean a more details) of the application AJAX+PHP+FusionCharts and we can try providing you the solution.

Share this post


Link to post
Share on other sites
Sudipto Choudhury (1/10/2008)
hi,

 FusionCharts' charts has the capability to dynamically fetch XML data from a server side script or any XML source without page refresh. You just need to specify the datURL path from where the XML is to be fetched.

Oh. Interesting. Okay, I need to educate myself some more (read more of the documentation). I'll come back and post the additional information you suggested if I can't figure it out.  Thanks for the reply Sudipto - very helpful.

 - Andrew

Share this post


Link to post
Share on other sites

hi !

(My English is very bad... sorry)

i `ve a problem using ajax.

i`m developing a proyect using PEAR, SMARTY, PHP, FUSIONCHARTS and now .... my boss say me "ok, let`s include ajax" ...

I`ve been searching for any information and don`t find nothing. please just need some pages, or tutorias, or something to help me.

PD: Already I have seen the main pages of PEAR, SMARTY, PHP, FUSIONCHARTS, but they don`t give me "instructions" to how combinate ajax with the another tecnologies.

Regards.

Share this post


Link to post
Share on other sites

hi !

( sorry for my english ... again )

I did it!

The Solution:

** in the main page, include de basic code to load a FC

(The $XML2Lines is a smarty variable, you`ll use another XML file)

<div id="chart7">

<script type="text/javascript">

 var chart = new FusionCharts("charts/MSLine.swf", "chart7", "700", "300", "0", "1");

 chart.setDataXML("{$XML2Lines}");  

 chart.render("chart7");

 ObjectChart = chart;  

 GoAjax();

</script>

</div>

** the GoAjax() and UpdateGraphic() javascript function

function GoAjax(id)

{

TimerGraphic = setTimeout("UpdateGraphic()", 3000);  

} // you`ll understand the parameters, sure.

function UpdateGraphic(id)

 {

var object = document.form_mediciones.ddlObject.value;

var sensor = document.form_mediciones.ddlSensor.value;

var variable = document.form_mediciones.ddlVariable.value;

var ini_filter = document.form_mediciones.inicio_filtro_hidden.value;

var ter_filter = document.form_mediciones.termino_filtro_hidden.value;

var company = document.form_mediciones.company_hidden.value;  

var iStartCounter = document.form_mediciones.iStartCounter_hidden.value;  

var nValuesToCalc = document.form_mediciones.nValuesToCalc_hidden.value;;

 

var URL = "SetSourceOfGraphic.php?";

URL = URL + "im=" + id;

URL = URL + "&fi=" + ini_filter;

URL = URL + "&ft=" + ter_filter;

URL = URL + "&ep=" + company;

URL = URL + "&object=" + object;

URL = URL + "&sensor=" + sensor;

URL = URL + "&variable=" + variable;

URL = URL + "&iStartCounter=" + iStartCounter;

URL = URL + "&nValuesToCalc=" + nValuesToCalc;

 

var ajax=objetoAjax(); 

ajax.open("GET", URL, true);

ajax.onreadystatechange=function() 

{

 if (ajax.readyState==4) 

  { 

  ObjectChart.setDataXML(ajax.responseText);  

  }

}

ajax.send(null);

}

** end

I hope you understand de MAIN IDEA of code, a remove some variables to make more "friendly" the solution.

the another tecnologies ( smarty, pear ), have not idea of my code, just javascript and html play this.

PD: the objetoAjax() function is in every where in the internet, you have to find it, it`ll be the dificulty of my solution. ( always have a dificulty )

any question, find me...

Regards.

Share this post


Link to post
Share on other sites

Actually I am looking for creating of chart based on change in input values from forms during runtime using ajax+jsp+javascript.

I couldnt find any examples for that.

Share this post


Link to post
Share on other sites
Guest Madhumita

Hello,

It is possible to update our charts using AJAX.

Please refer to the demo application provided in the link below:

 

http://www.fusioncharts.com/LiveDemos.asp >FusionCharts + JavaScript (AJAX) Integration

(http://www.fusioncharts.com/Demos/JS/Index.html)

 

You can download the application directly from http://www.fusioncharts.com/Downloads/Demos/FusionChartsJS.zip

 

As of now, we donot have sample codes for JSP. However, you can easily develop them by refering to our documentation.

 

Hope this helps. :)

Share this post


Link to post
Share on other sites
Guest Rajroop

Hello Thiago Ramos Fernandes,

 

 

 

Welcome to the FusionCharts Forum! :D

 

 

 

We are looking forward to you going home and posting your query/solution/example on this thread! :)

 

 

 

P.s. You English is not bad at all!

Share this post


Link to post
Share on other sites

Hello Thiago Ramos Fernandes,

 

 

 

Welcome to the FusionCharts Forum! :D

 

 

 

We are looking forward to you going home and posting your query/solution/example on this thread! :)

 

 

 

P.s. You English is not bad at all!

 

Hi all,

am new here. Am presentky working on ajax call in PHP.

The problem am facing now is, i have a main page where the graph is to be rendered. i have the array of values to be plotted in a different page and am calling that page to my main page using ajax. i am getting the chart rendered when i inspect on the source.but am not visually getting the graph. i think i have some aesthetics prob. I dont find anything else. kindly help me out asap as am facing the Deadline soon.

 

thanks in advance.

Deepika G

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now