Yii 1.1: googlechart

A widget wrap for google chart
16 followers

A widget wrap for google chart.
Scott Huang(zhiliang)'s first widget:)

Requirements

requirements of using this extension (e.g. Yii 1.1 or above)

Usage

<div class="row"> 
    <div class="span6" >  
        <?php
//very useful google chart
        $this->widget('ext.Hzl.google.HzlVisualizationChart', array('visualization' => 'PieChart',
            'data' => array(
                array('Task', 'Hours per Day'),
                array('Work', 11),
                array('Eat', 2),
                array('Commute', 2),
                array('Watch TV', 2),
                array('Sleep', 7)
            ),
            'options' => array('title' => 'My Daily Activity')));
 
        $this->widget('ext.Hzl.google.HzlVisualizationChart', array('visualization' => 'LineChart',
            'data' => array(
                array('Task', 'Hours per Day'),
                array('Work', 11),
                array('Eat', 2),
                array('Commute', 2),
                array('Watch TV', 2),
                array('Sleep', 7)
            ),
            'options' => array('title' => 'My Daily Activity')));
        ?>
 
    </div>
</div>
 
 
<div class="row"> 
    <div class="span6" >  
        <?php
        $this->widget('ext.Hzl.google.HzlVisualizationChart', array('visualization' => 'Gauge', 'packages' => 'gauge',
            'data' => array(
                array('Label', 'Value'),
                array('Memory', 80),
                array('CPU', 55),
                array('Network', 68),
            ),
            'options' => array(
                'width' => 400,
                'height' => 120,
                'redFrom' => 90,
                'redTo' => 100,
                'yellowFrom' => 75,
                'yellowTo' => 90,
                'minorTicks' => 5
            )
        ));
        ?>
    </div>
</div>
 
//New Example:
$this->widget('ext.Hzl.google.HzlVisualizationChart', array('visualization' => 'LineChart',
            'data' => array(
                array('Year', 'Sales', 'Expenses'),
                array('2004', 1000, 400),
                array('2005', 1170, 460),
                array('2006', 660, 1120),
                array('2007', 1030, 540),
            ),
            'options' => array(
                'title' => 'My Company Performance2',
                'titleTextStyle' => array('color' => '#FF0000'),
                'vAxis' => array(
                    'title' => 'Scott vAxis',
                    'gridlines' => array(
                        'color' => 'transparent'  //set grid line transparent
                    )),
                'hAxis' => array('title' => 'Scott hAixs'),
                'curveType' => 'function', //smooth curve or not
                'legend' => array('position' => 'bottom'),
        )));

Result

Hzl-GoogleChart-Result

Jan 5 2014: 2nd example for hAixs and vAixs 2nd example for hAixs and vAixs

Sep 16,2014: New Sample for Map

<div class="row"> 
    <div class="span6" >  
        <?php
//very useful google chart
 
        $this->widget('ext.Hzl.google.HzlVisualizationChart', array('visualization' => 'Map',
            'packages'=>'map',//default is corechart
            'loadVersion'=>1,//default is 1.  As for Calendar, you need change to 1.1
            'data' => array(
       ['Country', 'Population'],
        ['China', 'China: 1,363,800,000'],
        ['India', 'India: 1,242,620,000'],
        ['US', 'US: 317,842,000'],
        ['Indonesia', 'Indonesia: 247,424,598'],
        ['Brazil', 'Brazil: 201,032,714'],
        ['Pakistan', 'Pakistan: 186,134,000'],
        ['Nigeria', 'Nigeria: 173,615,000'],
        ['Bangladesh', 'Bangladesh: 152,518,015'],
        ['Russia', 'Russia: 146,019,512'],
        ['Japan', 'Japan: 127,120,000']
            ),
            'options' => array('title' => 'My Daily Activity',
                'showTip'=>true,
                )));
        ?>
 
    </div>
</div>

map sample

Resources

google chart gallery

Total 13 comments

#18147 report it
Scott_Huang at 2014/09/16 06:09am
Upgrade to version 0.2

Add loadVersion parameter. Default is 1 As for Calendar, you need change to 1.1. Please check out chart gallery from Your text to link here...

And provide Map sample.

#18103 report it
Laret at 2014/09/08 10:20am
For dynamical numbers

I have that code:

<?php 
    $array_data = array();
    array_push($array_data, array('Task', 'Stats'));
 
    foreach ( $this->getData() as $dane){
        $stat_views = intval($dane->views);
        array_push($array_data, array($dane->date, $stat_views));
    }
    //print_r($array_data);
 
?>
 
<?php $this->widget('ext.googlehart.HzlVisualizationChart', array('visualization' => 'LineChart',
            'data' => $array_data,
            'options' => array('title' => 'Stats:')));
?>
#17933 report it
Lux69 at 2014/08/13 04:27am
Dynamic chart data

Working example for dynamic data, Amjan it expect an array not an string ;)

