Charts Lib Comparasion (v8)

Revision 8 of this benchmark created by Luisa on

Preparation HTML

<!-- HighCharts -->
<script src="https://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>

<!-- NVD3 Charts -->
<script src="https://rawgithub.com/novus/nvd3/master/lib/d3.v2.js"></script>
<script src="https://rawgithub.com/novus/nvd3/master/nv.d3.js"></script>
<div id="nvd3-container" style="width: 900px; height: 500px;"><svg></svg></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: 300px;">
  <div id="ryaxis"></div>
  <div id="rchart"></div>
</div>

<!-- canvasjs -->
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="canvasjs-chart" style="width: 900px; height: 500px;"></div>

<style>
#rickshaw-chart {
position: relative;
margin-top: 80px;
}

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

#rickshaw-chart #rchart {
position: relative;
left: 40px;
}

#canvasjs-chart canvas {
left:0px;
}
</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.getNVDData = function() {
    return [{
      key: 'Cherno More',
      values: [
        [
          "2012-09-19T20:38:56.319Z",
          1.92
        ],
        [
          "2012-09-19T20:54:07.919Z",
          1.72
        ],
        [
          "2012-09-19T20:57:10.239Z",
          1.68
        ],
        [
          "2012-09-19T21:03:14.879Z",
          1.74
        ],
        [
          "2012-09-19T21:06:17.199Z",
          1.74
        ],
        [
          "2012-09-19T21:06:17.199Z",
          1.82
        ],
        [
          "2012-09-19T21:24:31.119Z",
          1.88
        ],
        [
          "2012-09-19T21:45:47.359Z",
          1.86
        ],
        [
          "2012-09-19T21:45:47.359Z",
          1.92
        ],
        [
          "2012-09-19T21:48:49.679Z",
          1.9
        ],
        [
          "2012-09-19T22:00:58.959Z",
          1.9
        ],
        [
          "2012-09-19T22:19:12.879Z",
          1.84
        ],
        [
          "2012-09-19T22:22:15.199Z",
          1.86
        ],
        [
          "2012-09-19T22:37:26.799Z",
          1.84
        ],
        [
          "2012-09-19T22:43:31.439Z",
          1.82
        ],
        [
          "2012-09-19T22:46:33.759Z",
          1.82
        ],
        [
          "2012-09-19T22:49:36.079Z",
          1.8
        ]
      ]
    }, {
      key: 'Botev Plovdiv',
      values: [
        [
          "2012-09-19T20:38:56.319Z",
          2.9
        ],
        [
          "2012-09-19T20:54:07.919Z",
          2.68
        ],
        [
          "2012-09-19T20:57:10.239Z",
          2.66
        ],
        [
          "2012-09-19T21:03:14.879Z",
          2.74
        ],
        [
          "2012-09-19T21:06:17.199Z",
          2.74
        ],
        [
          "2012-09-19T21:24:31.119Z",
          2.82
        ],
        [
          "2012-09-19T21:45:47.359Z",
          2.88
        ],
        [
          "2012-09-19T21:48:49.679Z",
          2.86
        ],
        [
          "2012-09-19T22:00:58.959Z",
          2.88
        ],
        [
          "2012-09-19T22:19:12.879Z",
          2.9
        ],
        [
          "2012-09-19T22:22:15.199Z",
          2.82
        ],
        [
          "2012-09-19T22:37:26.799Z",
          2.84
        ],
        [
          "2012-09-19T22:43:31.439Z",
          2.86
        ],
        [
          "2012-09-19T22:46:33.759Z",
          2.84
        ],
        [
          "2012-09-19T22:49:36.079Z",
          2.82
        ],
        [
          "2012-09-19T23:07:49.999Z",
          2.8
        ],
        [
          "2012-09-19T23:10:52.319Z",
          2.8
        ]
      ]
    }, {
      key: 'The Draw',
      values: [
        [
          "2012-09-19T20:38:56.319Z",
          3.55
        ],
        [
          "2012-09-19T20:54:07.919Z",
          3.6
        ],
        [
          "2012-09-19T20:57:10.239Z",
          3.65
        ],
        [
          "2012-09-19T21:03:14.879Z",
          3.7
        ],
        [
          "2012-09-19T21:06:17.199Z",
          3.8
        ],
        [
          "2012-09-19T21:24:31.119Z",
          3.85
        ],
        [
          "2012-09-19T21:45:47.359Z",
          3.45
        ],
        [
          "2012-09-19T21:48:49.679Z",
          3.5
        ],
        [
          "2012-09-19T22:00:58.959Z",
          3.55
        ],
        [
          "2012-09-19T22:19:12.879Z",
          3.7
        ],
        [
          "2012-09-19T22:22:15.199Z",
          3.5
        ],
        [
          "2012-09-19T22:37:26.799Z",
          3.75
        ],
        [
          "2012-09-19T22:43:31.439Z",
          3.8
        ],
        [
          "2012-09-19T22:46:33.759Z",
          3.55
        ],
        [
          "2012-09-19T22:49:36.079Z",
          3.65
        ],
        [
          "2012-09-19T23:07:49.999Z",
          3.7
        ],
        [
          "2012-09-19T23:10:52.319Z",
          3.75
        ]
      ]
    }];
  }
  
  window.getGoogleChartsMap = function() {
    return [
      ['time', 'Cherno More', 'Botev Plovdiv', 'The Draw'], ['20:38', 1.92, 2.9, 3.55], ['20:54', 1.72, 2.68, 3.6], ['20:57', 1.68, 2.66, 3.65], ['21:03', 1.74, 2.74, 3.7], ['21:06', 1.74, 2.74, 3.8], ['21:24', 1.82, 2.82, 3.85], ['21:45', 1.88, 2.88, 3.7], ['21:48', 1.86, 2.86, 3.5], ['22:00', 1.92, 2.88, 3.55], ['22:19', 1.9, 2.9, 3.7], ['22:22', 1.9, 2.82, 3.5], ['22:37', 1.84, 2.84, 3.75], ['22:43', 1.86, 2.86, 3.8], ['22:46', 1.84, 2.84, 3.55], ['22:49', 1.82, 2.82, 3.65], ['23:07', 1.82, 2.8, 3.7], ['23:10', 1.8, 2.8, 3.75]
  
    ];
  }
  
  window.getCanvasjsData = function () {
  return [[{
            x: new Date(2012,09,19,20,38),
            y: 1.92
          }, {
            x: new Date(2012,09,19,20,54),
            y: 1.72
          }, {
            x: new Date(2012,09,19,20,57),
            y: 1.68
          }, {
            x: new Date(2012,09,19,21,03),
            y: 1.74
          }, {
            x: new Date(2012,09,19,21,06),
            y: 1.74
          }, {
            x: new Date(2012,09,19,21,24),
            y: 1.82
          }, {
            x: new Date(2012,09,19,21,45),
            y: 1.88
          }, {
            x: new Date(2012,09,19,21,48),
            y: 1.86
          }, {
            x: new Date(2012,09,19,22,00),
            y: 1.92
          }, {
            x: new Date(2012,09,19,22,19),
            y: 1.9
          }, {
            x: new Date(2012,09,19,22,22),
            y: 1.9
          }, {
            x: new Date(2012,09,19,22,37),
            y: 1.84
          }, {
            x: new Date(2012,09,19,22,43),
            y: 1.86
          }, {
            x: new Date(2012,09,19,22,46),
            y: 1.84
          }, {
            x: new Date(2012,09,19,22,49),
            y: 1.82
          }, {
            x: new Date(2012,09,19,23,07),
            y: 1.82
          }, {
            x: new Date(2012,09,19,23,10),
            y: 1.8
          }]
        , 
          [{
            x: new Date(2012,09,19,20,38),
            y: 2.9
          }, {
            x: new Date(2012,09,19,20,54),
            y: 2.68
          }, {
            x: new Date(2012,09,19,20,57),
            y: 2.66
          }, {
            x: new Date(2012,09,19,21,03),
            y: 2.74
          }, {
            x: new Date(2012,09,19,21,06),
            y: 2.74
          }, {
            x: new Date(2012,09,19,21,24),
            y: 2.82
          }, {
            x: new Date(2012,09,19,21,45),
            y: 2.88
          }, {
            x: new Date(2012,09,19,21,48),
            y: 2.86
          }, {
            x: new Date(2012,09,19,22,00),
            y: 2.88
          }, {
            x: new Date(2012,09,19,22,19),
            y: 2.9
          }, {
            x: new Date(2012,09,19,22,22),
            y: 2.82
          }, {
            x: new Date(2012,09,19,22,37),
            y: 2.84
          }, {
            x: new Date(2012,09,19,22,43),
            y: 2.86
          }, {
            x: new Date(2012,09,19,22,46),
            y: 2.84
          }, {
            x: new Date(2012,09,19,22,49),
            y: 2.82
          }, {
            x: new Date(2012,09,19,23,07),
            y: 2.8
          }, {
            x: new Date(2012,09,19,23,10),
            y: 2.8
          }]
        , 
          [{
            x: new Date(2012,09,19,20,38),
            y: 3.55
          }, {
            x: new Date(2012,09,19,20,54),
            y: 3.6
          }, {
            x: new Date(2012,09,19,20,57),
            y: 3.65
          }, {
            x: new Date(2012,09,19,21,03),
            y: 3.7
          }, {
            x: new Date(2012,09,19,21,06),
            y: 3.8
          }, {
            x: new Date(2012,09,19,21,24),
            y: 3.85
          }, {
            x: new Date(2012,09,19,21,45),
            y: 3.45
          }, {
            x: new Date(2012,09,19,21,48),
            y: 3.5
          }, {
            x: new Date(2012,09,19,22,00),
            y: 3.55
          }, {
            x: new Date(2012,09,19,22,19),
            y: 3.7
          }, {
            x: new Date(2012,09,19,22,22),
            y: 3.5
          }, {
            x: new Date(2012,09,19,22,37),
            y: 3.75
          }, {
            x: new Date(2012,09,19,22,43),
            y: 3.8
          }, {
            x: new Date(2012,09,19,22,46),
            y: 3.55
          }, {
            x: new Date(2012,09,19,22,49),
            y: 3.65
          }, {
            x: new Date(2012,09,19,23,07),
            y: 3.7
          }, {
            x: new Date(2012,09,19,23,10),
            y: 3.75
          }]
        ];
  }

