Next
Prev
Default

A real-time chart automatically updates itself in continuous with a predefined interval by adding new data to the chart. KoolChart supports the real-time function in the column chart, line chart and area chart.

The <RealTimeChart> element tag is used to create a real-time chart in KoolChart, and the series element tag for the real-time chart is <Column2DSeries>, <Column3DSeries>, <Line2DSeries> and <Area2DSeries>.

The <HttpServiceRepeater> element tag is used to send the URL which is the source of data to the real-time chart in continuous with a predefined interval.

This sample real-time chart has the datetime type axis for the horizontal axis.

...
<RealTimeChart dataDisplayType="time" timePeriod="300" ... >
  ...
  <series>
    <Line2DSeries xField="Time" yField="P1" ... >
      ...
    </Line2DSeries>
    
    <Line2DSeries xField="Time" yField="P2" ... >
      ...
    </Line2DSeries>
  </series>
</RealTimeChart>
  
<HttpServiceRepeater url="http://www.koolchart.com/realtimeSample/process3Data.php" target="{chart}" interval="3" timePeriod="60" method="get" />
...

<RealTimeChart>

dataDisplayType The dataDisplayType attribute determines whether or not to display data based on time ( or number of data ). The valid values are "dataSize", "time", and the default value is "dataSize".
timePeriod The timePeriod attribute is used to set the time period during which data is collected. It is valid only if dataDisplayType="time".

<HttpServiceRepeater>

url The url attribute determines the source of data. In the above sample chart, a PHP file ( process3Data.php ) is specified in the URL, which returns the following XML code:
<items>
  <item>
    <Time>2014/12/24 09:28:08</Time>
    <P1>77</P1>
    <P2>64</P2>
    <P3>18</P3>
  </item>
</items>

The full source code of the PHP file (process3Data.php) is as follows:
<?php
	header("Content-type: text/xml; charset=utf-8");
	
	$p1 = rand(1, 100);
	$p2 = rand(1, 100);
	$p3 = rand(1, 100);

	date_default_timezone_set('US/Eastern');
	$dateFmt = date('Y/m/d H:i:s', time());
	
	echo "<items>\n";
	echo "<item>\n";
	echo "<Time>" . $dateFmt . "</Time>\n";
	echo "<P1>" . $p1 . "</P1>\n";
	echo "<P2>" . $p2 . "</P2>\n";
	echo "<P3>" . $p3 . "</P3>\n";
	echo "</item>\n";
	echo "</items>\n";
?>
target The target attribute is used to set the ID of the real-time chart. e.g. <RealTimeChart id="chart" ... >
interval The interval attribute is used to set the interval of HTTPService. The unit is second, and the default value is "30" ( secs ).

© 2017 KoolChart. All rights reserved.