Highcharts Demo

author(s): Torstein Hønsi

by Ying Chor Ding

HTML

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
         Highcharts.setOptions({
           //colors: ['#3ca1cc', '#055f7d']
         });

         $('#container').highcharts({
           chart: {
             type: 'line'
           },
           title: {
             text: 'Latest Historical Price'
           },
           subtitle: {
             text: ''
           },
           xAxis: {
             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
           },
           yAxis: {
             title: {
               text: ''
             }
           },
           tooltip: {
             crosshairs: true,
             shared: true
           },
           plotOptions: {
             spline: {
               marker: {
                 radius: 4,
                 lineColor: '#666666',
                 lineWidth: 1
               }
             }
           },
           series: [{
             animation: {
               duration: 7000
             },
             name: 'MGO',
             marker: {
               symbol: 'square'
             },
             data: [0, 6.9, 9.5, 15.5, 19.2, 21.5, 28.2, 2.5, 23, 18.3, 13.9, 15]
               //data: []
           }, {
             animation: {
               duration: 2000
             },
             name: 'RMG380',
             visible: false,
             marker: {
               symbol: 'circle'
             },
             data: [6.0, 7.9, 9.5, 16.5, 20.2, 21.5, 29.2, 3.5, 28, 18.3, 13.9, 20]
               //data: []
           }, {
             animation: {
               duration: 2000
             },
             name: 'RMG500',
             visible: false,
             marker: {
               symbol: 'diamond'
             },
             data: [7.0, 8.9, 9.5, 17.5, 21.2, 21.5, 30.2, 4.5, 30, 18.3, 13.9, 25]
               //data: []
           }]
         });



         var chart = $('#historical-price').highcharts();
         if (data.empty == 'true') {
           alert('empty');
...