My Daily chart: Creating a Circular gauge Javascript 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 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>

My Daily chart

2013년 2월 27일 수요일

Creating a Circular gauge Javascript Chart

댓글 없음:

댓글 쓰기