[Extension] HighchartsWidget

Hi Milo,

great extension!

My problem is: I would like to use the json key-value pair pointStart: Date.UTC(2009,9,6,0,0,0)

in a php array.

But it does not work.

I tried:

‘pointStart’=>‘Date.UTC(2009,9,6,0,0,0)’

‘pointStart’=>‘js:Date.UTC(2009,9,6,0,0,0)’

Any idea?

Thanks Laszlo from Hungary

Milo,

Awesome extension! Has made using Highcharts a breeze in Yii.

2 questions:

  1. When setting tooltip formats such as:



'tooltip'=>array(

	'crosshairs'=>true,

	'shared'=>true,

	'valuePrefix'=>'$',

	'valueDecimals'=>2,

),



It seems default formatting is preserved. I’ve looked through the highcharts api docs and I believe this to be the correct format and datatypes that are getting passed into the tooltip/options variable. What am I missing?

  1. When needing to attach a javascript function to the chart variable that is generated by the core highchartswidget - where/how do you pass this javascript function?

Take for instance this code:

http://jsfiddle.net/hfrntt/QMXe8/

and the function that is being attached to the chart variable for displaying a tooltip on hover of the legend.

Hi all, this is a GREAT extension. Nice Job!

Q:

I’m trying to show the time on x axis (coming from DB) in local time.

According to HighCharts forum, HC displays the time in UTC by default and this the way to override it:




Highcharts.setOptions({

	global: {

		useUTC: false

 	}

});



