Highcharts Demo Fake Data

by Steve Cervenak

HTML

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

<div id="container" style="width:668px"></div>

JavaScript

var testPointCount = 3;
var dataCategories = [];
var seriesDataA = [];
var seriesDataB = [];

switch(testPointCount) {
    case 2:
      var dataCategories = ['1 Year', 'Since<br/>Inception'];
      var seriesDataA = [3.8, 2.7];
      var seriesDataB = [5.1, 1.1];
    	break;
    case 3:
      var dataCategories = ['1 Year', '3 Years', 'Since<br/>Inception'];
      var seriesDataA = [3.8, 5.2, 2.7];
      var seriesDataB = [5.1, 3.5, 1.1];
    	break;
    case 4:
      var dataCategories = ['1 Year', '3 Years', '5 Years', 'Since<br/>Inception'];
      var seriesDataA = [3.8, 5.2, 1.4, 2.7];
      var seriesDataB = [5.1, 3.5, 2.1, 1.1];
      break;
    case 5:
      var dataCategories = ['1 Year', '3 Years', '5 Years', '10 Years', 'Since<br/>Inception'];
      var seriesDataA = [3.8, 5.2, 1.4, 2.2, 2.7];
      var seriesDataB = [5.1, 3.5, 2.1, 4.2, 1.1];
    	break;
    default:
        break;
}

var gridLineColor = '#acacac';
var axisTextColor = '#acacac';
var legendTextColor = 'blue';
var axisTextSize = '12px';

var numSeries = 2;
var distance = 0.15;
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;
  }
}
console.log(boxsize);
Highcharts.chart('container', {
    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: {
       ...