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.

Get started with KoolReport

KoolReport will help you to construct good php data report by gathering your data from multiple sources, transforming them into valuable insights, and finally visualizing them in stunning charts and graphs.