• Overview

GaugeChart

Overview #

A gauge with a dial, rendered within the browser using SVG or VML.

Code:

<?php
\koolreport\widgets\google\Gauge::create(array(
    "name"=>"resourceChart",
    "title"=>"Resource Usage",
    "dataSource"=>[
        ["Label","Value"],
        ['Memory', 80],
        ['CPU', 55],
        ['Network', 68]
    ],
    "columns"=>array("Label","Value"=>array("format"=>false)),
    "options"=>array(
        "redFrom"=> 90, 
        "redTo"=> 100,
        "yellowFrom"=>75, 
        "yellowTo"=> 90,
        "minorTicks"=> 5
    ),
    "onReady"=>"function(){
        setInterval(function() {
            resourceChart.dataTable.setValue(0, 1, 40 + Math.round(60 * Math.random()));
            resourceChart.redraw();
        }, 13000);
        setInterval(function() {
            resourceChart.dataTable.setValue(1, 1, 40 + Math.round(60 * Math.random()));
            resourceChart.redraw();
        }, 5000);
        setInterval(function() {
            resourceChart.dataTable.setValue(2, 1, 60 + Math.round(20 * Math.random()));
            resourceChart.redraw();
        }, 26000);
    }"
));

Explanation:

1. The Gauge requires data source with two columns. The first one is label and the second one is value.
2. In the options, we set some of extra settings to draw Gauge.
3. We have the "onReady" which is a Javascript function that will be implemented at client-side after the Gauge is ready.