Highcharts Demo

author(s): Torstein Hønsi

by Tenobaal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="test-charts"></div>

<script>
var activity = {
  "datasets": [
    {
      "data": [
        1413,
        1424,
        1435,
        1447,
        1458,
        1470,
        1481,
        1492,
        1503,
        1514,
        1526,
        1537,
        1548,
        1560,
        1571,
        1582,
        1593,
        1604
      ],
      "name": "distance",
      "type": "line",
      "unit": "m",
      "valueDecimals": 0
    },
    {
      "data": [
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607,
        12607
      ],
      "name": "altitude",
      "type": "area",
      "unit": "m",
      "valueDecimals": 1
    },
    {
      "data": [
        243,
        209,
        233,
        273,
        232,
        271,
        272,
        262,
        262,
        244,
        208,
        216,
        243,
        247,
        270,
        239,
        215,
        220
      ],
      "name": "power",
      "type": "line",
      "unit": "W",
      "valueDecimals": 0
    },
    {
      "data": [
        40,
        40.6,
        41,
        41.1,
        41.1,
        40.9,
        40.2,
        40.2,
        40.3,
        40.2,
        40.8,
        41.1,
        40.8,
        41.1,
        40.5,
        40.2,
        39.9,
        39.7
      ],
      "name": "speed",
      "type": "line",
      "unit": "km/h",
      "valueDecimals": 1
    },
    {
      "data": [
        -1,
        -1,
        1,
        1,
        1,
        1,
        -1,
        -1,
        -1,
        -1,
        1,
        1,
        1,
        1,
        1,
        -1,
        -1,
        -1
      ],
      "name": "curve",
      "type": "line",
      "unit": "",
      "valueDecimals": 0
    },
    {
  ...

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>

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.
*/



/**
 * In order to synchronize tooltips and crosshairs, override the
 * built-in events with handlers defined on the parent element.
 */
 function set_ui(container) {
  ['mousemove', 'touchmove', 'touchstart'].forEach(function (eventType) {
    document.getElementById('test-charts').addEventListener(
      eventType,
      function (e) {
        var chart,
          point,
          i,
          event;

        for (i = 0; i < Highcharts.charts.length; i = i + 1) {
          chart = Highcharts.charts[i];
          // Find coordinates within the chart
          event = chart.pointer.normalize(e);
          // Get the hovered point
          point = chart.series[0].searchPoint(event, true);

          if (point) {
            point.highlight(e);
          }
        }
      }
    );
  });

  /**
   * Override the reset function, we don't need to hide the tooltips and
   * crosshairs.
   */
  Highcharts.Pointer.prototype.reset = function () {
    return undefined;
  };

  /**
   * Highlight a point by showing tooltip, setting hover state and draw crosshair
   */
  Highcharts.Point.prototype.highlight = function (event) {
    event = this.series.chart.pointer.normalize(event);
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };
}

/**
 * Synchronize zooming through the setExtremes event handler.
 */
function syncExtremes(e) {
  var thisChart = this.chart;

  if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
    Highcharts.each(Highcharts.charts, function (chart) {
      if (chart !== thisChart) {
        if...