HTML5 Realtime Charts

Migrateduser

<p>Hi there.<br><br>
I was asked if I can provide a kind of real time chart with BIRT, a live ticker such as for stock exchange<br>
that can be embedded as a reportlet into a web page.<br><br>
My solution is to simply redraw the report every 5 seconds by the embedding web page. I have two div tags in which I render alternately. The new rendering is done into the invisible div tag in order to avoid the busy cursor during the report generation.</p>
<pre class="_prettyXprint _lang-html">
<html lang="en">

<head>
<title>Real Time Test</title>
<script type="text/javascript" language="JavaScript" src="http://....com:8800/birt/jsapi"></script>
</head>

<body onload="init()">

<script>

var this_div="outer1";
var other_div="outer2";

function init(){

actuate.load("viewer");
actuate.initialize("http://...:8800/birt", null, null, null, renderReports);
setInterval(swap_divs ,5000);
}

function renderReports(){
runReport(this_div, 'sinusreport');
runReport(other_div, 'sinusreport')
}

function runReport(div, reportlet){
try
{
var uiOpion = new actuate.viewer.UIOptions();
uiOpion.enableToolBar(false);
var viewer = new actuate.Viewer(div);
viewer.setReportDesign( "Public/Reps/RealtimeData.rptdesign" );
viewer.setReportletBookmark(reportlet);
viewer.setUIOptions(uiOpion);
viewer.submit( );
}
catch( e )
{
alert( e.getErrorMessage( ) );
}
}


function swap_divs (){

// current inactive
document.getElementById(this_div).style["display"]= "none";

// activate other
document.getElementById(other_div).style["display"]= "block";

//refresh this
runReport(this_div, 'sinusreport');

//swap this and other
var td = this_div; this_div=other_div; other_div=td;
}

</script>

<div id="outer1"style="display:block; frameborder:20px; border:thick solid red; width:850px; height:600px">
<h1>Chart Refresh every 5 seconds (red frame active)</h1><br>

</div>
<div id="outer2" style="display:none; frameborder:20px; border:thick solid blue; width:850px; height:600px">
<h1>Chart Refresh every 5 seconds (blue frame active)</h1><br>
</div>
</body>
</html>


</pre>
<p><br>
So far, this works fairly fine. Nonetheless I'd like to know if there are possibilities to trigger the generation of the report from inside the report.<br>
Are there such possibilities? Do they have an advantage? Do you have improvement ideas or anticipate limitations for my solution?<br><br>
(I need mobile device charts, flash charts are not an option.)<br><br>
Regards, Peter</p>