Highcharts Demo

author(s): Torstein Hønsi

by Korah Babu Varghese

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

var series=[];
   series=[0, 24064, 29742, 29851, 32490, 30282, 38121, 40434,54444,24444,32222,45111];
   series.map(function(item){
   return item+item
   });
   document.write(series);
   
   Highcharts.chart('container', {
      chart: {
          type: 'spline',
          zoomType: 'x',
      },
      title: {
          text: 'Metric(s) Trend for Last 24 Hours'
      },
      credits: {
        enabled: false
      },
      xAxis: {
          categories: ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
      },
      yAxis: {
          title: {
              text: 'metric values'
          },
          plotLines: [{
            color: '#FF0000',
            width: 2,
            value: 40000,
            label: {
              text: 'tt',
              align: 'right',
              x: -10
          }
      }]
      },
      legend:{
        enabled:false
      },
      plotOptions: {
          line: {
              dataLabels: {
                  enabled: true
              },
              enableMouseTracking: false
          }
      },
      series: [{
        type:'line',
        name: 'Installation',
        data: series
    }, {
        name: 'Manufacturing',
         type:'line',
        data: [0,32490, 30282,24064, 29742, 29851, 38121, 40434,14555,25477,12544,32565]
    }]
  },
  function (graph) { 
    graph.redraw();
    if (graph.series.length < 1) { 
      graph.renderer.text('Preview data not available for the selected metric(s)', window.innerWidth/4.5, window.innerHeight/4)
                .css({
                    color: '#333',
                    fontSize: '16px',
                    textAlign: 'center'
                })
                .add();
    }

}
);