highcharts vs amcharts vs rickshaw vs fusioncharts (v13)

Revision 13 of this benchmark created on


Preparation HTML

<!-- HighCharts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="highcharts-container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

<!-- AM Charts -->
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<div id="amcharts-container" style="width: 900px; height: 500px;"></div>

<!-- Rickshaw Charts -->
<link type="text/css" rel="stylesheet" href="http://code.shutterstock.com/rickshaw/rickshaw.min.css"></script>
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.v3.js"></script>
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.layout.min.js"></script>
<script src="http://code.shutterstock.com/rickshaw/rickshaw.js"></script>
<div id="rickshaw-chart" style="width: 900px; height: 500px;">
  <div id="ryaxis"></div>
  <div id="rchart"></div>
</div>

<!--Fusion Chart-->
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>



<!--Changing the chart size dynamically through FusionCharts API (resizeTo method) -->
<div id="chart-container">FusionCharts will render here</div>

<div id='controllers'>
    <label for='width'>Width</label>
    <input id='width' type='text' value='550' />
    <label for='height'>Height</label>
    <input id='height' type='text' value='350' />
    <input id='change' class='resizebtn' type='Button' value='Resize' />
</div>

<style>
#rickshaw-chart {
float: left;
position: relative;
}

#ryaxis {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
}

#rchart {
position: relative;
left: 40px;
}

#fusion-chart {
position: relative;
left: 40px;
}
</style>

Setup

