Create thermometer using rgraph

You are viewing revision #7 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.

next (#8) »

Hi Freinds,

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 Ankit Modi <amodi06@gmail.com>
 * @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.

2 0
4 followers
Viewed: 13 060 times
Version: Unknown (update)
Category: Tips
Written by: Ankit Modi
Last updated by: Ankit Modi
Created on: Aug 13, 2013
Last updated: 10 years ago
Update Article

Revisions

View all history

Related Articles