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>
<div class="click-mgo click-button">
<table class="table">
<tr>
<th>Date</th>
<th>Price</th>
<th>Volume</th>
</tr>
<tr>
<td>25-Sep-2017</td>
<td>100</td>
<td>10,000</td>
</tr>
</table>
</div>

<div class="click-rmg-380 click-button">
<table class="table">
<tr>
<th>Date</th>
<th>Price</th>
<th>Volume</th>
</tr>
<tr>
<td>24-Sep-2017</td>
<td>100</td>
<td>10,000</td>
</tr>
</table>
</div>
<div class="click-rgm-500 click-button">
<table class="table">
<tr>
<th>Date</th>
<th>Price</th>
<th>Volume</th>
</tr>
<tr>
<td>23-Sep-2017</td>
<td>100</td>
<td>10,000</td>
</tr>
</table>
</div>

CSS

body {
  font-family: arial;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table tr th,
.table tr td {
  border: 1px solid #ccc;
  padding: 10px;
  text-align: left;
}
.click-button {
  display: none;
}

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: {
      series: {
        events: {
          legendItemClick: function(event) {
            var thisSeries = this,
              chart = this.chart;

            if (this.visible === true) {
              this.hide();
            } else {
              this.show();
              chart.series.forEach(function(el, inx) {
                if (el !== thisSeries) {
                  el.hide();
                }
              });
            }
            event.preventDefault();
          }
        }
      },
      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') {
   ...