JavaScript Real-Time Chart Monitor Blood Pressure

VIEW MORE CHARTS
SAVE
VIEW HTML
EDIT ON CODEPEN
A Real-Time chart is a chart that allows the user to continuously monitor data that changes periodically. To create a real-time chart using KoolChart's JavaScript charting library, the <RealTimeChart> element and the series elements (<Column2DSeries>, <Column3DSeries>, <Line2DSeries>, <Area2DSeries>) for which real-time charts are supported must be set in Layout.

In this JavaScript chart example, a <Line2DSeries> element is set within a <RealTimeChart> element, and KoolRealtimeChart.js (or KoolIntegration.js) is included in the html file. An <HttpServiceRepeater> element must be set in Layout in order to receive data from the server at a certain interval in real-time charts. You can find the php script (process2Data.php) used in this sample by downloading the trial version.
<script language="javascript" type="text/javascript" src="../KoolChart/JS/KoolRealtimeChart.js">
...

<RealTimeChart id="chart" dataDisplayType="time" timePeriod="300" interval="3" showDataTips="true">
...
<series>
<Line2DSeries xField="Time" yField="Data" displayName="Process 1" htmlJsFunction="userFunction" itemRenderer="CircleItemRenderer" >
...
</Line2DSeries>
</series>
...
</RealTimeChart>
<HttpServiceRepeater url="https://www.koolchart.com/realtimeSample/process2Data.php" target="{chart}" interval="2" method="get" />