Discussions
Categories
Groups
Community Home
Categories
INTERNAL ENABLEMENT
POPULAR
PUBLIC CLOUD
PRIVATE CLOUD
Quick Links
MY LINKS
HELPFUL TIPS
Back to website
Home
Intelligence (Analytics)
HTML5 Realtime Charts
Peter W
<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>
Find more posts tagged with
Comments
micajblock
<p>You have two choices.</p>
<ol><li>Have the report refresh itself as described in this DevShare - <a data-ipb='nomediaparse' href='
http://developer.actuate.com/community/forum/index.php?/files/file/725-reusable-library-for-reloading-a-report/'>http://developer.actuate.com/community/forum/index.php?/files/file/725-reusable-library-for-reloading-a-report/</a></li>
;
<li>If your data is a real time data feed you can do something like this old DevShare. however I would not use Flash, I would use HTML5 charts. I know HighCharts suppurts real-time data - <a data-ipb='nomediaparse' href='
http://developer.actuate.com/community/forum/index.php?/files/file/457-simple-real-time-report/'>http://developer.actuate.com/community/forum/index.php?/files/file/457-simple-real-time-report/</a></li>
;
</ol>
Peter W
<p>Mica,</p>
<p> </p>
<p>thanks for your help, I didnt know how to read out the report parameters with serverside js.</p>
<p>Whilst implementing your approach I found out that it is sufficient just to execute a <em>actuate.getViewer("myChartBookmark").submit()</em> on the client side to refresh the chart.</p>
<p>Thereby, I also can avoid to read out the parameters and to pass them through into client side js.</p>
<p> </p>
<p>Attached find a html page that renders two charts of a report into different divs and rerenders them at different intervals.</p>
<p> </p>
<p>Regards, Peter</p>