...
...
...
...
...
...
...
...
...
...
...
...
...
...
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. Note:
| Note |
|---|
The live chart functionality is applicable for the following 2D chart types only:
|
For instance, if you want to a run live chart as shown in the following screenshot, configure the additional steps in Canvas Studio: 
- Open the chart app (widget) in App Designer.
- Click the Realtime toggle to turn it on as shown in the following screenshot:
...
- Click Proceed. Refer Basic App Configuration - Analytical Charts - 19.1 for more information on app configuration details.
- Click Save icon to save the changes to the application.
- In order to update the live data frequently, pass the following code snippet in your implementation .js (listener) file for the chart:
| Code Block |
|---|
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 |