Dual Y Axis Chart using highcharts.

dual-y-axes-chart.markdown

Dual Y Axis Chart using highcharts.

A Pen by Pradeep G on CodePen.

License.

index.html

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

script.js

var PageConfig = {
  statistics: {
  	  aggregate: {bookings: 9, bookings_rev: 2495.0, net_stays: 9, net_stays_rev: 2495.0},
    daily: {
      "2015-01-28": {bookings: 2, bookings_rev: 448.0, net_stays: 4, net_stays_rev: 0},
      "2015-01-30": {bookings: 1, bookings_rev: 169.0, net_stays: 3, net_stays_rev: 0},
      "2015-02-02": {bookings: 2, bookings_rev: 726.0, net_stays: 5, net_stays_rev: 0},
      "2015-02-04": {bookings: 4, bookings_rev: 1152.0, net_stays: 8, net_stays_rev: 0},
      "2015-02-05": {bookings: 2, bookings_rev: 0, net_stays: 1, net_stays_rev: 538.0},
      "2015-02-09": {bookings: 0, bookings_rev: 0, net_stays: 1, net_stays_rev: 189.0},
      "2015-02-13": {bookings: 0, bookings_rev: 0, net_stays: 1, net_stays_rev: 199.0},
      "2015-02-24": {bookings: 0, bookings_rev: 0, net_stays: 1, net_stays_rev: 188.0},
      "2015-03-01": {bookings: 0, bookings_rev: 0, net_stays: 2, net_stays_rev: 448.0},
      "2015-03-10": {bookings: 0, bookings_rev: 0, net_stays: 1, net_stays_rev: 169.0},
      "2015-03-16": {bookings: 0, bookings_rev: 0, net_stays: 2, net_stays_rev: 764.0}
    }
  },
  keys: [
    {name: 'Bookings', value: 'bookings'},
    {name: 'Bookings Revenue', value: 'bookings_rev'}
  ]
};

statsChart(PageConfig.statistics.daily,PageConfig.keys,'#container');

function statsChart (rawData, keys,container) {
  var config = {
    title: { y0: {color: '#FFC800'}, y1: {color: '#00BFF2'}},
    series: [
      { type: 'column', data: [], color: '#FFC800'},
      { type: 'spline', yAxis: 1, data: [], tooltip: {valuePrefix: '$'}, color: '#00BFF2'}
    ], 
    categories: [],
    backgroundColor: '#fff'
  };  
  
  // Setting Labels
  config.title.y1.name = config.series[1].name = keys[1].name;
  config.title.y0.name = config.series[0].name = keys[0].name;
  
  // Format the raw data to highcharts compatible
  for(i = 0; i < Object.keys(rawData).length; i++ ) {
    var date = Object.keys(rawData)[i];
    var parsedDate = (new Date(date)).toString().split(' ');
    config.categories.push(parsedDate[1] + ', ' + parsedDate[2]);
    config.series[0].data.push(rawData[date][keys[0].value]);
    config.series[1].data.push(rawData[date][keys[1].value]);
  }
  
  // Plot the graph
  plotDualAxesGraph(config,container);
};

// Plots a graph
function plotDualAxesGraph(data,container) {
  $(container).highcharts({
    chart: {},
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    xAxis: [{
      categories: data.categories
    }],
    yAxis: [{ // Primary yAxis
      labels: {
        format: '${value}',
        style: {
          color: data.title.y0.color
        }
      },
      title: {
        text: data.title.y0.name,
        style: {
          color: data.title.y0.color
        }
      },
      min: 0
    }, { // Secondary yAxis
      title: {
        text: data.title.y1.name,
        style: {
          color: data.title.y1.color
        }
      },
      labels: {
        format: '{value}',
        style: {
          color: data.title.y1.color
        }
      },
      min: 0,
      opposite: true
    }],
    tooltip: {
      shared: true
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      x: 80,
      verticalAlign: 'top',
      y: 50,
      floating: true,
      backgroundColor: data.backgroundColor
    },
    series: data.series
  });
};