Dynamic and Interactive

Overview

All gauges in AnyChart support real-time updating capabilities, the chart values can be updated, without invoking page refreshes. Also, you can allow user to move pointers and track the changes in application.

to top

Real-time Update

Real-time update in AnyChart Gauges is done using external interface functions, you can define which gauge and which pointer to update.

Clocks Sample

This sample shows how to create analog clocks with AnyChart circular gauge, single circular gauge has three needle pointers, JavaScript updates pointers periodically.

The JavaScript code for this is the following:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sample AnyChart Flash Chart</title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
//<![CDATA[
var chart = new AnyChart('./swf/AnyChart.swf');
chart.width = 600;
chart.height = 600;
chart.setXMLFile('./clocks.xml');
chart.write();
function update()
{
var date = new Date();
chart.updatePointData("clocks", "hours", {value: ((date.getHours() + date.getMinutes()/60) % 12)});
chart.updatePointData("clocks", "minutes", {value: (date.getMinutes() + date.getSeconds()/60)});
chart.updatePointData("clocks", "seconds", {value: (date.getSeconds())});
}

setInterval(update,10);
//]]>
</script>
</body>
</html>

Multiple Clocks Sample

Here is another demonstration of real-time updating, now we will create a composite gauge and show time in different timezones, to make our work more comfortable we will create a template and reuse it.

to top

User interaction

The gauges in AnyChart suite can act as an input controls, allowing user to drag the pointer and change its value. When the vaue Once the value is updated the event is fired that can be handled to update some data in application.

To make all pointers (or one of them) editable you should set editable attribute to "true"

XML Syntax
Plain code
01 <pointers editable="true">
02   <pointer value="10" editable="true" />
03   <pointer value="20" editable="false" />
04 </pointers>

To add event handling you should add listener to "valueChange", where chart is of AnyChart type and valueChangeFunction accepts one parameter that holds event data:

chart.addEventListener("valueChange",valueChangeFunction)

In event handling function you can get the name of a gauge where value has changed, and get pointers value and name:

function valueChangeFunction(event)
{

alert (event.params.gaugeName);
alert (event.params.pointerName);
alert (event.params.pointerValue);

}

To change value of the pointer in a gauge you should use updateData function, "Gauge Name" and "Pointer Name" should be set properly in XML, value is accepted as an object with value property:

data = {value: 10};

chart.updatePointData("Gauge Name", "Pointer Name", data);

Also, you can read gauges values on chart render, using getInformation method, which in case of gauges returns the collection of gauges, where each gauge holds the collection of subgauges and collection of pointers:

chart.addEventListener("render", onRender);

function onRender()
{
  info = chart.getInformation();
  gaugeName = info.gauges[0].name;
  pointerValue = info.gauges[0].pointers[0].value;
  pointerName = info.gauges[0].pointers[0].name;
}

Two samples below show and explain this feature:

Petroleum Consumption vs. Reserves Sample

The sample below shows the depenedency between petroleum consumption and its reserves on the Earth, AnyChart is configured to show two gauges: Vertical Linear shapes as Tank and Semi-Circular Gauge.

The first gauge shows an imaginable petroleum consumption - user can drag to to set the value from 1 bln. to 1000 blns. barrels per year, when user changes the value of the first gauge - the second is updated.

HTML Source of the sample is the following:

<html>
<head>
<title>Sample AnyChart Flash Chart - Petroleum </title>
<script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
//<![CDATA[
var consumption;
var chart = new AnyChart('./swf/AnyChart.swf');
chart.width = 840;
chart.height = 611;
chart.setXMLFile('./petroleum.xml');
chart.write();
// add listener that tracks changes in gauge
chart.addEventListener("valueChange",valueChange);
function valueChange(event)
{
// check the gauge name
switch (event.params.gaugeName) {
case "consumption":
// get the change value
consumption = event.params.pointerValue;
// calculate new value and put it into data object
var data = {value: (2700 / consumption)}
// update the second gauge with a new value
chart.updatePointData("time", "years", data);
break;
default:
alert (event.params.gaugeName);
} }
//]]>
</script>
</body>
</html>

to top

Ideal Gas Equation Sample

One more more complicated sample shows how gauges can be used to demonstrate basical physics law - The ideal gas law. Ideal gas law is the equation of state of a hypothetical ideal gas, first stated by Clapeyron in 1834.

The law states that PV = nRT, where P is the absolute pressure of the gas, V is the volume of the gas, n is is the number of moles of gas, R is the universal gas constant, T is the absolute temperature.

However, it is not obligatory to know all that phisics stuff to undersrand our sample, launch it and try to drag the pointers of gauges. On the page you can choose which value is fixed and should not change.

to top