Create thermometer using rgraph

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.

2 0
4 followers
Viewed: 12 454 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