Highcharts Demo

author(s): Torstein Hønsi

by arawn45

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

nnbvar toolTip = [
  ['INC0851685', 'INC0851694', 'INC0851700', 'INC0851730', 'INC0851844', 'INC0851848'],
  ['INC0851994'],
  ['INC0852913'],
  ['INC0853188', 'INC0853189', 'INC0853194', 'INC0853203', 'INC0853209', 'INC0853320'],
  ['INC0853801', 'INC0853836', 'INC0853867', 'INC0854072'],
  ['INC0854336', 'INC0854338', 'INC0854354', 'INC0854390'],
  ['INC0855197', 'INC0855325', 'INC0855526'],
  ['INC0855705', 'INC0855728'],
  ['INC0856094', 'INC0856105', 'INC0856372'],
  ['INC0852913'],
  ['INC0852913'],
  ['INC0852913']
];

var data = [
  [0, 100],
  [1, 100],
  [2, 100],
  [3, 100],
  [4, 100],
  [5, 100],
  [6, 100],
  [7, 100],
  [8, 100],
  [9, 100],
  [10, 100],
  [11, 100]
];

$(function() {
  cloneToolTip = null;
  chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
      series: {
        cursor: 'pointer',
        point: {
          events: {
            click: function() {
              if (cloneToolTip) {
                chart.container.firstChild.removeChild(cloneToolTip);
              }
              cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
              chart.container.firstChild.appendChild(cloneToolTip);
            }
          }
        }
      }
    },

    tooltip: {
      useHTML: true,
      style: {
        pointerEvents: 'auto'
      }
    },

    series: [{
      tooltip: {
        pointFormatter: function() {
          var string = '';
          Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
            string += '<a href="http://www.google.com">' + p + '</a><br><input type="text" name="foo"><br>'
          });
          return string + "<br />";
        }
      },
      type: 'spline',
      data: data
    }]
  });
});