But I don’t seem to be able to make it work…


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

	'options'=>array(

		'global' => array('useUTC' => 'false'),

...



Not working for me.

Any ideas?

It doesn’t seem like anybody is providing answers here but I’ll try anyways:

I’ve seen in the extension comments that the values from the dataprovider have to be integers. Is there no way to make it accept doubles or floats?

I manually created an array with doubles and it works. What doesn’t work is directly loading the values from my db that I’ve stored as decimal(5,2). >:(

@SebK type cast the to int or float like so:




		if(isset($statements))

		{

			foreach($statements as $key => $value)

			{

				$statement_totals[] = (float)$value;

			}

		}



Once you do this, the tooltip option should let you change the way your data is displayed to having x number of decimals




                    'tooltip'=>	array(

					'valueDecimals'=>2,

					'valuePrefix'=>'$',

				),




…but it doesn’t. I can’t seem to make the tooltip array work and that is what I came here needing assistance for. Anyone have any idea?

EDIT: Using yii 1.1.10 you need to update the highcharts.js and highcharts.src.js files from the highcharts website, then tooltips will work as I described here.

Hi, I use this extention in my web-app, and I use this http://www.yiiframework.com/extension/pdf/ extension for generate pdf.

When I generate a pdf that include a chart, the chart don’t appears in the pdf, but an SVG image are included into a pdf. well I want to know how is possible generate the SVG using widget code.

sorry for my english

thanks

hi milo… thank you for build this good extension… :D

i use this extension for my application, but i find a problem, how to change the default font size? such as for title, xAxis label etc… how should i do?

thanks

Hi Milo, I’m having problems using the events for the chart, It throws me an error in jquery, I used like this:




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

                'options' => array(

                    'chart'=>array('events'=>array('load'=>'function(event) {

                                                               alert ("Chart loaded");')),

                ));




can you please help me with this? is urgent

how to display multiple axis using highchart extension

I would like to ask, I’ve downloaded Highstock and Highchart and extract it into the extensions/. renamed it to highcharts and highstock, but there is no HighstockWidget or HighchartWidget present in the folder. only these: examples, exporting-server, gfx, graphics, js, and index.html. Why is this?

Hi, I’m new in Yii and I had this problem too, but I solved it by adding the code from Hihgcharts examples to disable UTC:


            'series' => array(

                array(

                    'name' => 'Temperatura',

                    'data' => "js:(function(){

                            Highcharts.setOptions({

                                global: {

                                useUTC: false

                                }

                            });

.

.

.

})()



I put that code when I’m loading the series values, but you can add it in whereever you load a javascript, it could be in an event like this:


'events' => array(

                    'load' => 'js:function(){

                            Highcharts.setOptions({

                                global: {

                                useUTC: false

                                }

                            });

                    }'

                ),

Good luck, sorry for my english :P its the fastest solution I found, but there might be better ones.

Try


js:function(){

hope it work… :D

Hi,

It’s possible use multiple series dynamic (live) in this extension?

Give me an exemple please.

It takes a very long period of time until my graph is calculated. My browser hangs at that time. Here is my source code:


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

   'options'=>array(

      'chart'    => array('type' =>'bar'),

      'title'    => array('text' => 'Historic World Population by Region'),

      'subtitle' => array('text' => 'Wikipedia.org'),

      'xAxis'    => array(

                      'categories' => array('Africa', 'America', 'Asia', 'Europe', 'Oceania'),

                      'title' => array('text' =>'null'),

                    ),

      'yAxis'     => array(

                       'min' => '0',

                       'title' => array(

                           'text' => 'Population (millions)',

                           'align' => 'high',

                        ),

                        'labels' => array('overflow' => 'justify'),

                ),

       'tooltip' => array('valueSuffix' => 'millions'),

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

       'legend' => array(

                  'layout' => 'vertical',

                  'align' => 'right',

                  'verticalAlign' => 'top',

                  'x' => -100,

                  'y' => 100,

                  'floating' => true,

                  'borderWidth' => 1,

                  'backgroundColor' => '#FFFFFF',

                  'shadow' => true,

                ),

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

         'series' => array(array(

                         'name' => 'Year 1800',

                         'data' => array(

                                 array(107),

                                 array(31),

                                 array(635),

                                 array(203),

                                 array(2)

                         ),

                     ),    

                     array(

                         'name' => 'Year 1900',

                         'data' => array(

                                 array(133),

                                 array(156),

                                 array(947),

                                 array(408),

                                 array(6)

                         ),

                     ),

                     array(

                         'name' => 'Year 1900',

                         'data' => array(

                                 array(973),

                                 array(914),

                                 array(4054),

                                 array(732),

                                 array(34)

                         ),

                     ),

             )

   )

));

Any ideas?

I have a modal (bootstrap) with a pie graph and I want to show it when onmouseover.

The modal appears empty. How to use the "redraw ()" in this case?

Hi, i’m trying to set user-friendly statistics using Highcharts.

When enter the form, i set a graph with datas corresponding of the actual year, but i want that the user choose another period if he wants.

I dont see what exactly how i can refresh the chart.

Here is my code




<h3>Fréquentation</h3>

<br>

<h4>Choix de la période:   

<?php

		// sélection mois

	   	Yii::app()->user->setState('mois',$model->mois);

		echo CHtml::DropDownList('mois', Yii::app()->user->getState('mois') , array('00' => 'Toute l\'année','01'=>'Janvier', '02'=>'Février', '03'=>'Mars', '04'=>'Avril', '05'=>'Mai', '06'=>'Juin', 

												'07'=>'Juillet', '08'=>'Août', '09'=>'Septembre', '10'=>'Octobre', '11'=>'Novembre', '12'=>'Décembre'),

      	array(

            'ajax'=>array(

               'type' => 'POST',

               'url' => Yii::app()->createUrl('activities/majMois'),

               'data'=>"js:{mois: $(this).val()}",

        	)

        )

		);


		// sélection année

		$listAnnee = CHtml::listData(Activities::model()->findAllBySql('SELECT generate_series as annee FROM generate_series(2008,' . $model->annee .')'),'annee','annee');

	   	Yii::app()->user->setState('annee',$model->annee);

		echo CHtml::DropDownList('annee', Yii::app()->user->getState('annee') , $listAnnee,

      	array(

            'ajax'=>array(

               'type' => 'POST',

               'url' => Yii::app()->createUrl('activities/majAnnee'),

               'data'=>"js:{annee: $(this).val()}",

        	)

        ));


		// ajaxlink pour rafraichir le graphique

		echo CHtml::ajaxLink("Rafraîchir le graphique",

		$this->createUrl('rafraichirFrequentation'),

		array(

		"type" => "post",   // POST donc.

		'update' => '#container3',

		'success' => "js:function() 

				{

....

///////////////// HERE IS WHAT I MISS /////////////////

....

          		}"

		));




// affichage FREQUENTATION

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

        'options' => array(

                'chart' => array(

					'renderTo'=>'container3',

                    'defaultSeriesType' => 'column',

                    'style' => array(

                        'fontFamily' => 'Verdana, Arial, Helvetica, sans-serif',

                    ),

                ),

				'title' => array('text'=>($model->mois == '00')? 'Fréquentation année ' .  $model->annee : 'Fréquentation année ' .  $model->annee . ' mois ' . $model->mois),

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

				'xAxis' => array(

					'categories' => ($model->mois == '00')? $listeDesMois : $listeDesJours,

					'dateTimeLabelFormats' => array(

						'day'=> '%e. %b',

						'month'=> '%b \'%y',

						'year' => '%Y'

					)

            	),

				'yAxis' => array(

					'tittle' => 'Nombre de visites',

            	),

            	'plotOptions' => array(

            	    'series' => array(

        				'dataLabels' => array(

				            'enabled' => true,

							'formatter' => 'js:function() {

						          return this.y;

							}'

						),

					),

                	'column' => array(

                	    'pointPadding' => 0.2,

                    	'borderWidth' => 0

	                ),

            	),

            	'series' => array(

					array(

                        'type' => 'column',

                        'data' =>	$frequentation,

                        'showInLegend' => false, // la légende n'a d'intérêt que si on a plusieurs séries dans le même graphique

					),

                )

        )

));


echo '<div id="container3"></div>';

?>



In the controller, i just update the 3 vars i used in the chart ($listeDesMois, $listeDesJours and frequentation).

Thanks for helping me.

Hi Milo

how to add action JS function for gauge chart usint $htmlOptions param.

thanx

is it possible to use this extension to create charts with values taken from the database?

The newer versions are returning this error:

www.highcharts.com/errors/16

I’m loading a chart via ajax into a partial load popup window. The first chart loads fine, but if I click a different link, subsequent charts are blank and I get the error above.

Note that this error didn’t occur in versions below 3.0. It looks like the revised script is trying to load the HighCharts library more than once.

Any ideas on how to fix this?

I’m currently facing the same issue. Were you able to resolve it? If so, how?