My Daily chart: 2013

2013년 3월 11일 월요일

Creating a scrollable HTML5 Chart

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>

2013년 2월 27일 수요일

Creating a Realtime HTML5 chart

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.

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.

The above layout can be broken down into four parts, <options>, 5 <formatter>s, <Combination2DChart> and <HttpMultiServiceRepeater>.

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.

Creating a Circular gauge Javascript Chart

This article will show you how to add a circular gauge 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 - Circular Gauge</title>
</head>
<body>
<div class="container">
<div class="header">
<p>KoolChart – Circular Gauge</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 gauge. By using the above html document, we are going to add a circular gauge 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.

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);
}

The KoolChart.create() function takes 5 arguments which are chart id("chart1"), DIV id("chartHolder"), a variable name("chartVars") and the size of the chart(width and height). "chart id" is the DIV id of the chart and the DIV is created and used internally by the KoolChart engine. The second argument is the DIV id into which the gauge is created and the third argument is the variable name which has the values 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 two 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 frameColor="0xEEEEEE" cornerRadius="12" borderStyle="solid">'
+'<Options>'
+'<Caption text="Circular Gauge - Orange"/>'
+'<SubCaption text="The gauge, color and gradient can be changed." textAlign="right" paddingRight="10" fontSize="12"/>'
+'</Options>'
+'<NumberFormatter id="numFmt" precision="0"/>'
+'<CircularGauge width="300" height="300" startAngle="0" minimumAngle="20" maximumAngle="340" minimum="0" maximum="500" value="200" interval="50" minorInterval="10" formatter="{numFmt}" tickLabelStyleName="tickText" valueLabelStyleName="valueText" dataTipJsFunction="dataTipFunction" editMode="true" liveDragging="true" tickGap="50" labelGap="20" showDataTip="false" tickLabelPlacement="outside" tickColor="0x1B699A" enableFilter="false" needleCoverRadius="30" needleThickness="40" pointThickness="10" needleLengthRatio="0.6" needlePointStyle="rounding" isValueTop="true" animationDuration="1000" bounceAnimating="true">'
+'<frameStroke>'
+'<Stroke color="0xFF699A" weight="4"/>'
+'</frameStroke>'
+'<frameFill>'
+'<SolidColor color="0xdf8c2b"/>'
+'</frameFill>'
+'<needleFill>'
+'<LinearGradient angle="90">'
+'<entries>'
+'<GradientEntry color="0xFFFFFF" ratio="0" alpha="1"/>'
+'<GradientEntry color="0xdf8c2b" ratio="0.8" alpha="1"/>'
+'<GradientEntry color="0xFF6600" ratio="1" alpha="1"/>'
+'</entries>'
+'</LinearGradient>'
+'</needleFill>'
+'<needleCoverFill>'
+'<SolidColor color="0xFF8800"/>'
+'</needleCoverFill>'
+'</CircularGauge>'
+'<Style>'
+'.valueText{'
+'fontSize:18;'
+'fontFamily:Myriad;'
+'textAlign:center;'
+'borderColor:#000000;'
+'backgroundColor:#FFFFFF;'
+'backgroundAlpha:0;'
+'paddingTop:0;'
+'borderThickness:0;'
+'borderAlpha:0;'
+'borderStyle:solid;'
+'}'
+'.tickText{'
+'fontFamily:Myriad;'
+'fontSize:15;'
+'}'
+'</Style>'
+'</KoolChart>';

The above layout can be broken down into four parts, <options>, <formatter> ( NumberFormatter), < CircularGauge> and < Style>.

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, one number formatter has been defined. NumberFormatter, DateFormatter, CurrencyFormatter can be used in KoolChart.

3. <CircularGauge> : The definition of the Circular gauge starts with <CircularGauge> and ends with </CircularGauge>.

4. <Style> : <Style> specifies the CSS style sheet to use to format the output of the gauge. In the above example, two style names have been defined. The valueText style is used to format the output of the gauge value and the tickText style is used to format the tick label of the gauge.

The Circular gauge has a range of 0 to 360 degrees. The default starting angle, 0 degrees, is toward 3 o'clock (or east), and positive angle measurement is clockwise. The Circular gauge is composed of three parts: a background frame, a needle, and a needle cover. You can make various shapes by using the properties of the three parts.

Step 5. Set the data variable.

var chartData = [200];

The complete HTML is as follows:

var chartVars = "KoolOnLoadCallFunction=chartReadyHandler";

KoolChart.create("chart1", "chartHolder", chartVars, "100%", "100%");

function chartReadyHandler(id) {
document.getElementById(id).setLayout(layoutStr);

document.getElementById(id).setData(chartData);
}

</head>

var chartData = [200];

</script>

</head>

<body>
<div class="container">
<div class="header">
<p>KoolChart – Circular Gauge</p>
</div>
<div class="content">
<div id="chartHolder" style="width:600px; height:400px;">
</div>
</div>
</div>
</body>
</html>

2013년 2월 26일 화요일

Kool HTML5 Chart supported smartphones and pads

Kool HTML5 Chart supported smartphones and pads

- iPhone 3gs, 4, 4s, 5
- Galaxy S, S2, S3
- HTC
- Blackberry
- Galaxy Tab, Note
- Nexus7, 10
- iPad mini, 2, 3, 4

You can make mobile chart, smartphone chart what you want everything.
Here is demo chart. also, you can get trial version.
Try now!
http://koolchart.com

2013년 2월 25일 월요일

Area2D MultiSeries From-To Javascript Chart

Area2D MultiSeries From-To Javascript Chart
You can use this chart for air chart

You can make chart what you want everything.
Here is demo chart. also, you can get trial version.
Try now!
http://koolchart.com

2013년 2월 21일 목요일

History 3D HTML5 Chart (Column+Line Combination)

History 3D HTML5 Chart (Column+Line Combination)

You can make chart what you want everything.
Here is demo chart. also, you can get trial version.
Try now!
http://koolchart.com

Game Release Dates 2013 Javascript chart

Game Release Dates 2013 Javascript chart - Koolchart
I waiting for PS4 & XBOX720.

You can make chart what you want everything.
Here is demo chart. also, you can get trial version.
Try now!
http://koolchart.com