Highcharts Demo

author(s): Torstein Hønsi

by Ben Clayton

HTML

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

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

JavaScript

Highcharts.chart('container', {
  "yAxis": {
    "plotLines": [{
      "width": 1,
      "color": "#808080",
      "value": 0
    }],
    "min": 0,
    "title": {
      "text": "Male / Female / Unknown"
    }
  },
  "xAxis": {
    "dateTimeLabelFormats": {
      "week": "%e %b %Y",
      "month": "%b %Y",
      "day": "%e %b %Y"
    },
    "title": "Age",
    "categories": [10, 102, 103, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 4, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 5, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 8, 80, 81, 82, 83, 84, 85, 87, 9]
				
  },
  "chart": {
    "zoomType": "x",
    "min-width": 250,
    "max-width": 600,
    "type": "column"
  },
  "credits": {
    "enabled": false
  },
  "legend": {
    "enabled": true
  },
  "series": [{
    "name": "Male",
    "data": [1000, 0, 2, 2, 1, 5, 2, 11, 17, 24, 40, 42, 41, 52, 26, 25, 25, 30, 37, 36, 35, 23, 17, 29, 17, 36, 30, 29, 32, 4, 29, 31, 22, 29, 23, 23, 28, 41, 30, 32, 0, 32, 23, 22, 20, 34, 23, 25, 32, 21, 23, 20, 11, 6, 12, 62, 18, 17, 15, 12, 7, 7, 10, 17, 7, 9, 4, 6, 4, 2, 1, 0, 2, 1, 2, 0, 0, 1, 0, 1]
  }, {
    "name": "Female",
    "data": [1, 2, 0, 0, 2, 6, 9, 8, 19, 23, 36, 51, 35, 47, 29, 51, 34, 35, 33, 39, 26, 43, 31, 31, 37, 37, 34, 44, 44, 2, 34, 29, 20, 31, 40, 35, 89, 37, 30, 21, 2, 47, 33, 29, 35, 22, 28, 20, 20, 31, 22, 30, 22, 18, 16, 17, 5, 14, 15, 21, 5, 10, 5, 5, 4, 10, 1, 3, 3, 2, 2, 0, 1, 1, 4, 1, 1, 0, 1, 0]
  }, {
    "name": "Unknown",
    "data": [0, 2, 0, 0, 4, 5, 1, 0, 4, 2, 4, 6, 1, 3, 3, 4, 4, 4, 6, 4, 4, 2, 2, 2, 7, 4, 2, 3, 9, 1, 2, 3, 8, 4, 2, 5, 1, 6, 2, 4, 0, 4, 1, 1, 3, 1, 1, 1, 4, 0, 2, 0, 1, 0, 3, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0]
  }],
  "tooltip": {
    "formatter": function() {
      var x = this.series.xAxis.isDatetimeAxis ? Highcharts.dateFormat('%e %b %Y', this.x) :...