highcharts-legend-yaxis

Demo of the 'highcharts-legend-yaxis' plugin

by J. Albert Bowden

HTML

<script src="https://rawgithub.com/milmazz/highcharts-legend-yaxis/master/highcharts-legend-yaxis.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart"></div>

JavaScript

// Some styling options for yAxis
Highcharts.theme = {
  yAxis: {
    gridLineWidth: 1,
    gridLineColor: "rgb(240, 240, 240)",
    minorGridLineColor: 'rgba(255, 255, 255, 0.07)',
    lineColor: "rgb(241, 141, 5)",
    lineWidth: 1,
    tickColor: "rgb(241, 141, 5)",
    tickWidth: 1,
    showEmpty: false,
    labels: {
      style: {
        color: 'rgb(102, 102, 102)',
        fontWeight: 'bold'
      }
    },
    title: {
      style: {
        color: 'rgb(229, 64, 40)',
        font: "bold 12px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif"
      }
    }
  }
};

// Apply the styling options
Highcharts.setOptions(Highcharts.theme);

// Data generator helper
function data(start, end, samples, min, max) {
  var temp = [];
  var range = ~~((end - start) / samples);
  for (var i=1; i < samples; i++) {
    temp.push([start.getTime() + range * i, min +
      Math.random() * (max - min)]);
  }
  return temp;
}

// Create a timer
var now = new Date();
var start = new Date(now - 2592000000 * 13); // 13 months before

var example_data = [{
  name: 'Signal 1',
  data: data(start, now, 50, 0, 100),
  tooltip: {
    valueDecimals: 1,
    valueSuffix: '°C'
  },
    yAxis: 0 // Temperature scale
  }, {
    name: "Signal 2",
    data: data(start, now, 50, 20, 80),
    tooltip: {
      valueDecimals: 1,
      valueSuffix: 'm3/h'
    },
    yAxis: 1 // Fluids scale
  }, {
    name: "Signal 3",
    data: data(start, now, 50, 10, 100),
    tooltip: {
      valueDecimals: 1,
      valueSuffix: 'kg/cm2'
    },
    yAxis: 2 // Pressure scale
  }, {
    name: "Signal 4",
    data: data(start, now, 50, 20, 80),
    tooltip: {
      valueDecimals: 1,
        valueSuffix: 'm3/h' // Fluids scale
      },
      yAxis: 1
    }, {
      name: "Signal 5",
      data: data(start, now, 50, 20, 80),
      tooltip: {
        valueDecimals: 1,
        valueSuffix: 'm3/h'
      },
    yAxis: 1 // Fluids scale
  }];

//////////////////////
// Chart definition...