Highcharts Demo

author(s): Torstein Hønsi

by Chitkala More

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>


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

JavaScript

$.getJSON('https://www.highcharts.com/samples/data/aapl-c.json', function (data) {

    // Create the chart
    Highcharts.stockChart('container', {
		 exporting: {
        enabled: false,
        menuItems: null
      }, 
      legend: {
        enabled: true
      },
      credits: {
        enabled: true
      },
        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'Glucose level'
        },

        series: [{
            name: 'Date',
            data: data,
            type: 'area',
            threshold: null,
            tooltip: {
                valueDecimals: 2
            },
            fillColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 0,
                    y2: 1
                },
                stops: [
                    [0, Highcharts.getOptions().colors[0]],
                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                ]
            }
        }],
         yAxis: {
         opposite:false,
         gridLineDashStyle: 'longdash',
          min: 0,
          max: 300,
          tickInterval: 100, 
          title: {
            text: 'Glucose (mg/dl)'
          },
          labels: {
            format: '{value}',
          },
        plotLines: [{
                color: 'yellow',
                width: 3,
                value: 100,
                dashStyle:'dash'
            },{
                color: 'green',
                width: 3,
                value: 140,
                 dashStyle:'dash'
            }]
        },
        legend: {
          enabled: true
        },
       
 			navigator: {
        enabled: false
      },
       scrollbar: {
        enabled: true
      },
      rangeSelector:{      
      allButtonsEnabled:true,
      buttons: [{
    type: 'all',
    text: 'All'
},{
    type: 'day',
    count: 2,
    text: '48Hours'
}, {
    type: 'day',
   ...