Sign in to follow this  
gary.brain

[pending] Load new data into existing graph

Recommended Posts

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 by Guest

Share this post


Link to post
Share on other sites

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 by Guest

Share this post


Link to post
Share on other sites

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!! :P

 

 

 

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.

Share this post


Link to post
Share on other sites

Hi Shamasis, thanks for the info.

 

 

 

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

 

 

 

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

Share this post


Link to post
Share on other sites

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. :P

 

 

 

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

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
Sign in to follow this