[Extension] HighchartsWidget

sbasuki · February 15, 2011, 9:46am

Thanks Milo,

Milo S:

Sbasuki, here is a brief example of how to render a pie chart:
$this->widget('ext.highcharts.HighchartsWidget',array(

	'options' => array(

		'series' => array(array(

			'type' => 'pie',

			'data' => array(

				array('Firefox', 44.2),

				array('IE7', 26.6),

				array('IE6', 20),

				array('Chrome', 3.1),

				array('Other', 5.4)

			)

		))

	)

));
For more examples and other options, see the Highcharts demo gallery and online documentation.

Now, this is my Code :

Variabel $test using initial array and
Variabel $hasil read from database




	echo "Variabel Test : ";

	$test=array(array('N', 50),array('R', 13));

	print_r($test);

	echo "<BR>";

	$this->widget('ext.highcharts.highchartsWidget',array(

		'options' => array(

	  	'title' => array('text' => 'Variabel Test'),

    	'series' => array(

    		array(

      		'type' => 'pie',

        	'data' => $test

          )

        )

      )

		)

	);


	echo "Variabel Hasil : ";

	$hasil=array();

	foreach($dataReader as $row) {

		//$bgtCat[]=$row['budget_category'];

		//$bgtCount[]=$row['v_count'];

		$hasil[]=array($row['budget_category'],$row['v_count']);

		//$bgtAmount[]=$row['budget_value'];

	};

	print_r($hasil);

	$this->Widget('ext.highcharts.HighchartsWidget', array(

	   'options' => array(

	      'title' => array('text' => 'Variabel Hasil'),

	      'series' => array(

	         array(

	         	'type' => 'pie',

	         	'data' => $hasil,

	         ),

	      )	      

	   	)

		)

	);

Output from variable $test and $hasil is same (check my attachment (using print_r)), but result in pie chart different??

is my code wrong ? Any Idea?

milomilo · February 17, 2011, 5:14am

I think the numbers in the second array may be strings instead of integers. Try:




$hasil[]=array($row['budget_category'],(int)$row['v_count']);

sbasuki · February 17, 2011, 6:07am

Thanks Milo,

It Works now…

thanks for great extension

cma · February 18, 2011, 1:27pm

Thanks for this extension

If you have a page with an jQuery accordion, an js error will break your page (highchart.js line 112)… of course only with IE8

You need to modify where $embeddedScript is rendered -> CClientScript::POS_LOAD




        /**

         * Publishes and registers the necessary script files.

         *

         * @param string the id of the script to be inserted into the page

         * @param string the embedded script to be inserted into the page

         */

        protected function registerScripts($id, $embeddedScript) {

                $basePath = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'assets' . DIRECTORY_SEPARATOR;

                $baseUrl = Yii::app()->getAssetManager()->publish($basePath, false, 1, YII_DEBUG);

                $scriptFile = YII_DEBUG ? '/highcharts.src.js' : '/highcharts.js';


                $cs = Yii::app()->clientScript;

                $cs->registerCoreScript('jquery');

                $cs->registerScriptFile($baseUrl . $scriptFile);


                // register exporting module if enabled via the 'exporting' option

                if($this->options['exporting']['enabled']) {

                        $scriptFile = YII_DEBUG ? 'exporting.src.js' : 'exporting.js';

                        $cs->registerScriptFile("$baseUrl/modules/$scriptFile");

                }

                $cs->registerScript($id, $embeddedScript , CClientScript::POS_LOAD );

        }

mrwallace · February 21, 2011, 1:12am

How do you change the theme for this extension?

rums · April 11, 2011, 7:40pm

Hello All,

Great extension for a very slick looking charting project.

I have a (hopefully?) quick question that I’m sure people have done. I’m still banging my head against it though, and in spite of tons of searching and reading and failed attempts, I can’t get it going.

Q: How do you get data from the database to a chart? I have a controller that returns a JSON-encoded string but I can’t get the Highchart example to use any data other than if it’s hard-coded just like the example. I’ve even created a local variable in PHP and tried to echo that to no avail.

