Create thermometer using rgraph

2 0
4
Viewed: 16 560 times
Version: Unknown (update)
Category: Tips
Written by: Ankit Modi Ankit Modi
Updated by: Ankit Modi Ankit Modi
Created: Aug 13, 2013
Updated: 12 years ago

You are viewing revision #9 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version or see the changes made in this revision.

« previous (#8)next (#10) »

Hi friends,

First I would like to thanks robregonm for it's very nice extension developing

By using this extension we will create a thermometer like on this demo http://www.rgraph.net/examples/thermometer.html

You can downloaded the Rgraph extesion using this link www.yiiframework.com/extension/rgraph/ and create the RGraphThermometer.php on Regraph folder...

<?php
/**
 * RGraph Bars class
 * @author Maggie Q
 * @date 24/07/2013 09:25 AM
 */
require_once('RGraphWidget.php');
class RGraphThermometer extends RGraphWidget
{
    public function init()
    {
        parent::init();
        $this->registerScriptFile('RGraph.thermometer.js');
        $this->registerScriptFile('RGraph.common.dynamic.js');
        $this->registerScriptFile('RGraph.common.tooltips.js');
    }
 
    public function run()
    {
        parent::run();
        $id = 'Thermometer' . $this->getId();
 
        $data = CJSON::encode($this->data);
 
 
        $script = "var $id = new RGraph.Thermometer('{$this->getId()}',{$this->data});";
        $script .= $this->getEncodedOptions($id);
        $script .= "{$id}.{$this->drawFunction};";
 
        $cs = Yii::app()->getClientScript();
        $cs->registerScript($id, $script);
    }
}

and call the extension using rgraph method..

<div style="text-align: center">
<?php
$str = ',00,100,28,';
$str = implode(',', array_filter(explode(',', $str))); // 280,253,279
//p($str,0);
 
 
$this->widget('application.widgets.rgraph.RGraphThermometer', array(
    'data'=>$str,
    'id'=>'thermo1',
    'options' => array(
        'chart' => array(
            'colors' => array('red'),
            'title.side' => 'This servers target load',
            'scale.visible'=>true,
            'scale.decimals'=>2,
 
            'gutter' => array(
                'right' => 25,
            ),
            'labels.count'=>5,
            //'tooltips'=>array("It's getting <b style='color: red'>hot</b> in her1!"),
            'tooltips.highlight'=>true,
        ),
    ),
    'htmlOptions'=>array(
        'height'=>'400',
        'width'=>'100',
    )
));
?>
</div>
<style>
#therometer{text-align: center}
</style>

Hope it's of some help.