Highcharts Demo

author(s): Torstein Hønsi

by aaewong

HTML

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

<div id="container" style="height: 300px"></div>
<button id="clear">Clear All Reference Lines</button><button id="add">Add New Reference Line</button><button id="addDyn">Add Dynamic Reference Line (Average)</button>
<div id="label"></div>

JavaScript

$(function () {
	var plotLineConstructor = function(value) {
      return {
          color: 'red',
          width: 2,
          value: value,
          events: {
              click: function () {
                  this.chartOptions.yAxis.plotLines[0].value = prompt("EDIT: Enter a new value:");
                  reloadViz(this.chartOptions);
              }.bind(this),
              mouseover: function () {
                  $('#label').html(this.chartOptions.yAxis.plotLines[0].value);
              }.bind(this),
              mouseout: function () {
                  $('#label').empty();
              }
          }
      }
    }.bind(this);
    
    this.chartOptions = {
        chart: {
          type: 'line',
          renderTo: 'container'
        },
        title: {
          text: 'Reference Lines Test'  
        },
        xAxis: {
          plotLines: []  
        },
        yAxis: {
            plotLines: []
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }],
        
        tooltip: {
    		crosshairs: [true,false]
		},
    };
    
    this.chart = new Highcharts.Chart(this.chartOptions);
    
    var reloadViz = function(chartOptions) {
    	this.chart = new Highcharts.Chart(chartOptions);
    };
    
    $('#clear').click(function() {
        this.chartOptions.yAxis.plotLines = [];
        this.chartOptions.xAxis.plotLines = [];
        reloadViz(this.chartOptions);
    }.bind(this));
    
    $('#add').click(function() {
        var axis = prompt("ADD: Pick Axis (x or y)");
        var plotLine = plotLineConstructor(prompt("ADD: Enter a new value:"));
        axis === 'x' ? this.chartOptions.xAxis.plotLines.push(plotLine) : 
        	this.chartOptions.yAxis.plotLines.push(plotLine);
        reloadViz(this.chartOptions);
    }.bind(this));
    
    $('#addDyn').click(function() {
        var n = 1;
        var average =...