Highcharts Demo

author(s): Torstein Hønsi

by Arif Khoja

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

var YAXISTITLE = "Total Incidents";
var SECONDYAXISTITLE = "Clearance Time (min)";
var chartPoweredBy = "Powered by TRANSCOM";
var chartTitle = "Number of Incidenets and Average Time to Clear Lanes by Time of Day";
var ChartTitleTooltip = "Number of Incidenets and Average Time to Clear Lanes by Time of Day";

var xAxiesCategories = ['AM Rush <br/>6:60-9:30 AM', 'Mid Day<br/>9:30AM-3:30PM', 'PM Rush<br/>3:30-6:30PM'];
var chartSeriesArray = [{
  name: 'Total Incidents',
  type: 'column',
  color: 'rgba(165,170,217,1)',
  data: [{y:916,events:2}, {y:1336,events:20}, {y:1051,events:5}],
  pointPadding: 0.3,
  pointPlacement: 0,
   yAxis: 0,
  showInLegend: false,
  dataLabels: {
    enabled: false,
    format: '{y}'
  }
},{
  name: 'Total Incidents',
  type: 'column',
  color: 'rgba(165,170,217,1)',
  data: [566, 1436, 103],
  pointPadding: 0.3,
  pointPlacement: 0,
   yAxis: 0,
  showInLegend: true,
  dataLabels: {
    enabled: false,
    format: '{y}'
  }
}, {
  name: 'Clearance Time (min)',
  type: 'spline',
  color: 'rgba(126,86,134,.9)',
  data: [{y:31,events:85}, {y:1900,events:185}, {y:41,events:285}],
  pointPadding: 0.4,
  pointPlacement: 0,
  showInLegend: false,
  yAxis: 1,
  dataLabels: {
    enabled: false,
    format: '{y} min'
  }
}];

Highcharts.chart('container', {
  chart: {
    //height: 0,
    zoomType: 'x',
    resetZoomButton: {
      position: {
        x: 0,
        y: 40
      }
    }
  },
  title: {
    text: '<span id="highCT" title="' + ChartTitleTooltip + '">' + chartTitle + '</span>',
    style: {
      color: '#274B6D',
      fontWeight: 'normal',
      fontSize: '12px',
      fill: '#274B6D'
    },
    useHTML: true
  },
  xAxis: {
    categories: xAxiesCategories
      //labels: {
      //    rotation: -90,
      //    align: 'right',
      //    overflow: 'justify',
      //    formatter: function () {
      //        return this.value;
      //    }
      //}
  },
  yAxis: [{
    min: 0,
    title: {
      text: YAXISTITLE,
     ...