Generating Pareto Chart Data for FusionCharts

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.

LabelExisting DataGenerated Column
Item 140000040%
Item 225000025%
Item 315000015%
Item 410000010%
Item 5500005%
Item 6500005%
Summation1000000100%

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

JavaScript to Generate Pareto Chart for FusionCharts

function generateFusionChartsParetoXML (SourceCSV) {
     var i, s=0,
         x = "",
         d = SourceCSV.value.match(/[^\r\n,]+/ig);

     x += "\n";

     for (i = 0; i < d.length; i+=2) {
         x += "\n   ";
     }
     x += "\n\n";
     for (i = 1; i < d.length; i+=2) {
         d[i] = parseFloat(d[i]);
         x += "\n   ";
         s += d[i]; // do summation
     }
     x += "\n\n";
     for (i = 1; i < d.length; i +=2) {
         x += "\n   ";
     }
     x += "\n\n";
     return x;
 };

Hope this had been useful.

2 responses

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

    Like

  2. 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)

    Like

Leave a comment