JSON format

[Grumelo]

In your documentation all the options and parameters are described to set up the XML data source file used by FusionChart.

 

 

 

Can you also provide a JSON format with the methods to generate the XML string recognized by FusionChart ?

[Pallav]

Hi,

I'm afraid JSON is not currently supported.

[sroussey]

Yes, I'd like to see JSON support as well.

[noshoulders]

me too! JSON would be very useful

[FusionCharts Support]

Hi All,

I have written some functions to support JSON data. I have added these functions to FusionCharts.js.

The main public function is setDataJSON(json_data) . The usage is similar to setDataXML().

var chart1 = new FusionCharts("MSColumn3D.swf", "ChId1", "450", "350", "0", "0");

 

chart1.setDataJSON(chart);

 

chart1.render("chart1div");

 

Now, as for the JSON structure, I have kept it open and is exactly similar to XML structure.

var chart={

  animation:"1",

  caption:"JSON Data",

  categories:{

  category:[

  {label:"FOOOO"},

  {label:"Booooooo"}

  ]

  },

  dataset:[{  

seriesName:"Product 1",

set:[

  { value:"11112"},

  {value:"12224"}

]

},

 

  {  

  set:[

  { value:"12311"},

  {value:"14123"}

  ],

  seriesName:"Product 2"

  }

  ],

  trendlines:{

  line:[

  {startValue:6,color:"FFFF00"},

  {startValue:10,color:"ff0000",endvalue:"15",isTrendZone:true}

  ]

  },

  subCaption:"Using FusionCharts.js"

 

  };

 

The XML that would be generated is as follows:

 

<chart animation=

FC_USingJSONData.zip

Edited June 10, 2008 by Guest

[nickvidal]

Hi Sudipto,

 

 

 

Possibly there's a bug in the setDataJSON function.

 

 

 

This is the code where I call setDataJSON:

 

success: function(responseObject) {

 

var responseJson = responseObject.responseText;

 

var dataJson = Ext.decode(responseJson);

 

var chart = new FusionCharts("flash/MultiAxisLine.swf", "ChId1", "593", "293", "0", "0");

 

chart.setDataJSON(dataJson);

 

var chartXML = chart.getXML();

 

chart.render("info");

 

}

 

 

 

 

This is an example of responseJson:

 

{ "palette": "1", "animation": "1", "showYAxisValues": "0", "setAdaptiveYMin": "1", "axisOnLeft": "0", "showValues": "0", "divLineAlpha": "80", "legendPosition": "LEFT", "legendBorderThickness": "0", "showBorder": "0", "vDivLineAlpha": "0", "anchorRadius": "1.4", "labelDisplay": "WRAPPER", "labelstep": "9", "categories": { "category": [ { "label": "2008-08-18T15:24:07" }, { "label": "2008-08-18T15:24:17" } ] }, "axis": [ { "setAdaptiveYMin": "1", "dataset": [ { "lineThickness": "1", "seriesName": "fc_50016.op", "set": [ { "value": "12.0861" }, { "value": "12.1759" } ] } ] } ] }

 

 

 

 

And its corresponding chartXML:

 

<chart palette="1" animation="1" showyaxisvalues="0" setadaptiveymin="1" axisonleft="0" showvalues="0" divlinealpha="80" legendposition="LEFT" legendborderthickness="0" showborder="0" vdivlinealpha="0" anchorradius="1.4" labeldisplay="WRAPPER" labelstep="9"><categories><category label="2008-08-18T15:24:07"><category label="2008-08-18T15:24:17"><category><prototype></prototype></category><axis setadaptiveymin="1"><dataset linethickness="1" seriesname="fc_50016.op"><set value="12.0861"><set value="12.1759"><set><prototype></prototype></set><dataset><prototype></prototype></dataset><axis><prototype></prototype></axis></set></set></dataset></axis></category></category></categories></chart>

 

 

 

 

As you can see, chartXML presents unclosed tags and a weird "prototype" tag.

 

 

 

Any ideas?

 

 

 

Thanks,

 

Nick

Edited October 7, 2008 by Guest

[FusionCharts Support]

Hi,

By any change you might have sent a different JSON as the JSON parser that I uploaded in the Forum is giving this XML :

<chart palette='1' animation='1' showYAxisValues='0' setAdaptiveYMin='1' axisOnLeft='0' showValues='0' divLineAlpha='80' legendPosition='LEFT' legendBorderThickness='0' showBorder='0' vDivLineAlpha='0' anchorRadius='1.4' labelDisplay='WRAPPER' labelstep='9'><categories><category label='2008-08-18T15:24:07'/><category label='2008-08-18T15:24:17'/></categories><axis setAdaptiveYMin='1'><dataset lineThickness='1' seriesName='fc_50016.op'><set value='12.0861'/><set value='12.1759'/></dataset></axis></chart>

Please let us have the correct so that we can fix the issue.

Also let us know the Browser and plotform you are using.

[awszxa]

