Yii Framework Forum: [Extension] HighchartsWidget - Yii Framework Forum

Jump to content

  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • 4
  • You cannot start a new topic
  • You cannot reply to this topic

[Extension] HighchartsWidget Wrapper widget for Highcharts Javascript library Rate Topic: ***** 2 Votes

#21 User is offline   sbasuki 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 14-January 10

Posted 15 February 2011 - 04:46 AM

Thanks Milo,

View PostMilo 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)


0

#22 User is offline   Milo Schuman 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 23
  • Joined: 17-September 10

Posted 17 February 2011 - 12:14 AM

I think the numbers in the second array may be strings instead of integers. Try:
$hasil[]=array($row['budget_category'],(int)$row['v_count']);

0

#23 User is offline   sbasuki 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 14-January 10

Posted 17 February 2011 - 01:07 AM

View PostMilo 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
0

#24 User is offline   cma 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 28-July 09

Posted 18 February 2011 - 08:27 AM

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

0

#25 User is offline   mrwallace 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 31
  • Joined: 12-September 10

Posted 20 February 2011 - 08:12 PM

How do you change the theme for this extension?
Retreat is no longer an option...
0

#26 User is offline   rums 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 13
  • Joined: 23-December 10

Posted 11 April 2011 - 02:40 PM

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

#27 User is offline   rums 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 13
  • Joined: 23-December 10

Posted 12 April 2011 - 09:41 AM

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

?>


0

#28 User is offline   Mr.Yii 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 11
  • Joined: 08-April 11

Posted 21 May 2011 - 03:44 AM

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
0

#29 User is offline   Jay Haase 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 10
  • Joined: 21-May 11

Posted 21 May 2011 - 07:02 PM

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

0

#30 User is offline   Mr.Yii 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 11
  • Joined: 08-April 11

Posted 23 May 2011 - 08:36 AM

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


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


0

#31 User is offline   kodok 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 03-May 11

Posted 23 June 2011 - 02:57 AM

how do you change the themes?

thanks
0

#32 User is offline   Manny 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 4
  • Joined: 11-April 11

Posted 25 June 2011 - 12:13 AM

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

#33 User is offline   siskalandre 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 92
  • Joined: 16-March 11
  • Location:Indonesia

Posted 28 June 2011 - 03:30 PM

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

#34 User is offline   canreo 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 14
  • Joined: 21-July 09

Posted 23 July 2011 - 10:22 PM

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

#35 User is offline   canreo 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 14
  • Joined: 21-July 09

Posted 25 July 2011 - 02:23 PM

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

0

#36 User is offline   ramadhanie87 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 9
  • Joined: 27-April 11

Posted 01 November 2011 - 09:50 PM

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 :D

Thanks for your help
0

#37 User is offline   fre2 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 12-December 11

Posted 12 December 2011 - 09:30 PM

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
0

#38 User is offline   54byte 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 06-November 10

Posted 25 January 2012 - 09:47 PM

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

#39 User is offline   passion 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 10
  • Joined: 18-January 12

Posted 22 February 2012 - 04:26 AM

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
0

#40 User is offline   rfenner 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 35
  • Joined: 10-March 09

Posted 05 March 2012 - 04:28 PM

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

0

Share this topic:


  • (4 Pages)
  • +
  • 1
  • 2
  • 3
  • 4
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users