$myArray = array();
    array_push($myArray, array('projectname', 'total_requests'));
 
    foreach($this->crops as $value) // or whatever loop structure
    {
        array_push($myArray, array($value->TITLE, count($value->BIDS)));
    }
 
    //print_r($myArray);
 
    $this->widget('ext.Hzl.google.HzlVisualizationChart', 
        array('visualization' => 'PieChart',
                'data' => $myArray)
        );

Enjoy :P

#16482 report it
Gordon Cowtan at 2014/02/27 07:23am
Dates in x axis

If you have dates in the x axis for a Google chart, then the form of the element in the json expected by Google is

new Date(1789, 3, 29)

(People with more knowledge than me will, I think, tell you that this is not really valid json because the js date object isn't one of the primitive datatypes json supports but it's what Google Charts wants so I guess we have to live with it.)

Using the extension as it stands it's not possible to output the json in this form because the element ends up being in double quotes ie "new Date(1789, 3, 29)" and therefore being treated as a string by Google Charts.

The only workaround I've managed is described here but modified to cope with double quotes rather than single. This does work but it's not very nice and requires either sub-classing the extension or modifying the registerClientScript() function.

If there's another, much nicer way of doing this I would be very happy to hear about it.

#16298 report it
Scott_Huang at 2014/02/07 07:15am
@iridescent

Please write your own code to wrap the different charts before I have time to do it. All types can find from google chart gallery(in resource session). Thanks.

#16215 report it
iridescent at 2014/01/30 11:16am
chose between different types of charts

Is it possible for a user to chose between different types of charts?

Is there such an option?

#16126 report it
Scott_Huang at 2014/01/22 12:07am
To: Amjad Khan

You supprise me to be frankly:)

Below is the code. We need array not string. Thanks.

$pieData = array(
        array('projectname', 'total_requests'),
        array('Project3', 1),
        array('RTI', 1),
        array('STAEP', 3),
    );
$this->widget('ext.Hzl.google.HzlVisualizationChart', array('visualization' => 'PieChart',
    'data' => $pieData,
    'options' => array('title' => 'My Daily Activity')));
#16103 report it
Amjad Khan at 2014/01/20 01:05pm
My Data is dynamic

Basically i asked you how can i change this dynamic data into the respective format u have given in your examples

I try this solution but it will not work i convert the array into string but it does not work

$mystring=" array(array('projectname', 'total_requests'),";
foreach($result as $value)
{
    $mystring.= 'array('.'\''.$value['projectname'].'\''.' , '.$value['total_requests']."),";
}
 $mystring.=')';
 
i got following result
 
array(array('projectname', 'total_requests'),array('Project3' , 1),array('RTI' , 1),array('STAEP' , 3),)
 
and then i past above result infront of "data" it will work,  but when i write $mystring infront of "data" it will not work
 
   $this->widget('ext.Hzl.google.HzlVisualizationChart', array('visualization' => 'PieChart',
    'data' =>$mystring
    ));

My data is dynamic and it can change so please give me suggestion or solution in case of dynamic data coming form database

#16100 report it
Scott_Huang at 2014/01/20 02:18am
To: Amjad Khan

To: Amjad Khan

$this->widget('ext.Hzl.google.HzlVisualizationChart', array('visualization' => 'PieChart',
    'data' => array(
        array('projectname', 'total_requests'),
        array('Project3', 1),
        array('RTI', 1),
        array('STAEP', 3),
    ),
    'options' => array('title' => Amjad Khan Pie')));
#16091 report it
Amjad Khan at 2014/01/19 09:22am
how to format data to provide for google pie chart

My data is in this format please provide an example that how i can provide data to the pie chart

Array
(
    [0] => Array
        (
            [projectname] => Project3
            [total_requests] => 1
        )
 
    [1] => Array
        (
            [projectname] => RTI
            [total_requests] => 1
        )
 
    [2] => Array
        (
            [projectname] => STAEP
            [total_requests] => 3
        )
 
)
#15969 report it
Scott_Huang at 2014/01/05 07:47am
To @bhawin : The examples for you:)
$this->widget('ext.Hzl.google.HzlVisualizationChart', array('visualization' => 'LineChart',
            'data' => array(
                array('Year', 'Sales', 'Expenses'),
                array('2004', 1000, 400),
                array('2005', 1170, 460),
                array('2006', 660, 1120),
                array('2007', 1030, 540),
            ),
            'options' => array(
                'title' => 'My Company Performance2',
                'titleTextStyle' => array('color' => '#FF0000'),
                'vAxis' => array(
                    'title' => 'Scott vAxis',
                    'gridlines' => array(
                        'color' => 'transparent'  //set grid line transparent
                    )),
                'hAxis' => array('title' => 'Scott hAixs'),
                'curveType' => 'function', //smooth curve or not
                'legend' => array('position' => 'bottom'),
        )));
#15967 report it
bhawin at 2014/01/05 04:45am
hAxis and vAxis options are not working why?

please give an example to work with hAxis and vAxis

#15931 report it
Scott_Huang at 2013/12/31 04:15am
Finally successfully attach zip and png picture into this page:)

Enjoy the google chart, thanks.

Leave a comment

Please to leave your comment.

Create extension