I can't get it to work for firefox but works fine for IE

chartData={shownames:"1",

 canvasBgAlpha:"0",

 showDivLineValues:"0",

 borderColor:"FFFFFF",

 divLineColor:"FFFFFF",

 divLineAlpha:"0",

 canvasBgColor:"FFFFFF",

 showYAxisValues:"0",

 showValues:"1",

 yAxisValuesPadding:"0", 

 showLabels:"0",

 useRoundEdges:"1",

 legendBorderColor:"FFFFFF",

 bgColor:"FFFFFF",

 showAlternateVGridColor:"0",

 categories:{

  category:[

  {label:"Data"} ]

  },

 dataset:[{  

seriesName:"Product 1",

set:[

  { value:"11112"},

  {value:"12224"}

]

},

 

  {  

  set:[

  { value:"12311"},

  {value:"14123"}

  ],

  seriesName:"Product 2"

  }

  ]

 }

[Arindam]

Hi,

Could you please try with this sample?

JSON.zip

[awszxa]

No still doesn't work. Try Firefox 3.0.1 and flashplayer 10.

It looks like you have a problem when you have nested JSON object

in code when the loop get in the categories is breaking on firefox 

for(var i in part_json){

  if(typeof part_json=="object"){

  if(part_json.hasOwnProperty("length")){

  for(var j in part_json){

  newel=this.XML.createElement(i);

  this.parseJSON(newel,part_json[j]);

  DOMElement.appendChild(newel);

  }

  }else{

  newel=this.XML.createElement(i);

  this.parseJSON(newel,part_json);

  DOMElement.appendChild(newel);

  }

 

  }else{

  if(typeof part_json=="string" || typeof part_json=="number" || typeof part_json=="boolean"){ 

  attrib=this.XML.createAttribute(i);

  if(typeof part_json=="boolean"){

  part_json=(part_json?"1":"0")

  }

  attrib.nodeValue=part_json;

  DOMElement.setAttributeNode(attrib);

  }

  }

  }

Edited October 22, 2008 by Guest

[awszxa]

ok I fixed the proble it was in your parseJSON function now it is working for firefox too.

[FusionCharts Support]

Hi awszxa,

Thanks for the fix.

Could you please share the fix with us so that the FusionCharts community can be benifited globally with this fix that you have written.

Thanks again!

[favac]

does it works with fusion charts free ??

[Arindam]

Hi,

Could you please try this for Free Version Of FusionCharts support? Please see the attachment.

FCF_USingJSONData.zip

[Thomas1511]

is this file still up to date?

[FusionCharts Support]

Hi,

Please try the above attached file.

Please let us know if you are facing any issue.

[koharudin]

Hi, i tried your code and it didn't display anything. then i tried to give any available XML Source and it displayed. i dont know why your code doesn't work.

 

 

 

this is the code :

 

 

var chart={

 

animation:"1",

 

caption:"JSON Data",

 

 

 

categories:{

 

category:[

 

{label:"FOOOO"},

 

{label:"Booooooo"}

 

]

 

},

 

 

 

dataset:[{

 

seriesName:"Product 1",

 

set:[

 

{ value:"11112"},

 

{value:"12224"}

 

]

 

},

 

 

 

{

 

set:[

 

{ value:"12311"},

 

{value:"14123"}

 

],

 

seriesName:"Product 2"}

 

],

 

 

 

trendlines:{

 

line:[

 

{startValue:6,color:"FFFF00"},

 

{startValue:10,color:"ff0000",endvalue:"15",isTrendZone:true}

 

]

 

},

 

 

 

subCaption:"Using FusionCharts.js"

 

 

 

};

 

 

 

var chart1 = new FusionCharts("../../Charts/FCF_MSColumn3D.swf", "ChId1", "450", "350", "0", "0");

 

 

 

chart1.setDataJSON(chart);

 

//chart1.setDataURL("../FCDashboard/Dashboard/Data/ProductSales.xml");

 

chart1.render("chart1div");

 

 

 

 

 

 

 

 

and here its few html code that i saw on Firebug 1.4.0b4

 

 

 

 

 

 

 

 

 

 

 

 

I tested on Firefox Mozilla 3.5

 

 

 

Thanks..

 

 

 

----Khd----

[Guest Rajroop]

Hello Koharuddin,

 

 

 

Could you please re-post your XML and HTML code in an attachment please?

 

 

 

Looking for ward to your reply.

[FusionCharts Support]

Hi,

After lots of request to support vilne i have added support for vline.

This is my own way of implementing vline though, and any suggestion and criticism is welcome.

Please help me make it better.

Here is the attachment.

How to add vline?

Single-series Charts?

var chart={

  caption:"JSON Data - Single Series",

 

  set:[

{ value : '100', label : 'foo' },

{ value : '200', label : 'Boo' },

  { vline : {  color : "ff0000", linePosition : "0" } },

{ value : '400', label : 'Koo' },

{ vline : null },

{ value : '600', label : 'Do' }

  ]

}