Test runner

Ready to run.

Testing in
TestOps/sec
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
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
NVD3
if (window.nvChart) window.nvChart.clear();
window.nvChart = nv.addGraph(function() {
  var chart = nv.models.lineChart()
    .x(function(d) {
      return Date.parse(d[0])
    })
    .y(function(d) {
      return d[1]
    });

  chart.useInteractiveGuideline(true);
  chart.xAxis.axisLabel('time');
  chart.xAxis.tickFormat(function(d) {
    return d3.time.format('%X')(new Date(d))
  });

  chart.yAxis.axisLabel('average price');
  chart.yAxis.tickFormat(d3.format('.02f'));
  
  d3.select('#nvd3-container svg').empty();
  d3.select('#nvd3-container svg')
    .datum(window.getNVDData())
    .call(chart);

  nv.utils.windowResize(chart.update);
  return chart;
});
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
Canvasjs
var data = window.getCanvasjsData();

var chart = new CanvasJS.Chart("canvasjs-chart",
		{

			title:{
				text: "Average Price",
				fontSize: 30
			},
			axisX:{
				gridColor: "Silver",
				tickColor: "silver",
        valueFormatString: "HH:mm"

			},                        
      toolTip:{
        shared:true
      },
			theme: "theme2",
			axisY: {
				gridColor: "Silver",
				tickColor: "silver"
			},
			legend:{
				verticalAlign: "center",
				horizontalAlign: "right"
			},
			data: [
			{        
				type: "line",
				showInLegend: true,
				lineThickness: 2,
				name: "Cherno More",
				markerType: "square",
				color: "#F08080",
				dataPoints: data[0]
			},
			{        
				type: "line",
				showInLegend: true,
				name: "Botev Plovdiv",
				color: "#20B2AA",
				lineThickness: 2,

				dataPoints: data[1]
			},
			{        
				type: "line",
				showInLegend: true,
				name: "The Draw",
				color: "#423543",
				lineThickness: 2,

				dataPoints: data[2]
			}

			
			]
		});

chart.render();
ready

Revisions

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