<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Highcharts Example</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <style type="text/css"> .chart { min-width: 320px; max-width: 800px; height: 220px; margin: 0 auto; } </style> <!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> </style> <script type="text/javascript"> /* The purpose of this demo is to demonstrate how multiple charts on the same page can be linked through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a small variation for each data set, and a mouse/touch event handler to bind the charts together. */ $(function () { /** * In order to synchronize tooltips and crosshairs, override the * built-in events with handlers defined on the parent element. */ $('#container').bind('mousemove touchmove', function (e) { var chart, point, i; for (i = 0; i < Highcharts.charts.length; i++) { chart = Highcharts.charts[i]; e = chart.pointer.normalize(e); // Find coordinates within the chart point = chart.series[0].searchPoint(e, true); // Get the hovered point if (point) { point.onMouseOver(); // Show the hover marker chart.tooltip.refresh(point); // Show the tooltip chart.xAxis[0].drawCrosshair(e, point); // Show the crosshair } } }); /** * Override the reset function, we don't need to hide the tooltips and crosshairs. */ Highcharts.Pointer.prototype.reset = function () {}; /** * Synchronize zooming through the setExtremes event handler. */ function syncExtremes(e) { var thisChart = this.chart; Highcharts.each(Highcharts.charts, function (chart) { if (chart !== thisChart) { if (chart.xAxis[0].setExtremes) { // It is null while updating chart.xAxis[0].setExtremes(e.min, e.max); } } }); } // Get the data. The contents of the data file can be viewed at // https://github.com/highslide-software/highcharts.com/blob/master/samples/data/activity.json $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=activity.json&callback=?', function (activity) { $.each(activity.datasets, function (i, dataset) { // Add X values dataset.data = Highcharts.map(dataset.data, function (val, i) { return [activity.xData[i], val]; }); $('<div class="chart">') .appendTo('#container') .highcharts({ chart: { marginLeft: 40, // Keep all charts left aligned spacingTop: 20, spacingBottom: 20 // zoomType: 'x', // pinchType: null // Disable zoom on touch devices }, title: { text: dataset.name, align: 'left', margin: 0, x: 30 }, credits: { enabled: false }, legend: { enabled: false }, xAxis: { crosshair: true, events: { setExtremes: syncExtremes }, labels: { format: '{value} km' } }, yAxis: { title: { text: null } }, tooltip: { positioner: function () { return { x: this.chart.chartWidth - this.label.width, // right aligned y: -1 // align to title }; }, borderWidth: 0, backgroundColor: 'none', pointFormat: '{point.y}', headerFormat: '', shadow: false, style: { fontSize: '18px' }, valueDecimals: dataset.valueDecimals }, series: [{ data: dataset.data, name: dataset.name, type: dataset.type, color: Highcharts.getOptions().colors[i], fillOpacity: 0.3, tooltip: { valueSuffix: ' ' + dataset.unit } }] }); }); }); }); </script> </head> <body> <script src="../../js/highcharts.js"></script> <div id="container"></div> </body> </html>