I’ve also tried using the RequestData method on the ‘load’ event of the chart and can get data from my controller, but when I try to assign it to the widget ‘series’ it does nothing. I believe it’s because the chart itself isn’t declared as a global JavaScript variable, but I don’t see how the widget let’s me do that (in the Highcharts demo AJAX code it’s a simple assignment)

Anyone have a simple example of what the widget and controller action would look like?

Thank you very much.

rums · April 12, 2011, 2:41pm

Follow-up: I’ve gotten the categories part working, but can’t seem to get the series data populated. I’m trying to recreate the chart used in the wiki as an example. Thoughts on what I may be doing wrong? How do I tell the series to use the data from the controller in the same manner as I did for the categories?

Controller:




   

 public function actionFruitCategories() {

      $categories = array('Apples', 'Bananas', 'Oranges');

      echo CJSON::encode($categories);

    }


    public function actionFruitData() {

       $fruitData =  array(

                        array('name' => 'Jane', 'data' => array(10, 0, 40)),

                        array('name' => 'John', 'data' => array(5, 70, 30))

                     );


        echo CJSON::encode($fruitData);

    }

View:





<script type="text/javascript">

 

    function requestData(chart) {

        $.getJSON('/test/fruitCategories',

            function (data) {

                var axis = chart.xAxis[0];

                axis.setCategories(data);

                axis.redraw();

            }

        );

        

        $.getJSON('/test/fruitData',

            function (data) {

                var series = chart.series[0];

                series.setData(data);

              }

        );

    }

    </script>




<?php

$this->Widget('ext.highcharts.HighchartsWidget', array(

   'options'=>array(

 'chart'=>array(

          'events' => array('load'=>'js:function(){requestData(this);}'),

      ),

      'title' => array('text' => 'Fruit Consumption'),

      'xAxis' => array(

         'categories' => array()

      ),

      'yAxis' => array(

         'title' => array('text' => 'Fruit eaten')

      ),

      'series' => array(array()

      )

   )

));


?>

Mr.Yii · May 21, 2011, 8:44am

Hi,

How I can implement server heath or performance real time live?

like this example:

http://www.highcharts.com/studies/live-server.htm

http://www.highcharts.com/documentation/how-to-use

Could you please help me?

Thanks

jayhaase · May 22, 2011, 12:02am

I was able to get the charts working nicely from data extracted from a CActiveRecord. I was having some difficulty knowing exactly how to format the arrays used for the categories and the series, so I used the function


Print_r($arrayVariable)

to better understand the required format.

Since my data set was small (just the 12 months) and since I did not know another way, I just looped through the array of CActiveRecords and built up two arrays in a format that was required by the widget.

In my Controller:




        $results = WcCountServedMonth::model()->findAll();

        

        $lcv = 0;

        $months = array();

        $counts = array();

        foreach ($results as $result)

        {

            $months[$lcv] = $result->date_of_service;

            $counts[] = (int)$result->clients_served;

            $lcv++;

        }

        

        $this->render('index', array('months'=>$months, 'counts'=>$counts));

In my View:




<?php

    $this->Widget('ext.highcharts.HighchartsWidget', array(

        'options'=>array(

            'chart'=> array('type'=>'column', 'height'=>'500', 'spacingBottom'=>40),

            'title' => array('text'=>'Clients Served'),

            'legend'=> array('enabled'=>false),

            'plotOptions'=>array('column'=>array('dataLabels'=>array('enabled'=>true))),

            'xAxis' => array('categories'=>$months),

            'yAxis' => array('title'=>array('text'=>'Clients')),

            'series' => array(array('name' => 'Counts', 'data' => $counts),

        ))

     ));

?>

Mr.Yii · May 23, 2011, 1:36pm

Thank you, but this is not clear for me. Could you please help?

Jay Haase:

I was able to get the charts working nicely from data extracted from a CActiveRecord. I was having some difficulty knowing exactly how to format the arrays used for the categories and the series, so I used the function


Print_r($arrayVariable)

to better understand the required format.

Since my data set was small (just the 12 months) and since I did not know another way, I just looped through the array of CActiveRecords and built up two arrays in a format that was required by the widget.

