Highcharts is a charting library written in pure HTML5/JavaScript, offering intuitive, interactive charts to your website or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.
Recently I have to add another Y-Axis to Dynamic Spline Chart. With below simple script you can add 2nd y-axis very easily.
The Dynamic Spline HighChart Example with Multiple Y Axis is a data visualization tool that displays multiple time series data on a single chart with multiple y-axis. It allows users to plot different data sets with different scales, which is useful for comparing variables that have different units or magnitudes.
The chart updates in real-time as new data is added, and the data can be loaded from a variety of sources including CSV files or streaming data feeds.
The chart includes features such as zooming and panning, tooltips with detailed information on data points, and a legend that allows users to toggle visibility of individual data series.
The chart is implemented using the Highcharts JavaScript library, which provides a rich set of features for creating interactive charts and graphs. It is often used in financial applications to display stock prices and other time-series data.
Complete Example:
<!DOCTYPE html>
<HTML lang="en">
<HEAD>
<meta charset="UTF-8">
<TITLE>Crunchify - Dynamic Spline HighChart Example with Multiple Y Axis</TITLE>
<meta name="description" content="Crunchify - Dynamic Spline HighChart Example with Multiple Y Axis.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<style type="text/css">
body {
background-image:
url('https://crunchify.com/bg.png');
}
p {
width: 70%;
}
</style>
<script>
$(function() {
$(document)
.ready(
function() {
Highcharts.setOptions({
global : {
useUTC : false
}
});
var chart;
$('#container')
.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[0];
var series2 = this.series[1];
setInterval(
function() {
var x = (new Date())
.getTime(), // current time
y = Math.floor((Math.random() * 100) + 1);
z = Math.floor((Math.random() * 30) + 1);
series
.addPoint(
[
x,
y ],
false,
true);
series2
.addPoint(
[
x,
z ],
true,
true);
}, 1000);
}
}
},
title : {
text : 'Live random data - Two diff. Y Axis values - Crunchify Tutorial'
},
xAxis : {
type : 'datetime',
tickPixelInterval : 150
},
yAxis : [ {
title : {
text : 'yAxis-1'
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
}, {
title : {
text : 'yAxis-2'
},
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
} ],
tooltip : {
formatter : function() {
return '<b>'
+ this.series.name
+ '</b><br/>'
+ Highcharts
.dateFormat(
'%Y-%m-%d %H:%M:%S',
this.x)
+ '<br/>'
+ Highcharts
.numberFormat(
this.y,
2);
}
},
legend : {
enabled : false
},
exporting : {
enabled : false
},
series : [
{
name : 'Random data - yAxis-1',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -19; i <= 0; i++) {
data
.push({
x : time
+ i
* 1000,
y : Math.floor((Math.random() * 100) + 1)
});
}
return data;
})()
},
{
name : 'Random data - yAxis-2',
data : (function() {
// generate an array of random data
var data = [], time = (new Date())
.getTime(), i;
for (i = -19; i <= 0; i++) {
data
.push({
x : time
+ i
* 1000,
y : Math.floor((Math.random() * 30) + 1)
});
}
return data;
})()
} ]
});
});
});
</script>
</HEAD>
<BODY>
<div id="container"
style="min-width: 728px; height: 400px; margin: 0 auto"></div>
<br>
<div align="center">
<h1>Part of Crunchify Tutorial Series...</h1>
<div
style="font-family: verdana; padding: 10px; border-radius: 10px; border: 3px solid #EE872A; width: 50%; font-size: 12px;">
Simple Spline HighChart Example by <a href='https://crunchify.com'>Crunchify</a>.
Click <a
href='https://crunchify.com/category/java-tutorials/'>here</a>
for all Java, Spring MVC, Web Development examples.<br>
</div>
</div>
</BODY>
</HTML>
Another must read: JavaScript to Validate Email & Password Fields on Form Submit Event
Below is a sample HTML code:
<HTML> <HEAD> <TITLE>Crunchify - Dynamic Spline HighChart Example with Multiple Y Axis</TITLE> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script> .....above script goes here.... </script> </HEAD> <BODY> <div id="container" style="min-width: 728px; height: 400px; margin: 0 auto"></div> </BODY> </HTML>