Highcharts Demo

author(s): Torstein Hønsi

by Ramkumar Pillai

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div style="height: 400px; width:100%;">
<div id="container" style="height: 50%;"></div>
<div id="container2" style="height: 50%;"></div>
</div>

JavaScript

$(function () {
				var chart1 = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						type: 'spline',
						zoomType: 'xy'
					},
					yAxis: {
						min: 0,
						title: {
							enabled: true,
							text: 'Uplink/Span(%)' 
						},
					},
					xAxis: {
						categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
						lineWidth: 0,
						minorGridLineWidth: 0,
						lineColor: 'transparent',
						labels: {enabled: false},
						minorTickLength: 0,
						tickLength: 0
					},
					series: [{
						id: 'ErrorsOne',
						//color:'red',
						data: [15, 23, 4, 70, 21],
					},{
						id: 'ErrorsTwo',
						//color:'blue',
						data: [31,14, 42, 12, 5],
					},{
						id: 'ErrorsThree',
						//color:'blue',
						data: [51,24, 12, 32, 19],
					}],
					legend: {
						enabled: false  
					},
					credits: {
						enabled: false
					},
				});
				var chart = new Highcharts.Chart({
					
					chart: {
						marginTop: 34,
						renderTo: 'container2',
						type: 'spline',
						zoomType: 'xy',
						
					},
					title: {
						text: null
					},
					yAxis: {
						reversed: true,
						reversed: true,
						startOnTick: false,
						endOnTick: false,	
						min: 100,
						title: {
							enabled: true,
							text: 'Downlink/Span(%)' 
						},
					},
					xAxis: {
						categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
					},
					series: [{
						name: 'Errors One',
						//color: 'red',
						data: [222,234, 123, 189, 289],       
					}, {
						name: 'Errors Two',
						//color:'blue',
						data: [300, 245, 142, 245, 166],            
					},{
						name: 'Errors Three',
						//color:'blue',
						data: [1540, 1145, 2232, 3445, 4030],            
					}],
					credits: {
						enabled: false
					},
					plotOptions: {
						series: {
							events: {
								legendItemClick: function(event) {
									name = this.name.replace(' ', '');
									if(chart1.get(name)){
										this.visible ?...