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 scrollable column chart to your web page using KoolChart in such an easy and quick way. 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 - Column Chart</title>
</head>
<body>
<div class="container">
<div class="header">
<p>KoolChart - Column3D Chart</p>
</div>
<div class="content">
<div id="chartHolder" style="width:600px; 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 chart into the id=”chartHolder” div.
Step 2. Include KoolChart.js and KoolChart.css inside the <head> element of your html document. KoolChart.js is a JavaScript library which is the charting engine for KoolChart and KoolChart.css is a css style file for creating graphic objects in KoolChart such as preloader, scrollbar, etc.
<script language="javascript" type="text/javascript" src="KoolChart.js"></script>
<link rel="stylesheet" type="text/css" href="KoolChart.css"/>
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);
document.getElementById(id).setData(chartData);
}
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:600px; height:400px;") is created.
Step 4. Set the layout variable.
var layoutStr =
'<KoolChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="solid">'
+'<Options>'
+'<Caption text="Scroll 2D Column Chart"/>'
+'</Options>'
+'<Column2DChart showDataTips="true" selectionMode="single" gutterRight="10">'
+'<series>'
+'<Column2DSeries labelPosition="inside" id="cs1" yField="Data1" showLabelVertically="true" displayName="Data1"/>'
+'<Column2DSeries labelPosition="inside" id="cs2" yField="Data2" showLabelVertically="true" displayName="Data2"/>'
+'<Column2DSeries labelPosition="inside" id="cs3" yField="Data3" showLabelVertically="true" displayName="Data3"/>'
+'</series>'
+'<horizontalAxis>'
+'<CategoryLinearAxis id="hAxis" categoryField="City"/>'
+'</horizontalAxis>'
+'<horizontalAxisRenderers>'
+'<ScrollableAxisRenderer axis="{hAxis}" visibleItemSize="7"/>'
+'</horizontalAxisRenderers>'
+'</Column2DChart>'
+'</KoolChart>';
In the above sample, the layout for Multi-Series Column2DChart is set to the value of the layoutStr variable as a string. The variable name (layoutStr) must be same as the name of the parameter of the setLayout() function in the Step 3.
A chart series is the key to showing data in a chart. All data is plotted in a chart as a series and all charts contain at least one series. 3 series are in the above sample as this example chart depict 3 bars in each each.
To make a chart scrollable, set the <ScrollableAxisRenderer> node as a renderer of axes. In this example, the <ScrollableAxisRenderer> node is defined as a child node of <horizontalAxisRenderers> to make the horizontal axis scrollable. The visibleItemSize property in the <ScrollableAxisRenderer> node determines that how many items are shown in the chart.
Step 5. Set the data variable.
var chartData =[{"City":"City A","Data1":1000,"Data2":1200,"Data3":1500},
{"City":"City B","Data1":1400,"Data2":900,"Data3":1000},
{"City":"City C","Data1":1500,"Data2":2000,"Data3":800},
{"City":"City D","Data1":1900,"Data2":1200,"Data3":2000},
{"City":"City E","Data1":1400,"Data2":2000,"Data3":1300},
{"City":"City F","Data1":2000,"Data2":1400,"Data3":1500},
{"City":"City G","Data1":1800,"Data2":2000,"Data3":500},
{"City":"City H","Data1":2500,"Data2":1000,"Data3":900},
{"City":"City I","Data1":3000,"Data2":1000,"Data3":1000},
{"City":"City J","Data1":2000,"Data2":1400,"Data3":1600},
{"City":"City K","Data1":2100,"Data2":1400,"Data3":2000},
{"City":"City L","Data1":1700,"Data2":1500,"Data3":1400},
{"City":"City M","Data1":1000,"Data2":1000,"Data3":1000},
{"City":"City N","Data1":1400,"Data2":1700,"Data3":2000},
{"City":"City O","Data1":1500,"Data2":2000,"Data3":1700},
{"City":"City P","Data1":1900,"Data2":2000,"Data3":1000},
{"City":"City Q","Data1":1400,"Data2":1900,"Data3":1400},
{"City":"City R","Data1":2000,"Data2":2000,"Data3":1500},
{"City":"City S","Data1":1800,"Data2":1400,"Data3":1000},
{"City":"City T","Data1":2500,"Data2":1700,"Data3":1900},
{"City":"City U","Data1":3000,"Data2":1700,"Data3":1500},
{"City":"City V","Data1":2000,"Data2":1500,"Data3":1800},
{"City":"City W","Data1":2100,"Data2":1400,"Data3":1800},
{"City":"City X","Data1":1700,"Data2":1500,"Data3":2000}];
In the above sample, an array-typed variable is set to the value of the chartData variable. The variable name (chartData) must be same as the name of the parameter of the setData() function in the Step 3. Each element of the array has the values for the horizontal and vertical axes and which value is used in the vertical axis or horizontal axis is determined by the layout which is defined in the Step 4. In this sample, the "City" field is used in the horizontal axis as it is set to the value of the categoryField property of the CategoryLinearAxis node which is defined as a child node of the horizontalAxis node in the Step 4.
And the the values of the Data1, Data2, Data3 fields are used to determine the height of the column for each series as they are set to the value of the yField property of each Column2DSeries node which is defined as a child node of the series node.
The complete HTML is as follows:
<!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 - Column Chart</title>
<script language="javascript" type="text/javascript" src="KoolChart.js"></script>
<link rel="stylesheet" type="text/css" href="KoolChart.css"/>
<script type="text/javascript">
var chartVars = "KoolOnLoadCallFunction=chartReadyHandler";
KoolChart.create("chart1", "chartHolder", chartVars, "100%", "100%");
function chartReadyHandler(id) {
document.getElementById(id).setLayout(layoutStr);
document.getElementById(id).setData(chartData);
}
var layoutStr =
'<KoolChart backgroundColor="0xFFFFFF" cornerRadius="12" borderStyle="solid">'
+'<Options>'
+'<Caption text="Scroll 2D Column Chart"/>'
+'</Options>'
+'<Column2DChart showDataTips="true" selectionMode="single" gutterRight="10">'
+'<series>'
+'<Column2DSeries labelPosition="inside" id="cs1" yField="Data1" showLabelVertically="true" displayName="Data1"/>'
+'<Column2DSeries labelPosition="inside" id="cs2" yField="Data2" showLabelVertically="true" displayName="Data2"/>'
+'<Column2DSeries labelPosition="inside" id="cs3" yField="Data3" showLabelVertically="true" displayName="Data3"/>'
+'</series>'
+'<horizontalAxis>'
+'<CategoryLinearAxis id="hAxis" categoryField="City"/>'
+'</horizontalAxis>'
+'<horizontalAxisRenderers>'
+'<ScrollableAxisRenderer axis="{hAxis}" visibleItemSize="7"/>'
+'</horizontalAxisRenderers>'
+'</Column2DChart>'
+'</KoolChart>';
var chartData =
[{"City":"City A","Data1":1000,"Data2":1200,"Data3":1500},
{"City":"City B","Data1":1400,"Data2":900,"Data3":1000},
{"City":"City C","Data1":1500,"Data2":2000,"Data3":800},
{"City":"City D","Data1":1900,"Data2":1200,"Data3":2000},
{"City":"City E","Data1":1400,"Data2":2000,"Data3":1300},
{"City":"City F","Data1":2000,"Data2":1400,"Data3":1500},
{"City":"City G","Data1":1800,"Data2":2000,"Data3":500},
{"City":"City H","Data1":2500,"Data2":1000,"Data3":900},
{"City":"City I","Data1":3000,"Data2":1000,"Data3":1000},
{"City":"City J","Data1":2000,"Data2":1400,"Data3":1600},
{"City":"City K","Data1":2100,"Data2":1400,"Data3":2000},
{"City":"City L","Data1":1700,"Data2":1500,"Data3":1400},
{"City":"City M","Data1":1000,"Data2":1000,"Data3":1000},
{"City":"City N","Data1":1400,"Data2":1700,"Data3":2000},
{"City":"City O","Data1":1500,"Data2":2000,"Data3":1700},
{"City":"City P","Data1":1900,"Data2":2000,"Data3":1000},
{"City":"City Q","Data1":1400,"Data2":1900,"Data3":1400},
{"City":"City R","Data1":2000,"Data2":2000,"Data3":1500},
{"City":"City S","Data1":1800,"Data2":1400,"Data3":1000},
{"City":"City T","Data1":2500,"Data2":1700,"Data3":1900},
{"City":"City U","Data1":3000,"Data2":1700,"Data3":1500},
{"City":"City V","Data1":2000,"Data2":1500,"Data3":1800},
{"City":"City W","Data1":2100,"Data2":1400,"Data3":1800},
{"City":"City X","Data1":1700,"Data2":1500,"Data3":2000}];
</script>
</head>
<body>
<div class="container">
<div class="header">
<p>KoolChart - Scroll Column2D MultiSeries</p>
</div>
<div class="content">
<div id="chartHolder" style="width:600px; height:400px;">
</div>
</div>
</div>
</body>
</html>