window.getHighChartsData = function() {
      return [{
        name: 'Cherno More',
        data: [
          [Date.parse("2012-09-19T20:38:56.319Z"), 1.92],
          [Date.parse("2012-09-19T20:54:07.919Z"), 1.72],
          [Date.parse("2012-09-19T20:57:10.239Z"), 1.68],
          [Date.parse("2012-09-19T21:03:14.879Z"), 1.74],
          [Date.parse("2012-09-19T21:06:17.199Z"), 1.74],
          [Date.parse("2012-09-19T21:24:31.119Z"), 1.82],
          [Date.parse("2012-09-19T21:45:47.359Z"), 1.88],
          [Date.parse("2012-09-19T21:48:49.679Z"), 1.86],
          [Date.parse("2012-09-19T22:00:58.959Z"), 1.92],
          [Date.parse("2012-09-19T22:19:12.879Z"), 1.9],
          [Date.parse("2012-09-19T22:22:15.199Z"), 1.9],
          [Date.parse("2012-09-19T22:37:26.799Z"), 1.84],
          [Date.parse("2012-09-19T22:43:31.439Z"), 1.86],
          [Date.parse("2012-09-19T22:46:33.759Z"), 1.84],
          [Date.parse("2012-09-19T22:49:36.079Z"), 1.82],
          [Date.parse("2012-09-19T23:07:49.999Z"), 1.82],
          [Date.parse("2012-09-19T23:10:52.319Z"), 1.8]
        ]
      }, {
        name: 'Botev Plovdiv',
        data: [
          [Date.parse("2012-09-19T20:38:56.319Z"), 2.9],
          [Date.parse("2012-09-19T20:54:07.919Z"), 2.68],
          [Date.parse("2012-09-19T20:57:10.239Z"), 2.66],
          [Date.parse("2012-09-19T21:03:14.879Z"), 2.74],
          [Date.parse("2012-09-19T21:06:17.199Z"), 2.74],
          [Date.parse("2012-09-19T21:24:31.119Z"), 2.82],
          [Date.parse("2012-09-19T21:45:47.359Z"), 2.88],
          [Date.parse("2012-09-19T21:48:49.679Z"), 2.86],
          [Date.parse("2012-09-19T22:00:58.959Z"), 2.88],
          [Date.parse("2012-09-19T22:19:12.879Z"), 2.9],
          [Date.parse("2012-09-19T22:22:15.199Z"), 2.82],
          [Date.parse("2012-09-19T22:37:26.799Z"), 2.84],
          [Date.parse("2012-09-19T22:43:31.439Z"), 2.86],
          [Date.parse("2012-09-19T22:46:33.759Z"), 2.84],
          [Date.parse("2012-09-19T22:49:36.079Z"), 2.82],
          [Date.parse("2012-09-19T23:07:49.999Z"), 2.8],
          [Date.parse("2012-09-19T23:10:52.319Z"), 2.8]
        ]
      }, {
        name: 'The Draw',
        data: [
          [Date.parse("2012-09-19T20:38:56.319Z"), 3.55],
          [Date.parse("2012-09-19T20:54:07.919Z"), 3.6],
          [Date.parse("2012-09-19T20:57:10.239Z"), 3.65],
          [Date.parse("2012-09-19T21:03:14.879Z"), 3.7],
          [Date.parse("2012-09-19T21:06:17.199Z"), 3.8],
          [Date.parse("2012-09-19T21:24:31.119Z"), 3.85],
          [Date.parse("2012-09-19T21:45:47.359Z"), 3.45],
          [Date.parse("2012-09-19T21:48:49.679Z"), 3.5],
          [Date.parse("2012-09-19T22:00:58.959Z"), 3.55],
          [Date.parse("2012-09-19T22:19:12.879Z"), 3.7],
          [Date.parse("2012-09-19T22:22:15.199Z"), 3.5],
          [Date.parse("2012-09-19T22:37:26.799Z"), 3.75],
          [Date.parse("2012-09-19T22:43:31.439Z"), 3.8],
          [Date.parse("2012-09-19T22:46:33.759Z"), 3.55],
          [Date.parse("2012-09-19T22:49:36.079Z"), 3.65],
          [Date.parse("2012-09-19T23:07:49.999Z"), 3.7],
          [Date.parse("2012-09-19T23:10:52.319Z"), 3.75]
        ]
      }];
    };
    
    
    window.getRickshawData = function(color) {
      return [{
        name: 'Cherno More',
        data: [{
          x: Date.parse("2012-09-19T20:38:56.319Z"),
          y: 1.92
        }, {
          x: Date.parse("2012-09-19T20:54:07.919Z"),
          y: 1.72
        }, {
          x: Date.parse("2012-09-19T20:57:10.239Z"),
          y: 1.68
        }, {
          x: Date.parse("2012-09-19T21:03:14.879Z"),
          y: 1.74
        }, {
          x: Date.parse("2012-09-19T21:06:17.199Z"),
          y: 1.74
        }, {
          x: Date.parse("2012-09-19T21:24:31.119Z"),
          y: 1.82
        }, {
          x: Date.parse("2012-09-19T21:45:47.359Z"),
          y: 1.88
        }, {
          x: Date.parse("2012-09-19T21:48:49.679Z"),
          y: 1.86
        }, {
          x: Date.parse("2012-09-19T22:00:58.959Z"),
          y: 1.92
        }, {
          x: Date.parse("2012-09-19T22:19:12.879Z"),
          y: 1.9
        }, {
          x: Date.parse("2012-09-19T22:22:15.199Z"),
          y: 1.9
        }, {
          x: Date.parse("2012-09-19T22:37:26.799Z"),
          y: 1.84
        }, {
          x: Date.parse("2012-09-19T22:43:31.439Z"),
          y: 1.86
        }, {
          x: Date.parse("2012-09-19T22:46:33.759Z"),
          y: 1.84
        }, {
          x: Date.parse("2012-09-19T22:49:36.079Z"),
          y: 1.82
        }, {
          x: Date.parse("2012-09-19T23:07:49.999Z"),
          y: 1.82
        }, {
          x: Date.parse("2012-09-19T23:10:52.319Z"),
          y: 1.8
        }],
        color: color
      }, {
        name: 'Botev Plovdiv',
        data: [{
          x: Date.parse("2012-09-19T20:38:56.319Z"),
          y: 2.9
        }, {
          x: Date.parse("2012-09-19T20:54:07.919Z"),
          y: 2.68
        }, {
          x: Date.parse("2012-09-19T20:57:10.239Z"),
          y: 2.66
        }, {
          x: Date.parse("2012-09-19T21:03:14.879Z"),
          y: 2.74
        }, {
          x: Date.parse("2012-09-19T21:06:17.199Z"),
          y: 2.74
        }, {
          x: Date.parse("2012-09-19T21:24:31.119Z"),
          y: 2.82
        }, {
          x: Date.parse("2012-09-19T21:45:47.359Z"),
          y: 2.88
        }, {
          x: Date.parse("2012-09-19T21:48:49.679Z"),
          y: 2.86
        }, {
          x: Date.parse("2012-09-19T22:00:58.959Z"),
          y: 2.88
        }, {
          x: Date.parse("2012-09-19T22:19:12.879Z"),
          y: 2.9
        }, {
          x: Date.parse("2012-09-19T22:22:15.199Z"),
          y: 2.82
        }, {
          x: Date.parse("2012-09-19T22:37:26.799Z"),
          y: 2.84
        }, {
          x: Date.parse("2012-09-19T22:43:31.439Z"),
          y: 2.86
        }, {
          x: Date.parse("2012-09-19T22:46:33.759Z"),
          y: 2.84
        }, {
          x: Date.parse("2012-09-19T22:49:36.079Z"),
          y: 2.82
        }, {
          x: Date.parse("2012-09-19T23:07:49.999Z"),
          y: 2.8
        }, {
          x: Date.parse("2012-09-19T23:10:52.319Z"),
          y: 2.8
        }],
        color: color
      }, {
        name: 'The Draw',
        data: [{
          x: Date.parse("2012-09-19T20:38:56.319Z"),
          y: 3.55
        }, {
          x: Date.parse("2012-09-19T20:54:07.919Z"),
          y: 3.6
        }, {
          x: Date.parse("2012-09-19T20:57:10.239Z"),
          y: 3.65
        }, {
          x: Date.parse("2012-09-19T21:03:14.879Z"),
          y: 3.7
        }, {
          x: Date.parse("2012-09-19T21:06:17.199Z"),
          y: 3.8
        }, {
          x: Date.parse("2012-09-19T21:24:31.119Z"),
          y: 3.85
        }, {
          x: Date.parse("2012-09-19T21:45:47.359Z"),
          y: 3.45
        }, {
          x: Date.parse("2012-09-19T21:48:49.679Z"),
          y: 3.5
        }, {
          x: Date.parse("2012-09-19T22:00:58.959Z"),
          y: 3.55
        }, {
          x: Date.parse("2012-09-19T22:19:12.879Z"),
          y: 3.7
        }, {
          x: Date.parse("2012-09-19T22:22:15.199Z"),
          y: 3.5
        }, {
          x: Date.parse("2012-09-19T22:37:26.799Z"),
          y: 3.75
        }, {
          x: Date.parse("2012-09-19T22:43:31.439Z"),
          y: 3.8
        }, {
          x: Date.parse("2012-09-19T22:46:33.759Z"),
          y: 3.55
        }, {
          x: Date.parse("2012-09-19T22:49:36.079Z"),
          y: 3.65
        }, {
          x: Date.parse("2012-09-19T23:07:49.999Z"),
          y: 3.7
        }, {
          x: Date.parse("2012-09-19T23:10:52.319Z"),
          y: 3.75
        }],
        color: color
      }];
    };
    
    window.getAmData = function() {
      return [{
        'date': '20:38',
        'Cherno More': 1.92,
        'Botev Plovdiv': 2.9,
        'The Draw': 3.55
      }, {
        'date': "20:54",
        'Cherno More': 1.68,
        'Botev Plovdiv': 2.68,
        'The Draw': 3.6
      }, {
        'date': "20:57",
        'Cherno More': 1.74,
        'Botev Plovdiv': 2.66,
        'The Draw': 3.65
      }, {
        'date': "21:03",
        'Cherno More': 1.74,
        'Botev Plovdiv': 2.74,
        'The Draw': 3.7
      }, {
        'date': "21:06",
        'Cherno More': 1.82,
        'Botev Plovdiv': 2.74,
        'The Draw': 3.8
      }, {
        'date': "21:24",
        'Cherno More': 1.88,
        'Botev Plovdiv': 2.82,
        'The Draw': 3.85
      }, {
        'date': "21:45",
        'Cherno More': 1.86,
        'Botev Plovdiv': 2.88,
        'The Draw': 3.45
      }, {
        'date': "21:48",
        'Cherno More': 1.92,
        'Botev Plovdiv': 2.86,
        'The Draw': 3.5
      }, {
        'date': "22:00",
        'Cherno More': 1.9,
        'Botev Plovdiv': 2.88,
        'The Draw': 3.55
      }, {
        'date': "22:19",
        'Cherno More': 1.9,
        'Botev Plovdiv': 2.9,
        'The Draw': 3.7
      }, {
        'date': "22:22",
        'Cherno More': 1.84,
        'Botev Plovdiv': 2.82,
        'The Draw': 3.5
      }, {
        'date': "22:37",
        'Cherno More': 1.86,
        'Botev Plovdiv': 2.84,
        'The Draw': 3.75
      }, {
        'date': "22:43",
        'Cherno More': 1.84,
        'Botev Plovdiv': 2.86,
        'The Draw': 3.8
      }, {
        'date': "22:46",
        'Cherno More': 1.82,
        'Botev Plovdiv': 2.84,
        'The Draw': 3.55
      }, {
        'date': "22:49",
        'Cherno More': 1.92,
        'Botev Plovdiv': 2.82,
        'The Draw': 3.65
      }, {
        'date': "23:07",
        'Cherno More': 1.82,
        'Botev Plovdiv': 2.8,
        'The Draw': 3.7
      }, {
        'date': "23:10",
        'Cherno More': 1.8,
        'Botev Plovdiv': 2.8,
        'The Draw': 3.75
      }];
    }
    
    
    window.getFusionChartsData = function() {
      return [{�?�?�?�?
        "chart": �?{�?�?�?�?�?�?�?�?
          "caption": �?"Power�?Generator",
          "xaxisname": �?"Time",
          "showvalues": �?"0",
          "divlinealpha": �?"100",
          "vdivlinealpha": �?"0",
          "showborder": �?"0",
          "bgcolor": �?"FFFFFF",
          "showalternatehgridcolor": �?"0",
          "labeldisplay": �?"WRAP",
          "divlinecolor": �?"CCCCCC",
          "showcanvasborder": �?"0",
          "showshadow": �?"0",
          "linethickness": �?"3",
          "legendshadow": �?"0",
          "legendborderalpha": �?"50"�?�?�?�?
        },
        "categories": �?[�?�?�?�?�?�?�?�?{�?�?�?�?�?�?�?�?�?�?�?�?
          "category": �?[�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?{�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": �?"20:38"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": �?"20:54"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": �?"20:57"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": �?"21:03"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": �?"21:06"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "21:24"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "21:45"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "21:48"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "22:00"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "22:19"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "22:22"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "22:37"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "22:43"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "22:46"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "22:49"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "23:07"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "label": "23:10"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }�?�?�?�?�?�?�?�?�?�?�?�?]�?�?�?�?�?�?�?�?
        }�?�?�?�?],
        "axis": �?[�?�?�?�?�?�?�?�?{�?�?�?�?�?�?�?�?�?�?�?�?
          "title": �?"Cherno More",
          "titlepos": �?"left",
          "tickwidth": �?"10",
          "divlineisdashed": �?"1",
          "color": �?"008ee4",
          "dataset": �?[�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?{�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "seriesname": �?"Cherno More",
            "data": �?[�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?{�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.92"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.72"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.68"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.74"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.74"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.82"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.88"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.86"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.92"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.9"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.9"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.84"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.86"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.84"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.82"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.82"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"1.8"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?]�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }�?�?�?�?�?�?�?�?�?�?�?�?]�?�?�?�?�?�?�?�?
        }, �?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?
          "title": �?"Botev Plovdiv",
          "titlepos": �?"left",
          "numdivlines": �?"14",
          "tickwidth": �?"10",
          "sdivlineisdashed": �?"1",
          "color": �?"f8bd19",
          "divlinealpha": �?"30",
          "dataset": �?[�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?{�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "seriesname": �?"Botev Plovdiv",
            "data": �?[�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?{�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.9"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.68"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.66"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.74"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.74"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.82"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.88"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.86"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.88"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.9"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.82"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.84"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.86"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.84"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.82"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.8"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.8"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }�?�?�?]�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }�?�?�?�?�?�?�?�?�?�?�?�?]�?�?�?�?�?�?�?�?
        }, �?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?
          "title": �?"The Draw",
          "titlepos": �?"RIGHT",
          "axisonleft": �?"0",
          "numdivlines": �?"10",
          "tickwidth": �?"10",
          "divlineisdashed": �?"1",
          "color": �?"6baa01",
          "dataset": �?[�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?{�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            "seriesname": �?"The Draw",
            "data": �?[�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?{�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.55"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"2.6"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.65"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.7"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.8"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.85"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.45"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.5"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.55"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.7"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.5"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.75"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.8"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.55"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.65"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.7"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }, �?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�? {�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
              "value": �?"3.75"�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
            }�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?]�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?�?
          }�?�?�?�?�?�?�?�?�?�?�?�?]�?�?�?�?�?�?�?�?
        }�?�?�?]
      }];
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Fusion Charts
FusionCharts.ready(function () {
    var iniWidth = 500,
        iniHeight = 300,
        
        widthInput = document.getElementById('width'),
        heightInput = document.getElementById('height'),
        changeBtn = document.getElementById('change'),
        
        setDimensionOnClick = function () {
            var w = parseInt(widthInput.value, 10) || iniWidth,
            h = parseInt(heightInput.value, 10) || iniHeight;
            if (w && h) {
                revenueChart.resizeTo(w, h);
            }
        },
        
        revenueChart = new FusionCharts({
            type: 'column2d',
            renderAt: 'chart-container',
            width: iniWidth,
            height: iniHeight,
            dataFormat: 'json',
            dataSource: {
                "chart": {
                    "caption": "Monthly revenue",
                    "subCaption": "Last year",
                    "xAxisName": "Month",
                    "yAxisName": "Amount ($)",
                    "numberPrefix": "$",
                    "theme": "fint"
                },

                "data": [
                    {
                        "label": "Jan",
                        "value": "420000"
                    },
                    {
                        "label": "Feb",
                        "value": "810000"
                    }, 
                    {
                        "label": "Mar",
                        "value": "720000"
                    },
                    {
                        "label": "Apr",
                        "value": "550000"
                    },
                    {
                        "label": "May",
                        "value": "910000"
                    },
                    {
                        "label": "Jun",
                        "value": "510000"
                    },
                    {
                        "label": "Jul",
                        "value": "680000"
                    },
                    {
                        "label": "Aug",
                        "value": "620000"
                    },
                    {
                        "label": "Sep",
                        "value": "610000"
                    },
                    {
                        "label": "Oct",
                        "value": "490000"
                    },
                    {
                        "label": "Nov",
                        "value": "900000"
                    },
                    {
                        "label": "Dec",
                        "value": "730000"
                    }
                ]
            }
        });

    revenueChart.render();

    if (changeBtn.addEventListener) {
        changeBtn.addEventListener("click", setDimensionOnClick);
    } else {
        changeBtn.onclick && changeBtn.onclick(setDimensionOnClick);
    }
});
ready
amCharts
if (window.amChart) window.amChart.clear();

// SERIAL CHART
window.amChart = new AmCharts.AmSerialChart();
window.amChart.dataProvider = window.getAmData();
window.amChart.categoryField = "date";
window.amChart.startDuration = 0.5;
window.amChart.balloon.color = "#000000";

// AXES
// category
var categoryAxis = window.amChart.categoryAxis;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = "#FAFAFA";
categoryAxis.gridAlpha = 0;
categoryAxis.axisAlpha = 0;
categoryAxis.gridPosition = "start";
categoryAxis.position = "top";

// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.title = "Average Prices";
valueAxis.dashLength = 5;
valueAxis.axisAlpha = 0;
valueAxis.minimum = 1;
valueAxis.maximum = 6;
valueAxis.gridCount = 10;
window.amChart.addValueAxis(valueAxis);

// GRAPHS
// Italy graph                                                                  
var graph = new AmCharts.AmGraph();
graph.title = "Cherno More";
graph.valueField = "Cherno More";
graph.balloonText = "place taken by Cherno More in [[category]]: [[value]]";
graph.bullet = "round";
window.amChart.addGraph(graph);

// Germany graph
var graph = new AmCharts.AmGraph();
graph.title = "Botev Plovdiv";
graph.valueField = "Botev Plovdiv";
graph.balloonText = "place taken by Botev Plovdiv in [[category]]: [[value]]";
graph.bullet = "round";
window.amChart.addGraph(graph);

// United Kingdom graph
var graph = new AmCharts.AmGraph();
graph.title = "The Draw";
graph.valueField = "The Draw";
graph.balloonText = "place taken by The Draw in [[category]]: [[value]]";
graph.bullet = "round";
window.amChart.addGraph(graph);

// CURSOR
var chartCursor = new AmCharts.ChartCursor();
chartCursor.cursorPosition = "mouse";
chartCursor.zoomable = false;
chartCursor.cursorAlpha = 0;
window.amChart.addChartCursor(chartCursor);

// LEGEND
var legend = new AmCharts.AmLegend();
legend.useGraphSettings = true;
window.amChart.addLegend(legend);

// WRITE
var wrapper = document.getElementById("amcharts-container");
window.amChart.write(wrapper);
ready
Rickshaw
var palette = new Rickshaw.Color.Palette();
$('#rchart').empty();
$('#ryaxis').empty();

window.rickshawGraph = new Rickshaw.Graph({
  element: document.querySelector("#rchart"),
  renderer: 'line',
  series: window.getRickshawData(palette.color())
});

var x_axis = new Rickshaw.Graph.Axis.Time({
  graph: window.rickshawGraph
});

var y_axis = new Rickshaw.Graph.Axis.Y({
  graph: window.rickshawGraph,
  orientation: 'left',
  tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
  element: document.getElementById('ryaxis'),
});

window.rickshawGraph.render();
ready
Highcharts
if (window.hgtChrt) window.hgtChrt.destroy();
window.hgtChrt = new Highcharts.Chart({
  chart: {
    renderTo: 'highcharts-container',
    type: 'spline'
  },
  title: {
    text: 'Average prices'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      month: '%e. %b',
      year: '%b'
    }
  },
  yAxis: {
    title: {
      text: 'average price'
    },
    min: 0
  },
  tooltip: {
    formatter: function() {
      return '<b>' + this.series.name + '</b><br/>' +
        Highcharts.dateFormat('%e. %b', this.x) + ': ' + this.y + ' m';
    }
  },
  series: window.getHighChartsData()
});
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.