Implementing Live Chart

Canvas now enables you to produce live charts (real-time charts) at runtime in the application. These charts get updated automatically as your data changes in the real time without requiring any manual page refreshes.

For instance, if you want to a run live chart as shown in the following screenshot, configure the additional steps in Canvas Studio:

1. Open the chart app (widget) in App Designer.
   
   
2. Click the Realtime toggle to turn it on as shown in the following screenshot:
   
   
3. Click Proceed. Refer Basic App Configuration - Analytical Charts for more information on app configuration details.
   
   
4. Click Save icon to save the changes to the application.
   
   
5. In order to update the live data frequently, pass the following code snippet in your implementation .js (listener) file for the chart:

var wgt = ct.widgets.getWidget('MS_LINE'); 

//Sample data
data = [
		{YEARS:"2008",REVENUE:"15000",PROFITS:"9000"},
		{YEARS:"2009",REVENUE:"17000",PROFITS:"5000"},
		{YEARS:"2010",REVENUE:"19000",PROFITS:"7000"},
		{YEARS:"2011",REVENUE:"14000",PROFITS:"5000"},
		{YEARS:"2012",REVENUE:"18000",PROFITS:"7000"}];

//setInterval() impels to provide the data frequently
var myVar = setInterval(function()
{
	constranData = data[Math.floor(Math.random() * data.length)]; 
	
	// wgt indicates in which widget the realtime should be set
	wgt.feedRealTimeData(constranData);
}, 2000);
// 2000 indicates the refresh interval in milliseconds