Highcharts vs competitors

by Chetan Hanumantha

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>

<div id="container" style="height: 350px; min-width: 280px; max-width: 1000px; margin: 0 auto"></div>


<pre id="data" style="display:none">Week,highcharts,fusioncharts,amcharts,"google chart"
2004-01-04 - 2004-01-10,0,0,0,0
2004-01-11 - 2004-01-17,0,0,0,0
2004-01-18 - 2004-01-24,0,0,0,0
2004-01-25 - 2004-01-31,0,0,0,0
2004-02-01 - 2004-02-07,0,0,0,0
2004-02-08 - 2004-02-14,0,0,0,0
2004-02-15 - 2004-02-21,0,0,0,0
2004-02-22 - 2004-02-28,0,0,0,0
2004-02-29 - 2004-03-06,0,0,0,0
2004-03-07 - 2004-03-13,0,0,0,0
2004-03-14 - 2004-03-20,0,0,0,0
2004-03-21 - 2004-03-27,0,0,0,0
2004-03-28 - 2004-04-03,0,0,0,0
2004-04-04 - 2004-04-10,0,0,0,0
2004-04-11 - 2004-04-17,0,0,0,0
2004-04-18 - 2004-04-24,0,0,0,0
2004-04-25 - 2004-05-01,0,0,0,0
2004-05-02 - 2004-05-08,0,0,0,0
2004-05-09 - 2004-05-15,0,0,0,0
2004-05-16 - 2004-05-22,0,0,0,0
2004-05-23 - 2004-05-29,0,0,0,0
2004-05-30 - 2004-06-05,0,0,0,0
2004-06-06 - 2004-06-12,0,0,0,0
2004-06-13 - 2004-06-19,0,0,0,0
2004-06-20 - 2004-06-26,0,0,0,0
2004-06-27 - 2004-07-03,0,0,0,0
2004-07-04 - 2004-07-10,0,0,0,0
2004-07-11 - 2004-07-17,0,0,0,0
2004-07-18 - 2004-07-24,0,0,0,0
2004-07-25 - 2004-07-31,0,0,0,0
2004-08-01 - 2004-08-07,0,0,0,0
2004-08-08 - 2004-08-14,0,0,0,0
2004-08-15 - 2004-08-21,0,0,0,0
2004-08-22 - 2004-08-28,0,0,0,0
2004-08-29 - 2004-09-04,0,0,0,0
2004-09-05 - 2004-09-11,0,0,0,0
2004-09-12 - 2004-09-18,0,0,0,0
2004-09-19 - 2004-09-25,0,0,0,0
2004-09-26 - 2004-10-02,0,0,0,0
2004-10-03 - 2004-10-09,0,0,0,0
2004-10-10 - 2004-10-16,0,0,0,0
2004-10-17 - 2004-10-23,0,0,0,0
2004-10-24 - 2004-10-30,0,0,0,0
2004-10-31 - 2004-11-06,0,0,0,0
2004-11-07 - 2004-11-13,0,0,0,0
2004-11-14 - 2004-11-20,0,0,0,0
2004-11-21 - 2004-11-27,0,0,0,0
2004-11-28 - 2004-12-04,0,0,0,0
2004-12-05 - 2004-12-11,0,0,0,0
2004-12-12 - 2004-12-18,0,0,0,0
2004-12-19 - 2004-12-25,0,0,0,0
2004-12-26 -...

CSS

body {
    background-color: white
}

JavaScript

/*Highcharts.setOptions({
    colors: ['#3B5998', '#CCCCCC', '#CCCCCC', '#CCCCCC']
});*/
                   


Highcharts.data({
    csv: $('#data').html(),
    
    // Parse the date ranges
    parseDate: function (val) {
        var match = val.match(/^([0-9]{4}-[0-9]{2}-[0-9]{2}) - [0-9]{4}-[0-9]{2}-[0-9]{2}$/);
           
        if (match) {
            val = Date.parse(match[1].replace(/-/g, '/'));
        }
        return val;
    },
    
    // Here comes the parsed data
    complete: function (options) {
        
        // Highlight Highcharts
        options.series[0].type = 'area';
        options.series[0].lineWidth = 2;
        options.series[0].zIndex = 4;
        options.series[0].fillOpacity = 0.7;
        
        
        // Create monthly averages for a more readable chart
        $.each(options.series, function (i, series) {
            var lastMonth,
                monthData = 0,
                monthCounter = 0,
                newData = [];
            $.each(series.data, function (j, point) {
                var currentMonth = (new Date(point[0])).getMonth();
                monthData += point[1];
                monthCounter += 1;
                
                // Entering a new month, sum up the previous one
                if (lastMonth && currentMonth !== lastMonth) {
                    newData.push([
                        (new Date(series.data[j - 1][0])).setDate(1),
                        monthData / monthCounter
                    ]);
                    monthData = monthCounter = 0;
                }
                
                lastMonth = currentMonth;
            }); 
            series.data = newData;
        });
        
        // Merge the data with other options
        options = Highcharts.merge(options, {
            chart: {
                renderTo: 'container',
                type: 'area'
            },
            
            title: {
                text: 'Web charting libraries popularity'
          ...