Example (Code) for Charts using AJAX

[luftikus143]

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

[Pallav]

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

[luftikus143]

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.

[FusionCharts Support]

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 October 31, 2007 by Guest

[coolegg]

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.

[FusionCharts Support]

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.

[coolegg]

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

[Coyote]

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.

[FusionCharts Support]

hi,

We have not yet impleted FusionCharts in such environment. If you can kindly provide us some code for the same combination (PHP+PEAR etc. and using AJAX) we can try embedding FusionCharts in that.

[Coyote]

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.

[suchirag]

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.

[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.

[thirf]

Hi people,

I have an example of chart using AJAX (Update Panel + Timer control), now I

[Guest Rajroop]

Hello Thiago Ramos Fernandes,

 

 

 

Welcome to the FusionCharts Forum!

 

 

 

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!

[deepika]

Hello Thiago Ramos Fernandes,

 

 

 

Welcome to the FusionCharts Forum!

 

 

 

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