KoolChart is a charting engine which allows you to add more than 30 types of 2D/3D charts to your web pages. It is a pure HTML5/Javascript-based solution and you don’t need to have any plugin installed in your web browser. To create a chart using KoolChart you just need to manage 2 variables (or files), one is for the data and the other is for the layout.
This article will show you how to add a Real-Time chart which has two line series and one column series to your web page using KoolChart. Let’s start with a simple html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>KoolChart for HTML5 - Real-Time Chart</title>
</head>
<body>
<div class="container">
<div class="header">
<p>KoolChart - Premium Real-Time Chart</p>
</div>
<div class="content">
<div id="chartHolder" style="width:800px; height:400px;">
</div>
</div>
</div>
</body>
</html>
Step 1. Prepare an html document to which you want to add a chart. By using the above html document, we are going to add a Real-Time chart into the id=”chartHolder” div.
Step 2. Include KoolChart.js inside the <head> element of your html document. KoolChart.js is a JavaScript library which is the charting engine for KoolChart.
<script language="javascript" type="text/javascript" src="KoolChart.js"></script>
Step 3. Add Javascript statements calling KoolChart-provided Javascript functions inside the <script> element of your HTML document.
var chartVars = "KoolOnLoadCallFunction=chartReadyHandler";
KoolChart.create("chart1", "chartHolder", chartVars, "100%", "100%");
function chartReadyHandler(id) {
document.getElementById(id).setLayout(layoutStr);
}
KoolChart.create() function takes 5 arguments, chart ID, DIV id into which the chart is created, a variable name used by the KoolChart engine. In the above sample, only the function name of the chart ready handler is assigned to the variable. And the last 2 arguments are for the chart’s size, width and height. 100% means that the same size of the chart defined in the id=”chartHolder” div (style="width:800px; height:400px;") is created.
Step 4. Set the layout variable.
var layoutStr =
'<KoolChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="solid">'
+'<Options>'
+'<Caption text="Different Cycle (1)"/>'
+'<SubCaption text="random data" textAlign="right" fontSize="11"/>'
+'<Legend fontSize="11" useVisibleCheck="true"/>'
+'</Options>'
+'<DateFormatter id="dateOrgFmt" FormatString="YYYY/MM/DD HH:NN:SS"/>'
+'<DateFormatter id="dateFmt" formatString="HH:NN:SS"/>'
+'<DateFormatter id="dateFmt2" formatString="HH:NN"/>'
+'<NumberFormatter id="numFmt"/>'
+'<NumberFormatter id="numFmt2" precision="2"/>'
+'<Combination2DChart id="chart" showDataTips="true" dataTipMode="multiple">'
+'<series>'
+'<Line2DSeries id="lineSeries" xField="date" yField="data5" displayName="Data(5 Sec)">'
+'<lineStroke>'
+'<Stroke color="0xFF6666" weight="2" alpha="1"/>'
+'</lineStroke>'
+'<horizontalAxis>'
+'<DateTimeAxis id="hAxis2" displayLocalTime="true" labelUnits="minutes" dataUnits="seconds" interval="1" formatter="{dateOrgFmt}" displayName="Time"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+'<LinearAxis id="vAxis2" minimum="0" maximum="150"/>'
+'</verticalAxis>'
+'</Line2DSeries>'
+'<Line2DSeries id="lineSeries2" xField="date" yField="data3" displayName="Data(3 Sec)" verticalAxis="{vAxis2}" horizontalAxis="{hAxis2}">'
+'<lineStroke>'
+'<Stroke color="0x339966" weight="1" alpha="1"/>'
+'</lineStroke>'
+'</Line2DSeries>'
+'<Column2DSeries id="columnSeries" xField="date" yField="data60" displayName="Cumulative Sum">'
+'<horizontalAxis>'
+'<DateTimeAxis id="hAxis" displayLocalTime="true" labelUnits="hours" dataUnits="minutes" interval="3" dataInterval="10" formatter="{dateOrgFmt}" displayName="Time"/>'
+'</horizontalAxis>'
+'<verticalAxis>'
+'<LinearAxis id="vAxis" minimum="0" maximum="999"/>'
+'</verticalAxis>'
+'<fill>'
+'<SolidColor color="0x6666FF"/>'
+'</fill>'
+'</Column2DSeries>'
+'</series>'
+'<horizontalAxisRenderers>'
+'<Axis2DRenderer axis="{hAxis}" placement="bottom" formatter="{dateFmt2}" tickLength="30"
minorTickLength="0" tickPlacement="inside" showLine="false">'
+'<axisStroke>'
+'<Stroke weight="1" color="0x999999"/>'
+'</axisStroke>'
+'<tickStroke>'
+'<Stroke weight="1" color="0x6666FF" alpha="0.5"/>'
+'</tickStroke>'
+'</Axis2DRenderer>'
+'<Axis2DRenderer axis="{hAxis2}" placement="bottom" formatter="{dateFmt}">'
+'<axisStroke>'
+'<Stroke weight="1" color="0x999999"/>'
+'</axisStroke>'
+'</Axis2DRenderer>'
+'</horizontalAxisRenderers>'
+'<verticalAxisRenderers>'
+'<Axis2DRenderer axis="{vAxis}" placement="right" formatter="{numFmt}"/>'
+'<Axis2DRenderer axis="{vAxis2}" placement="left" formatter="{numFmt}"/>'
+'</verticalAxisRenderers>'
+'</Combination2DChart>'
+'<HttpMultiServiceRepeater baseURL="http://www.koolchart.com/realtimeSample/" targetController="{chart}"
requestTimeout="30">'
+'<RPCList>'
+'<RPCItem name="rpc1" url="data3Interval.php" target="{lineSeries2}" interval="3" concurrency="last"
retryCount="30"/>'
+'<RPCItem name="rpc2" url="data5Interval.php" target="{lineSeries}" interval="5" concurrency="last"
retryCount="30"/>'
+'<RPCItem name="rpc3" url="data23ToCurrent2.php" target="{columnSeries}" interval="600" concurrency="last" retryCount="30"/>'
+'</RPCList>'
+'</HttpMultiServiceRepeater>'
+'</KoolChart>';
KoolChart provides two types of Real-Time charts, Real-Time chart and Real-Time premium chart. The Real-time premium chart is the upgraded version of the Real-Time chart as it has more useful features than the Real-Time chart. This sample chart has been created by using the features of the Real-Time premium chart.
KoolChart provides two types of Real-Time charts, Real-Time chart and Real-Time premium chart. The Real-time premium chart is the upgraded version of the Real-Time chart as it has more useful features than the Real-Time chart. This sample chart has been created by using the features of the Real-Time premium chart.
1. <Options> : To add a caption or a legend to the chart, you need to define <Caption> or <Legend> into <Options>
2. <formatter> : In this sample, 5 formatters are defined, three formatters for the date and two formatters for the number. Those can be used by setting the ID to the value of the formatter attribute.
3. <Combination2DChart> : This sample chart is a combination chart which has two Line2DSeries and one Column2DSeries. Each series should be defined in <Combination2DChart>.
4. <HttpMultiServiceRepeater> : Unlike the Real-Time chart, the definition of the Real-Time premium chart does not start with <RealTimeChart> (This sample layout starts with <Combination2DChart>). You can create the Real-Time premium chart for any type of KoolChart as long as the <HttpMultiServiceRepeater>.
The above sample layout generates a Real-Time premium chart which has two Line2DSeries and one Column2DSeries and their intervals are 3 seconds, 5 seconds and 10 minutes. The RPC request scenario is that the first RPC request is sent after the initial chart loading is finished and then the next RPC request is sent at an interval specified for each series. In this example, two line series have no initial data and the column series has the initial data. It displays data after the initial loading for 10 minutes then it refreshes the chart with the new data based on the interval of each series for the next 10 minutes. The accumulated sum for 10 minutes is displayed as a column.
