Highcharts Demo

author(s): Torstein Hønsi

by tin nguyen

HTML

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

<input type="checkbox" name="vehicle" value="Bike">
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

$(function() {

  $('#container').highcharts({
			exporting : {
				allowHTML :  true,
			},
    chart: {
      type: 'heatmap',
      marginTop: 40,
      marginLeft: 300,
      marginRight: 300,
      marginBottom: 80,
      plotBorderWidth: 1
    },


    title: {
      text: 'Sales per employee per weekday'
    },

    xAxis: {
      categories: [' ', ' ', ' '],
      visible:false,
    },

    yAxis: [{
      categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
      title: null,
      visible:false,
      tickLength: 0,
    }, {
      linkedTo: 0,
      tickLength: 100,
      tickWidth: 2,
      opposite: true,
      title: null,
      lineWidth: 2,
      categories: ['a', 'a', 'a', 'a', 'a'],
      labels:{
			useHTML:true,
      	formatter: function() {
        	return '<table><tr><td>ab</td></tr><tr><td>ab</td></tr></table>';
        }
      }
    }, {
      linkedTo: 0,
      tickLength: 100,
      tickWidth: 2,
      opposite: true,
      title: null,
      lineWidth: 2,
      categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    }, {
      linkedTo: 0,
      tickLength: 100,
      tickWidth: 2,
      opposite: true,
      title: null,
      lineWidth: 2,
      categories: ['Smith', 'Jackson', 'Doe', 'Doe', 'Doe'],
    }, {
      linkedTo: 0,
      gridLineWidth: 2,
      tickLength: 100,
      tickWidth: 2,
      opposite: true,
      title: null,
      lineWidth: 2,
      categories: ['10', '20', '40', '59', '23'],
    }],

    colorAxis: {

      min: 0,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
    },

    legend: {
      enabled: false,
      align: 'right',
      layout: 'vertical',
      margin: 0,
      verticalAlign: 'top',
      y: 25,
      symbolHeight: 280
    },

    tooltip: {
      formatter: function() {
        return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
          this.point.value + '</b> items on <br><b>' +...