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 category type axis for the horizontal axis.

...
<RealTimeChart dataDisplayType="dataSize" displayDataSize="15" ... >
  ...
  <series>
    <Area2DSeries yField="P1" ... >
      ...
    </Area2DSeries>
    
    <Area2DSeries yField="P2" ... >
      ...
    </Area2DSeries>
  </series>
</RealTimeChart>
  
<HttpServiceRepeater url="http://www.koolchart.com/realtimeSample/process3Data.php" target="{chart}" interval="3" 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".
displayDataSize The displayDataSize attribute controls the size of data to be displayed in the given interval. It is valid only if dataDisplayType="dataSize".

<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.