[sbasuki]

Thanks Milo,

Milo S, on 13 February 2011 - 01:37 PM, said:

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?

Attached File(s)

•  pie_chart.PNG (23.27K)
  Number of downloads: 64

[Milo S]

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]

Milo S, on 17 February 2011 - 12:14 AM, said:

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

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

Thanks Milo,

It Works now..
thanks for great extension

[cma]

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]

How do you change the theme for this extension?

[rums]

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]

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]

Hi,


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

like this example:

http://www.highchart...live-server.htm
http://www.highchart...tion/how-to-use


Could you please help me?

Thanks

[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),
        ))
     ));
?>

[Mr.Yii]

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

Jay Haase, on 21 May 2011 - 07:02 PM, said:

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]

how do you change the themes?

thanks

[Manny]

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]

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

[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?

[canreo]

canreo, on 23 July 2011 - 10:22 PM, said:

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,
	         ),
	      ),
           ),
	),

[ramadhanie87]

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]

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

[54byte]

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..

[passion]

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]

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);");