Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

JavaScript

$(function() {
  var options = {
    chart: {
      renderTo: 'container',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false
    },
    title: {
      text: ''
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
      }
    },
    plotOptions: {
      line: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          color: '#000000',
          connectorColor: '#000000'
        }
      }
    },
    events: {
      load: function() {
        var theChart = this;
        var theSeries = this.series;
      }
    },
    series: [{
      type: 'line',
      name: 'Browser share'
    }]
  };

	//though this is a simple array, you will use a real json object here
  json = [11, 71.5, 0, 0, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4];
  
  json = json.filter(function(val) {
    return val !== 0;
  });
  
  options.series[0].data = json;
  $('#container').highcharts(options);

});