Highcharts Line Chart

Testing highchart's line chart for Wattsmart.

by Jayson Buquia

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="wrapper">

    <div id="chart02">
      <div id="container02" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
      <div class="buttons">
        <!-- append buttons here through js -->
      </div>
    </div>


  </div>

CSS

.btn {
  display: inline-table;
  padding: 10px;
  color: #999;
  border: 1px solid #ddd;
  margin: 0 5px 5px 0;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .btn {
  background: #444;
  color: #eee;
  border: 1px solid gray;
}

JavaScript

$(function() {
  $(document).ready(function() {

    // set an array to be used as initial x axis values
    var xAxisValues = (function () {
      var data = [], i=0;

      var interval = setInterval(function () {
        if ( i < 5 )
        {
          data.push(new Date());
        }
        else
        {
          clearInterval(interval);
        }
      },1000);

      console.log(data);

      return data;

    })();

    var dataSeries = (function () {
                    // generate an array of random data
                    var data = [],
                        time = (new Date()).getTime(),
                        i;

                    for (i = -19; i <= 0; i += 5) {
                        data.push({
                            x: time + i * 1000,
                            y: (i != 0 ? null : Math.random())
                        });
                    }
                    return data;
                }());


    $('#container02').highcharts({
      chart: {
                type: 'spline',
                animation: Highcharts.svg, // don't animate in old IE
                marginRight: 10,
                events: {
                    load: function () {

                        // set up the updating of the chart each second
                        var series = this.series,
                            xAxis = this.xAxis,
                            count = 1;

                        function addPoint(){
                            series.forEach(function (s,i) {
                              var x = (new Date()).getTime(), // current time
                                y = Math.random()*i+1;

                              s.addPoint([x,(y*count)+s.data[s.data.length-1].y],true,true);
                              
                            });
                        };
                        
                        addPoint()
                        
                        console.log(xAxis);

                       ...