Forecast chart

by amrutaJgtp

HTML

<script src="http://code.highcharts.com/stock/6.1.1/highstock.js"></script>
<script src="http://code.highcharts.com/6.1.1/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function() {

  window.chart = new Highcharts.Chart({

    chart: {
      renderTo: 'container'
    },

    title: {
      text: 'Temperature variation by month'
    },

    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    yAxis: {
      title: {
        text: 'Temperature ( °C )'
      }
    },

    series: [{
      name: 'Confidence interval',
      data: [
        [null, null],
        [null, null],
        [null, null],
        [null, null],
        [null, null],
        [null, null],
        [null, null],
        [null, null],
        [4.4, 8.0],
        [-3.1, 11.4],
        [-5.2, 13.5],
        [-8.1, 9.8]
      ],
      type: 'arearange'
    }, {
      name: 'Temperatures',
      data: [-2, 1, 0, -1, 5, 4, -3, 3, 6, null, null, null],
      type: 'line'
    }, {
      name: 'Forecasted temperatures',
      data: [null, null, null, null, null, null, null, null, 6, 7.5, 11, 4.8],
      type: 'line',
      marker: {
        radius: 0
      }
    }]

  });

});