Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

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

<div id="container"></div>
 
 <div id="dataset" data-dataset="[[25660800000, 0],
 [26697600000, 0.25],
 [27907200000, 1.41],
 [28339200000, 1.64],
 [31795200000, 1.6]]"></div>

CSS

#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}

JavaScript

const app_control = (function() {
  var sdata;
  var init_charts;

  /*
  VARIABLES INITIALIZATIONS
  */

  /*
  DEFINE THE FUNCTIONS
  */


  /*
  Initialize Functions
  */
  init_charts = function(sdata) {
    const chart = Highcharts.chart('container', {
      chart: {
        type: 'spline'
      },
      title: {
        text: 'Example Data from '
      },
      xAxis: {
        type: "datetime",
        title: {
          text: 'Date'
        }
      },
      yAxis: {
        title: {
          text: 'Data in Y Axis'
        }
      },
      colors: ['#06C'],
      series: [{
        name: 'Visualized Data',
        data: sdata
      }]
    })
  }

  /*
  PUBLIC INTERFACE
  */
  public_interface = {};

  /*
  RUN THE FUNCTIONS
  */
  $(function() {
    sdata = $('#dataset').data('dataset');
    init_charts(sdata);
  });
  return public_interface;
}());