In my Controller:




        $results = WcCountServedMonth::model()->findAll();

        

        $lcv = 0;

        $months = array();

        $counts = array();

        foreach ($results as $result)

        {

            $months[$lcv] = $result->date_of_service;

            $counts[] = (int)$result->clients_served;

            $lcv++;

        }

        

        $this->render('index', array('months'=>$months, 'counts'=>$counts));

In my View:




<?php

    $this->Widget('ext.highcharts.HighchartsWidget', array(

        'options'=>array(

            'chart'=> array('type'=>'column', 'height'=>'500', 'spacingBottom'=>40),

            'title' => array('text'=>'Clients Served'),

            'legend'=> array('enabled'=>false),

            'plotOptions'=>array('column'=>array('dataLabels'=>array('enabled'=>true))),

            'xAxis' => array('categories'=>$months),

            'yAxis' => array('title'=>array('text'=>'Clients')),

            'series' => array(array('name' => 'Counts', 'data' => $counts),

        ))

     ));

?>

kodok · June 23, 2011, 7:57am

how do you change the themes?

thanks

mannybiker · June 25, 2011, 5:13am

The widget is wrapped in a jquery function. How can I access the chart variable from a button on the page in order to change some option using the Highcharts API?

siskalandre · June 28, 2011, 8:30pm

Great extension, can you give me a complete example using a model and a controller ?

canreo · July 24, 2011, 3:22am

How do we add a label to the chart? I have tried the following code:


'labels' => array (

	  'items' => array (

	     'html' => 'Some information for the viewer.',

	     'style' => array (

	        'left'=> 10,

	        'top'=> 10,

	      ),

	   ),

	),

This does not work because "items" needs to be followed by a square bracket "[" (According to the highcharts api).

How do we structure the ‘labels’ array to accommodate brackets?

canreo · July 25, 2011, 7:23pm

canreo:

How do we add a label to the chart? I have tried the following code:
'labels' => array (

	  'items' => array (

	     'html' => 'Some information for the viewer.',

	     'style' => array (

	        'left'=> 10,

	        'top'=> 10,

	      ),

	   ),

	),
This does not work because "items" needs to be followed by a square bracket "[" (According to the highcharts api).

How do we structure the ‘labels’ array to accommodate brackets?

I solved my problem by adding a nested array after ‘items’ like this:


'labels' => array (

	  'items' => array (

             array (

	        'html' => 'Some information for the viewer.',

	        'style' => array (

	           'left'=> 10,

	           'top'=> 10,

	         ),

	      ),

           ),

	),

asti.ramadhanie · November 2, 2011, 2:50am

Hai Milo, have you ever make a trendline with Highcharts?

As far as i know, Highchart doesn’t support automatic trendline function like the one in jqPlot

If you ever make it, i wonder that you can share with us

Thanks for your help

fre2 · December 13, 2011, 2:30am

Hello there, thanks for the extension it looks neat!

Though, I’m not yet really familiar with yii MVC and query system.

Could someone provide an example of a Model, a View and a Controller to graph data from the database?

Best wishes,

Thomas

sabitzhabit · January 26, 2012, 2:47am

Hi Milo, i use ajax request in event click with Highchart. Its work in Chrome, but didnt work when i run in firefox and IE. What can i do for fix this problem?

thanks…

yogs.610 · February 22, 2012, 9:26am

hi all,

i am using highcharts extension for displaying statistics in my webapp…

i want to display some images along the y-axis instead of numbers…

please help me out to do this…

Thanks

rfenner · March 5, 2012, 9:28pm

Suggestion to enhance the use of the extension especially with working with the chart in javascript.

The chart creation allows for a callback in it’s creation so you could add another option besides ‘option’ say ‘callback’ that lets us specify some javascript to be called in the browser once the chart has been created.

As to someone else question a while back about getting the chart variable you set it to be ‘chart’ in javascript. It would be better if with another option you allow use to be able to set the variable we would like to have the created chart set to. This would help with multiple charts on the page and allow us to access them easier in javascript.

Here’s the suggested changes:

additional vars for the options.




public $chartCreationCallback = 'function(){}';

public $chartJSVariable = 'chart';

the line of code that needs to change to support them.




$this->registerScripts(__CLASS__ . '#' . $id, "var $chartJSVariable = new Highcharts.Chart($jsOptions, $chartCreationCallback);");