Generating Pareto Chart Data for FusionCharts

August 26, 2009 · 2 comments   328 views

in FusionCharts,Technical Publications

As soon as I read about Pareto Charts on FusionCharts blog and how it uses cumulative percentage on a dual-y axes graph to allow users to summarize data into segments, I realized that a simple script to generate the FusionCharts XML would help users generate such graphs.

For those who do not know what is FusionCharts, it is simply something that can convert your boring tables of data into sexy animated charts.

We have a simple linear column of data. And we need to generate the last column, which is the cumulative percentage of the entire series of data.

Label Existing Data Generated Column
Item 1 400000 40%
Item 2 250000 25%
Item 3 150000 15%
Item 4 100000 10%
Item 5 50000 5%
Item 6 50000 5%
Summation 1000000 100%


If you have your data, convert it to CSV[1] and use this script to generate the XML to render FusionCharts Dual Y-Axis Combination Chart.

Run script to convert CSV to FusionCharts XML

If you wish, you could save the above script by right-clicking the above link and selecting “Save Target As” or “Save Link As”…

JavaScript to Generate Pareto Chart for FusionCharts

  1. function generateFusionChartsParetoXML(SourceCSV) {
  2.      var i, s=0,
  3.          x = "<chart showValues=\"0\" SYAxisMaxValue=\"100\" SNumberSuffix=\"%\" formatNumberScale=\"0\">",
  4.          d = SourceCSV.value.match(/[^\r\n,]+/ig);
  5.      x+="\n<categories>";
  6.      for(i = 0; i < d.length; i+=2) {
  7.          x+="\n   <category label=\""+ d[i] +"\" />";
  8.      }
  9.      x+="\n</categories>\n<dataset>";
  10.      for(i = 1; i < d.length; i+=2) {
  11.          d[i]=parseFloat(d[i]);
  12.          x+="\n   <set value=\""+ d[i] +"\" />";
  13.          s+=d[i]; // do summation
  14.      }
  15.      x+="\n</dataset>\n<dataset parentYAxis=\"S\">";
  16.      for(i = 1; i < d.length; i +=2) {
  17.          x+="\n   <set value=\""+ d[i]/s*100 +"\" />";
  18.      }
  19.      x+="\n</dataset>\n</chart>";
  20.      return x;
  21.  };

Hope this had been useful.

Footnotes:

  1. Comma Separated Values [top]

Related posts:

  1. Convert FusionCharts Data-XML To JavaScript Array
  2. Chart Type Aliases for FusionCharts DOM
  3. Dynamically Update FusionCharts XML Attributes
  4. jQuery Plugin for FusionCharts 1.0 Beta Released
  5. Transpose An Array In JavaScript and jQuery

Tagged as:

{ 2 comments… read them below or add one }

1 Andy L August 26, 2009 at 00:51

This is simple man! You should’ve made something more robust… say, uploading a CSV file and converting it to this FusionCharts XML

Reply

2 Shamasis Bhattacharya August 26, 2009 at 00:59

I did want to do something in your lines. But, this is all I could do in 30 minutes! Out of which, 20 minutes went to formatting this blog post!

Out of which, what I liked most is the one-line Regular Expression to convert CSV to array.

var d = SourceCSV.value.match(/[^\r\n,]+/ig)

Reply

Leave a Comment