[pending] Load new data into existing graph

[gary.brain]

Hi, I have finaly got around to playing with jquery plugin and was wondering if this is possible yet.

 

 

 

I want to update a graph data using a button (test purpose) knowing that the data has been altered.

 

 

 

< div id='quickgraph' >

 

< button >load data< /button >

 

 

 

< div id="myChartContainer" >Loading FusionCharts!< /div >

 

< script type="text/javascript" >

 

 

 

$("button").click(function () {

 

$.get("/includeFile.php", {pageData: "testdata" }, function(xmldata) { $('#myChartContainer').insertFusionCharts({ data: xmldata }) }, 'xml'); });

 

 

 

$.FusionCharts.config.extend(

 

{

 

product: 'v3',

 

swfPath: '/MyFCPHPClassCharts/FusionCharts/'

 

});

 

 

 

$('#myChartContainer').insertFusionCharts({

 

type: "Pie3D",

 

data: "",

 

dataFormat: "XMLData",

 

width: "400",

 

height: "300"

 

});

 

 

 

< /script >

 

 

 

< /div >

 

 

 

 

 

What I see is

 

 

 

The file is called as an XML file

 

GET 200 text/xml http://127.0.0.1/includeFile.php?_=1272048078565&pageData=testdata&fileid=70781495

 

 

 

the "testdata" file contains the xml data.

 

 

 

< graph caption="Pie Chart" decimalPrecision="0" showPercentageValues="0" showNames="1" numberPrefix="$" showValues="1" showPercentageInLabel="0" pieYScale="45" pieBorderAlpha="40" pieFillAlpha="70" pieSliceDepth="15" pieRadius="100" >

 

< set value="25" name="Item A" color="6666FF"/ >

 

< set value="17" name="Item B" color="AD33FF"/ >

 

< set value="23" name="Item C" color="19A3D1"/ >

 

< set value="65" name="Item D" color="FFCC66"/ >

 

< /graph >

 

 

 

 

 

The Default graph called

 

GET (Cache) application/x-shockwave-flash http://127.0.0.1/MyFCPHPClassCharts/FusionCharts/Column2D.swf

 

 

 

 

 

attempt to get a file that does not exist.

 

GET 404 text/html (NS_ERROR_FAILURE) http://127.0.0.1/Data.xml?FCTime=34

 

 

 

the restult is a failure.

 

 

 

I have also tried the append/prepend.

 

 

 

thanks

 

 

 

G.

Edited April 23, 2010 by Guest

[gary.brain]

i think its the xml data that is wrong, i change the code to json.

 

 

 

$.get("/includeFile.php", {pageData: "testdata" }, function(xmldata) { $('#myChartContainer').insertFusionCharts({ data: xmldata.xmldata }) }, 'json');

 

 

 

and the testdata file to

 

 

 

 

 

$update["xmldata"] = "

 

< graph caption='Pie Chart' decimalPrecision='0' showPercentageValues='0' showNames='1' numberPrefix='$' showValues='1' showPercentageInLabel='0' pieYScale='45' pieBorderAlpha='40' pieFillAlpha='70' pieSliceDepth='15' pieRadius='100' >

 

< set value='25' name='Item A' color='6666FF' / >

 

< set value='17' name='Item B' color='AD33FF' / >

 

< set value='23' name='Item C' color='19A3D1' / >

 

< set value='65' name='Item D' color='FFCC66' />

 

< /graph >

 

";

 

 

 

echo json_encode($update);

 

 

 

 

 

the only down side is that I have to set these all the time.

 

 

 

 

 

$.FusionCharts.config.extend(

 

{

 

product: 'v3',

 

className: 'myCharts',

 

type: 'Pie3D',

 

swfPath: '/MyFCPHPClassCharts/FusionCharts/',

 

dataFormat: 'XMLData',

 

width: '400',

 

height: '300'

 

});

Edited April 23, 2010 by Guest

[shamasis]

Gary,

 

 

 

I can see that you did get it to work. Incidentally, the issue you are facing is the exact same issue we are working on!!

 

 

 

There is already a function that you can experiment with, and that is .updateFusionCharts(). This supposedly works fine with jQuery 1.3.2 but fails for a bug in jQuery 1.4.x.

 

 

 

The updateFusionCharts does the work of remembering the settings of an existing chart.

 

Lets say, you already have a chart in a division with id "myChartDiv", and you just want to update the data of the chart. What you do is:

 

$('#myChartDiv').updateFusionCharts({

   data: '<chart><!-- your new xml data here --></chart>'

});

 

 

 

You may send any settings, and it will simply keep the old ones and overwrite with whatever new you have sent. Furthermore, the function intelligently decides whether to re-render the chart or not! In case you update data only, it will simply change the data!

 

 

 

Technically, due to a bug where jQuery 1.4.x is unable to associate data with object/embed elements, we are unable to save the state of the chart.

[gary.brain]

Hi Shamasis, thanks for the info.

 

 

 

I tried the update but I kept on getting error but will continue to play

 

 

 

Error: data is undefined

 

Source File: /js/jquery.fusioncharts.debug.js

 

Line: 1335

 

 

 

$('button').click(function(){

 

$.get("/includeFile.php", {pageData: "xmlData"}, function(xmldata) {

 

$('#myChartContainer').updateFusionCharts({ data: xmldata.xmldata }) }, 'json');

 

});[/cpde]

 

 

 

 

 

FusionCharts: @version: 1.0.0b2 (build: 108)

 

Jquery : 1.4.1

[shamasis]

Oh yes. That is exactly the same issue we are facing!

 

However, as I had mentioned earlier, try using it with jQuery 1.3.2, and it may work.

 

 

 

Also, it works to some extend with FusionCharts Free as well.