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