Highcharts Demo

author(s): Torstein Hønsi

by Raul Corona Xolaltenco

HTML

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

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Add point</button>

JavaScript

$(function () {

var str = jQuery.parseJSON("[{\"name\":\"TRX\",\"type\":\"area\",\"color\":\"#E6CBDD\",\"pointInterval\":60000,\"pointStart\":0,\"showInLegend\":true,\"data\":[[1,20.0],[1,9.0],[1,19.0]],\"yAxis\":0},{\"name\":\"MNT\",\"type\":\"area\",\"color\":\"#97BBCD\",\"pointInterval\":60000,\"pointStart\":0,\"showInLegend\":true,\"data\":[[1,25],[1,48],[1,16]],\"yAxis\":1},{\"name\":\"TRX_ALTERNO\",\"type\":\"area\",\"color\":\"#f6290c\",\"fillColor\":{\"linearGradient\":{\"x1\":0,\"y1\":0,\"x2\":0,\"y2\":1},\"stops\":[[0,\"rgb(241, 111,92)\"],[1,\"rgb(246,41,12)\"]]},\"pointInterval\":60000,\"pointStart\":0,\"showInLegend\":true,\"data\":[[1,2.0],[1,2.0],[1,1.0]],\"yAxis\":0},{\"name\":\"MNT_ALTERNO\",\"type\":\"area\",\"color\":\"#f6290c\",\"fillColor\":{\"linearGradient\":{\"x1\":0,\"y1\":0,\"x2\":0,\"y2\":1},\"stops\":[[0,\"rgb(241, 111,92)\"],[1,\"rgb(246,41,12)\"]]},\"pointInterval\":60000,\"pointStart\":0,\"showInLegend\":true,\"data\":[[1,11.0],[1,11.0],[1,55.0]],\"yAxis\":1}]");


    $('#container').highcharts({
        chart: {
            type: 'area'
        },yAxis : [ {
				labels : {
					style : {
						fontSize : '11px',
						color : '#FFFF00',
						fontFamily : 'Gill Sans'
					},
					enabled : true,
					formatter : function() {
						if (this.value >= 1000) {
							if (this.value < 1000000) {
								return this.value / 1000 + 'k';
							} else if (this.value >= 1000000) {
								return this.value / 1000000 + 'M';
							}
						} else {
							return this.value
						}
					}
				},
				plotLines : [ {
					width : 1,
					color : '#FFFF00'
				} ],
				height : 50,
				top : 5,
				min : 0,
				offset : 0,
				showFirstLabel : false,
				gridLineColor : ''
			}, {

				height : 50,
				top : 67,
				offset : 0,
				lineWidth : 0,
				min : 0,
				showFirstLabel : false,
				labels : {
					style : {
						fontSize : '12px',
						color : '#05E8FA',
						fontFamily : 'Gill Sans'
					},
					enabled : true,
					formatter :...