Highcharts Demo Fake Data

by Steve Cervenak

HTML

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

<div id="container5" style="width:668px"></div>
<div id="container4" style="width:668px"></div>
<div id="container3" style="width:668px"></div>
<div id="container2" style="width:668px"></div>
<div id="container1" style="width:668px"></div>

JavaScript

function getBoxSize(numCategories) {
  var numSeries = 2; // Always will be 2.
  var distance = (0.05 * numSeries);
  var boxsize = [];
  var medium = 0;
  var startNodeval = 0;

  if (numSeries % 2 == 0) {
    var tmph = Math.trunc(numSeries / 2);
    startNodeval = (tmph * distance) * -1;
    console.log(startNodeval);
  } else {
    var tmph = Math.trunc(numSeries / 2) + 1;
    startNodeval = (tmph * distance) * -1;
    console.log(startNodeval);
  }
  if (numSeries > 2) {
    for (var i = 0; i < numSeries; i++) {
      boxsize.push(startNodeval + distance);
      startNodeval = startNodeval + distance;
    }
  } else {
    boxsize.push(0);
    boxsize.push(0.1);
  }
  console.log(boxsize);

  return boxsize;
}

function generateHighchart(containerName, categoryNames, series1Data, series2Data) {
  var boxsizes = [];
  //boxsizes = getBoxSize(series1Data.length);
  boxsizes.push(series1Data.length * 0.0257 * -1);
  boxsizes.push(series1Data.length * 0.0257);

  var gridLineColor = '#acacac';
  var axisTextColor = '#acacac';
  var legendTextColor = 'blue';
  var axisTextSize = '12px';
  Highcharts.chart(containerName, {
    chart: {
      type: 'column',
      height: '338',
      style: {
        fontFamily: "Arial",
        fontSize: "10px"
      }
    },

    plotOptions: {
      series: {
        pointWidth: 31,
        pointPadding: 0,        
        //borderWidth: 2,
        crisp: true
      },
      column: {
        grouping: false,
        borderWidth: 0
      }
    },
    legend: {
      style: {
        fontSize: "5px"
      },
      align: 'left',
      verticalAlign: 'bottom',
      layout: 'horizontal',
      symbolRadius: 0,
      squareSymbol: false,
      symbolWidth: 31,
      itemDistance: 31
    },
    title: {
      text: ''
    },
    credits: {
      enabled: false
    },
    yAxis: {
      title: '',
      gridLineColor: gridLineColor,
      labels: {
        format: '{value:.1f} %',
        style: {
          color: axisTextColor,
    ...