NOTE:

  To create an empty vline just use  { vline:null }

  To set vline properties add all the properties as a new list of properties like :   { vline : {  color : "ff0000", linePosition : "0" } },

Multi-series charts?

var chart={

  caption:"JSON Data",

 

  categories:{

 

  category:[

  { label:"FOOOO"  },

  { label:"BOOOO"  },

  { vline:{ color:"ff0000", linePosition:"0" } },

label:"Kooooooo" },

vline:null },

  { label:"Doo" }

]

  },

...

}  

FC_UsingJSONData_VlineFix.zip

[artjc1]

Hi Sudipto,

 

 

 

Thanks for this excelent adaptation to JSON, i'm using for Extjs.

 

 

 

I Fix code in a line 162:

 

this.XML = this.newXMLDocument("chart");

 

changing "chart" to "graph":

 

this.XML = this.newXMLDocument("graph");

 

 

 

Ready now if that works.

 

 

 

Again thank you,

 

 

 

artjc :-)

[FusionCharts Support]

Happy to help.

 

 

 

Thanks

[bradley]

Can someone give me some feedback and opinions on the json parsing? It doesn't seem to have worked its way into the FC core and I'm interested to know why. (unless it has in fact and I missed that)

 

 

 

I haven't looked at the source but I'm very interested to know if it's fast and more importantly stable.

[Guest Basundhara Ghosal]

Hi,

 

 

 

I am afraid that as of now FusionCharts only support XML.

 

 

 

However a JSON wrapper was developed by our developer because of several requests which you can already find in the above made posts.

 

 

 

The issue however is expected to get resolved in our next major release i.e. FusionCharts v4.

[Sanjukta]

Hello,

We are very excited to announce the release of FusionCharts v3.2 that leverages Flash and JavaScript (HTML5) to create stunning charts. It introduces the new zoom charts, Pareto & Marimekko charts and works with both XML and JSON data.

It now works on iPads and iPhones as well. Please visit

http://www.fusioncharts.com/ipad/

to find out what's new.

Furthermore, with this release, we have changed our licensing policies and pricing for our core products - FusionCharts, FusionWidgets, FusionMaps & PowerCharts. More details at:

http://www.fusioncharts.com/license/

Please feel free to share your thoughts with us at:

[email protected]

Thank you and have a good day.

<br class="Apple-interchange-newline">

[Guest Angie]

Dear User,

 

We are delighted to announce that PowerCharts is now ready for your iPads and iPhones too. We have just released PowerCharts v3.2. Starting v3.2, PowerCharts has HighCharts embedded within it, and offers both Flash and JavaScript (HTML5) charting . The Flash charts are displayed on a majority of devices and the JavaScript charts on devices that do not support Flash, all of it without writing a line of code.

 

Automatic rendering of JavaScript charts on devices (like iPad and iPhone) where Flash player is not supported.

 

5 new chart types:

 

Heat Map Chart

 

Box and Whisker Chart

 

Step Line Chart

 

Error Line Chart

 

Error Scatter Chart

 

 

* Support for JSON data format.

 

* Support for LinkedCharts, where a single data source controls multiple charts.

 

* Interactive legends in charts allow selective showing/hiding of data series.

 

* Legends now support icons for each data series.

 

* Better management of labels on charts.

 

* Labels now have an auto rendering mode to prevent them from overlapping, the chart selects the best display mode depending on the length of the labels and the width of the chart.

 

* Long labels are truncated, with ellipses appended to the truncated end of each label, and a tooltip bearing the completed label text is displayed when the user hovers over a truncated label.

 

* Support for line breaks and wrapping in all text elements including: caption, sub caption, X-axis title, Y-axis title, Labels and tooltips.

 

* In Line charts, data values can now be positioned either above or below the dataplots. Automatic positioning of data values is also supported.

 

* In Step-line charts dataplots can be joined using vertical lines.

 

* Custom alignment of caption and sub caption using STYLES.

 

* Advanced print management using JavaScript.

 

* Additional options for efficient event handling using JavaScript.

 

* Support for dynamic update of chart properties using JavaScript(barring select scatter and drag charts).

 

* Charts now support % based sizes along with dynamic resizing (barring select scatter and drag charts).

 

 

Learn more about everything new in PowerCharts v3.2 at : http:/ www.fusioncharts.com/PowerCharts/

 

We would love to hear from you at: http://www.fusioncharts.com/contact/

[durlabh]

I've the same problem. It seems that even though you set the URL as JSON, on resize/ move, FusionCharts is assuming that the data is XML instead of JSON. This seems to be causing a lot of issues.

[Guest Angshu]

Hi,

Welcome to FusionCharts Forum!

 

To use JSON data format with FusionCharts, you'll need to embed the charts using FusionCharts JavaScript class (FusionCharts.js), as the charts internally still use XML. The JavaScript class provides the bridge between JSON and XML.

 

Hope this helps.