• Chart Demos
  • Download
  • Integrations
    • Front End Technology Samples
      • React Charts
      • Angular Charts
      • Javascript Charts
      • jQuery Charts
    • Server Side Technology Samples
      • PHP Charts
      • ASP.NET MVC Charts
      • Spring MVC Charts
      • JSP Charts
  • Dashboards
  • License
  • Blog
  • Docs
  • Support Forum
  • My Account
  • My Account
  • OVERVIEW
    • Chart with Zooming and Panning
    • Exporting Chart to Image
    • Chart with Animation
    • Chart with Multiple Axes
    • Chart with Dynamic Data
    • Chart with Logarithmic Axis
    • Chart using JSON Data
    • Performance with 50,000 Data Points
    • Chart with Crosshair
    • Chart inside Re-Sizable Container
    • Charts inside jQuery Tabs
    • Chart inside Popup Modal
    • Responsive jQuery Chart
    • Drilldown Chart
  • LINE CHARTS
    • Line Chart
    • Spline Chart
    • Step Line Chart
  • AREA CHARTS
    • Area Chart
    • Multi Series Area Chart with Date Time
    • Spline Area Chart
    • Multi Series Spline Area
    • Step Area Chart
    • Range Area Chart
    • Range Spline Area Chart
    • Stacked Area Chart
    • Stacked Area 100% Chart
  • COLUMN & BAR CHARTS
    • Column Chart
    • Bar Chart
    • Range Column Chart
    • Stacked Column Chart
    • Stacked Column 100% Chart
    • Range Bar Chart
    • Stacked Bar Chart
    • Stacked Bar 100% Chart
    • Waterfall Chart
  • PIE & FUNNEL CHARTS
    • Pie Chart
    • Pie Chart with Index Labels Placed Inside
    • Doughnut Chart
    • Funnel Chart
    • Funnel Chart with Custom Neck
    • Pyramid Chart
  • FINANCIAL CHARTS
    • Candlestick Chart
    • Candlestick Chart from JSON
    • OHLC Chart
  • SCATTER & BUBBLE CHARTS
    • Scatter Chart
    • Scatter Chart with Custom Markers
    • Bubble Chart
  • BOX & WHISKER CHARTS
    • Box and Whisker Chart
    • Box and Whisker Chart with Outliers
  • COMBINATION CHARTS
    • Error Chart
    • Error Line Chart
    • Combination of Column, Line and Area Chart
  • DYNAMIC CHARTS
    • Dynamic Line Chart
    • Dynamic Column Chart
    • Dynamic Multi Series Chart
  • REACT, ANGULAR, JAVASCRIPT
    • React Charts
    • Angular Charts
    • JavaScript Charts
  • SERVER SIDE TECHNOLOGIES
    • ASP.NET MVC Charts
    • PHP Charts
    • JSP Charts
    • Spring MVC Charts

jQuery Dynamic / Live Multi Series Chart

  • HTML Code Samples
  • PHP Code Samples
  • ASP.NET Code Samples
  • JSP Code Samples
  • Spring MVC Code Samples
  • Dashboard Samples

Dynamic Charts are also supported in Multi Series Chart. You can also combine different types of graph with same axis orientation and make it dynamic. Given example shows Multi Series Line Chart that updates every two seconds. It also contains source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function () {

var dataPoints1 = [];
var dataPoints2 = [];
var dataPoints3 = [];

var options = {
	title: {
		text: "Electricity Generation in Turbine"
	},
	axisX: {
		title: "chart updates every 2 secs"
	},
	axisY: {
		suffix: "Wh",
		includeZero: false
	},
	toolTip: {
		shared: true
	},
	legend: {
		cursor: "pointer",
		verticalAlign: "top",
		fontSize: 22,
		fontColor: "dimGrey",
		itemclick: toggleDataSeries
	},
	data: [{
		type: "line",
		xValueType: "dateTime",
		yValueFormatString: "###.00Wh",
		xValueFormatString: "hh:mm:ss TT",
		showInLegend: true,
		name: "Turbine 1",
		dataPoints: dataPoints1
	},
	{
		type: "line",
		xValueType: "dateTime",
		yValueFormatString: "###.00Wh",
		showInLegend: true,
		name: "Turbine 2",
		dataPoints: dataPoints2
	}, {
		type: "line",
		xValueType: "dateTime",
		yValueFormatString: "###.00Wh",
		showInLegend: true,
		name: "Turbine 2",
		dataPoints: dataPoints3
	}]
};

var chart = $("#chartContainer").CanvasJSChart(options);

function toggleDataSeries(e) {
	if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
		e.dataSeries.visible = false;
	}
	else {
		e.dataSeries.visible = true;
	}
	e.chart.render();
}

var updateInterval = 2000;
// initial value
var yValue1 = 800;
var yValue2 = 810;
var yValue3 = 780;

var time = new Date;
// starting at 10.00 am
time.setHours(10);
time.setMinutes(00);
time.setSeconds(00);
time.setMilliseconds(00);

function updateChart(count) {
	count = count || 1;
	var deltaY1, deltaY2, deltaY3;
	for (var i = 0; i < count; i++) {
		time.setTime(time.getTime() + updateInterval);
		deltaY1 = -1 + Math.random() * (1 + 1);
		deltaY2 = -1 + Math.random() * (1 + 1);
		deltaY3 = -1 + Math.random() * (1 + 1);

		// adding random value and rounding it to two digits. 
		yValue1 = Math.round((yValue1 + deltaY1) * 100) / 100;
		yValue2 = Math.round((yValue2 + deltaY2) * 100) / 100;
		yValue3 = Math.round((yValue3 + deltaY3) * 100) / 100;

		// pushing the new values
		dataPoints1.push({
			x: time.getTime(),
			y: yValue1
		});
		dataPoints2.push({
			x: time.getTime(),
			y: yValue2
		});
		dataPoints3.push({
			x: time.getTime(),
			y: yValue3
		});
	}

	// updating legend text with  updated with y Value 
	options.data[0].legendText = "Turbine 1 : " + yValue1 + "Wh";
	options.data[1].legendText = "Turbine 2 : " + yValue2 + "Wh";
	options.data[2].legendText = "Turbine 3 : " + yValue3 + "Wh";
	$("#chartContainer").CanvasJSChart().render();
}
// generates first set of dataPoints 
updateChart(100);
setInterval(function () { updateChart() }, updateInterval);

}                                

Related Customization

Click event can be attached to legend items using itemclick. It can be used in conjucntion with the visible property to toggle the visibility of a data-series on legend click.Other related customization options are lineColor, lineThickness, markerType, etc.

© fenopix
  • About Us
  • FAQs
  • Careers
  • Privacy Policy
Server Side Technologies
  • ASP.NET MVC Charts
  • PHP Charts
  • JSP Charts
  • Spring MVC Charts
Front End Technologies
  • JavaScript Charts
  • jQuery Charts
  • React Charts
  • Angular Charts
Contact
  • Fenopix, Inc.
  • 340 S Lemon Ave, #8004,
  • Walnut, California 91789
  • United States Of America