Highcharts Demo

author(s): Torstein Hønsi

by Korah Babu Varghese

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id='html2'>

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

JavaScript

var xaxis=["2018-04-01",
"2018-04-02",
"2018-04-03",
"2018-04-04",
"2018-04-05",
"2018-04-06",
 "2018-04-07",
"2018-04-08",
 "2018-04-09",
"2018-04-10",
 "2018-04-11",
 "2018-04-12",
"2018-04-13",
"2018-04-14",
"2018-04-15",
 "2018-04-16",
"2018-04-17",
"2018-04-18",
"2018-04-19",
"2018-04-20",
"2018-04-21",
"2018-04-22",
"2018-04-23",
"2018-04-24",
"2018-04-25",
"2018-04-26",
"2018-04-27",
 "2018-04-28",
"2018-04-29",
"2018-04-30"]
var t=[[],[826135, 59115],
[],
[0],
[3220],
[],
[],
[9952],
[1023841],
[0],
[],
[14700],
[0],
[],
[],
[],
[369, 24720, 44114],
[5494],
[],
[],
[],
[0, 0],
[],
[0, 1869],
[14921],
[75615],
[17614, 41063],
[],
[],
[]];

var hello=[];
 for (var i = 0; i < t.length; i++) {
    for (var j = 0; j < i; j++) {
      var temp = t[i][j] ? t[i][j] : 0;
      t[i][j] = t[j][i] ? t[j][i] : 0;
      t[j][i] = temp ? temp : 0;
      
    }
    hello.push({name:i,data:t[i]});
  }
console.log(t)
document.getElementById('html2').innerHTML=JSON.stringify(hello);

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: xaxis
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Total fruit consumption'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
       enabled:false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: hello
});