Highcharts Demo

author(s): Torstein Hønsi

by ewolden

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

function dateParse(number) {
		let str = number.toString()
    let y = str.substr(0,4),
        m = str.substr(4,2) - 1,
        d = str.substr(6,2);
    return new Date(y,m,d).getTime();
}

var json = {"value": [
        {
        "Year": 2018,
        "TimePeriodInYear": 20180430,
        "AnalysisData":2300,
        "StartDate": 20180430,
        "EndDate": 20180430
        },
        {
        "Year": 2018,
        "TimePeriodInYear": 20180501,
        "AnalysisData":2705,
        "StartDate": 20180501,
        "EndDate": 20180501
        }]}

Highcharts.chart('container', {
     chart: {
      zoomType: 'x',
      spacingBottom: 30,
      spacingTop: 10,
      height: 200
    },
    time: {
    	useUTC: false  //Using local user timezone (instead of UTC)
    },
    title: {
      text: null,
      align: 'left',
      margin: 0
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    xAxis: {
      type: 'datetime', 
      tickInterval: 3600*24*1000, //tickinterval = 24 hours
      crosshair: true,
      labels: {
        rotation: 0
      }
    },
    yAxis: {
    min:0,
    title: {
        text: null
    }
    },
    plotOptions: {
      series: {
          marker: {
              enabled: false
          }
      },
      column: {
        stacking: 'normal'
      }
    },
    tooltip:{
    shared: true
    },
    series: [{
    	type: 'column',
    	name: 'example',
      data: [{x: dateParse(json.value[0].TimePeriodInYear), y: json.value[0].AnalysisData},
      			 {x: dateParse(json.value[1].TimePeriodInYear), y: json.value[1].AnalysisData}]
    }]
});