[Extension] HighchartsWidget

Yii 1.1 Extensions
61

To answer my own question, the way I was able to get around it was to do the following:

In the extension’s registerScripts function, comment out everything except the last two lines of the function (keep just this:


		

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

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

Create a snippet PHP file called application.components.HighchartsSnippet with just the following:




<?php


$basePath = Yii::app()->basePath . DIRECTORY_SEPARATOR . 'extensions/highcharts/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);

On the PARENT view page of whenever you use Highcharts, insert the following line:




Yii::import('application.components.HighchartsSnippet', true);

Do not use that import on any of the view files that call the Highcharts widget. JUST the parent (or just the main view). That ensures the Highcharts library is only ever loaded once.

Kludgy, but it works for now until perhaps there’s a fix in the widget itself that checks for the existence of the chart object before re-registering it.

62

Hello,

What is the best way to load this widget with Ajax in a page and how you update it’s data with Ajax call from an action that returns Jason data for this chart?

If anyone has an example would help me a lot.

Thanks

63

Will this extension work if used to display via AJAX call? (yiiwheels is not working)




    <?php

    echo TbHtml::textField('inputStudentName', '', array('append' => TbHtml::ajaxLink('Go', array(

            'studentProfile/getmarks'

                ), array(

            'data' => array('studentName' => 'js: $("#inputStudentName").val()'),

            'update' => '#marks-partial'

                )

        ), 'span' => 2));

    ?>

studentProfile/getmarks renders a partial view that has the chart.




$this->renderPartial('_marks', array('model' => $model));
64

Hello, everyone!

I’ve tried many ways to get gauge chart to work but all I have was an empty screen with a title…

Can anyone help me a little bit with this? All I need is so show a percentage.

Thanks in advance.

65

I cant put my gauge to work… Bar charts and column charts are just beautiful. Can anyone please tell me what I’m doing wrong?


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


   'options'=>array(

      'scripts' => array(

        'highcharts-more'

      ),

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

      'title' => array('text' => 'Total Recebido no Ano'),

      'chart' => array('type' => 'gauge',

                       'alignTicks'=>false,  

                       'plotBackgroundColor'=>'null',

                       'plotBackgroundImage'=>'null',

                       'plotBorderWidth'=>'0',

                       'plotShadow'=>false,

                       ),

      'pane'  => array(

                  'startAngle' => '-150',

                  'endAngle' => '150',

                  'background'=> 'null',

                  'center'=> array('75%','145%')


//                  'background' => array(

//                      array('backgroundColor' => array('linearGradient' => array('x1'=>0, 'y1'=>0, 'x2'=>0, 'y2'=>1),'stops'=>array('0'=>'#FFF','1'=>'#333')),'borderWidth' => 0,'outerRadius'=> '109%'),

//                      array('backgroundColor' => array('linearGradient' => array('x1'=>0, 'y1'=>0, 'x2'=>0, 'y2'=>1),'stops'=>array('0'=>'#333','1'=>'#FFF')),'borderWidth' => 0,'outerRadius'=> '107%'),

//                       'backgroundColor' => '#DEF','borderWidth' => 0,'outerRadius'=> '109%','innerRadius'=> '103%'

//                       ),

                 ),

      'yAxis' => array(

         'title' => array('text' => 'K€'),

         'min' =>'0',

         'max' =>'200',

         'minorTickInterval'=>'auto',

         'minorTickWidth'=>'1',

         'minorTickLength'=>'10',

	       'minorTickPosition'=>'inside',

	       'minorTickColor'=>'#666',

         'tickPixelInterval'=>'30',

	       'tickWidth'=>'2',

	       'tickPosition'=>'inside',

	       'tickLength'=>'10',

	       'tickColor'=> '#666',

         'lineColor'=> '#339',

         'labels' => array('step' => '2', 'rotation'=>'auto'),

         'plotBands' => array(

                 array('from' => '0', 'to'=>'120', 'color'=>'#DF5353'),

                 array('from' => '120', 'to'=>'160', 'color'=>'#DDDF0D'),

                 array('from' => '160', 'to'=>'200', 'color'=>'#55BF3B'),

          )

 

         

      ),


      'series' => array(

         array('name' => 'Valor Recebido em '.$ano, 

               'data' => '[80]',

               'color'=>'#8bbc21',

               'tooltip'=>array('valueSuffix'=>' K€'),

               'dataLabels' => array(

                   'backgroundColor' => array(

                         'linearGradient' => array('x1'=>'0', 'y1'=>'0', 'x2'=>'0', 'y2'=>'1'),

                         'stops'=>array('0'=>'#FFF','1'=>'#333')

                         ),

              ),

      ),      

         

   )

)));
66

scripts is outside options and be carefull with :

  • datatypes: null-false , integers, floats all of then without quotes.

  • structure: many arrays and is very common to have errors

1 simple example here.




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

	'scripts' => [

		'highcharts-more',   // enables supplementary chart types (gauge, arearange, columnrange, etc.)

		'modules/exporting', // adds Exporting button/menu to chart

		'themes/grid'        // applies global 'grid' theme to all charts

	],

   

   'options'=>[

		'title' => ['text' => 'Speedometer'],

		'credits' => ['enabled' => false], 

		'chart' => [

			'type' => 'gauge',

			'plotBackgroundColor'=>null,

			'plotBackgroundImage'=>null,

			'plotBorderWidth'=>0,

			'plotShadow'=>false,

		],

      'pane'  => [

		  'startAngle' => -150,

		  'endAngle' => 150,

		  'background'=> null,

		  //'center'=> ['75%','65%']

		  'background' => [

			  ['backgroundColor' => ['linearGradient' => ['x1'=>0, 'y1'=>0, 'x2'=>0, 'y2'=>1],'stops'=>[[0,'#FFF'],[1,'#333']]],'borderWidth' => 0,'outerRadius'=> '109%'],

			  ['backgroundColor' => ['linearGradient' => ['x1'=>0, 'y1'=>0, 'x2'=>0, 'y2'=>1],'stops'=>[[0,'#333'],[1,'#FFF']]],'borderWidth' => 1,'outerRadius'=> '107%'],			  

			  [],			  

			  ['backgroundColor' => '#DDD','borderWidth' => 0,'outerRadius'=> '105%','innerRadius'=> '103%']

			],

		 ],

      'yAxis' => [

		'title' => ['text' => 'Km/h'],

		'min' =>0,

		'max' =>200,

		'minorTickInterval'=>'auto',

		'minorTickWidth'=>1,

		'minorTickLength'=>10,

		'minorTickPosition'=>'inside',

		'minorTickColor'=>'#666',

		'tickPixelInterval'=>30,

		'tickWidth'=>2,

		'tickPosition'=>'inside',

		'tickLength'=>10,

		'tickColor'=> '#666',

		'lineColor'=> '#339',

		'labels' => ['step' => 2, 'rotation'=>'auto'],

		'plotBands' => [

			 ['from' => 0, 'to'=>120, 'color'=>'#DF5353'],

			 ['from' => 120, 'to'=>160, 'color'=>'#DDDF0D'],

			 ['from' => 160, 'to'=>200, 'color'=>'#55BF3B'],

		]

      ],		

		'series' => [

			['name' => 'speed', 'data' => [80], 'tooltip' => ['valueSuffix'=>'km/h']],

		],

   ],  

]);
67

Hello !

First of all - Thanks for the awesome modules, it works very well !

I’m trying to make a “semi circle” graph

here is my code :




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

            array(

                'options' => array(

                    'scripts' => array(

                        'highcharts-more'

                    ),

                    'chart' => array(

                        'plotBackgroundColor' => null,

                        'plotBorderWidth' => 0,

                        'plotShadow' => false

                    ),

                    'title' => array(

                        'text' => 'Répartition des modes de paiement',

                    ),

                    'plotOptions' => array(

                        'pie' => array(

                            'dataLabels' => array(

                                'enabled' => true,

                                'distance' => -50,

                                'style' => array(

                                    'fontWeight' => 'bold',

                                    'color' => 'white',

                                    'textShadow' => '0px 1px 2px black',

                                ),

                            ),

                            'startAngle' => "-90",

                            'endAngle' => "90",

                            'center' => array('50%', '50%')

                        ),

                    ),

                    'series' => array(

                        array(

                            'type' => 'pie',

                            'innerSize' => '50%',

                            'data' => array(

                                array('Jane', 12),

                                array('John', 13),

                            )

                        )

                    ),

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

                )

            )

        );

However my pie is just rendered as a regular pie not a semi circle.

The params


                            

'startAngle' => "-90",

'endAngle' => "90",

are supposed to make that happen, but it doesn’t seems to work

Whether i keep or remove these 2 lines, my graph is just a regular graph.

Any idea about what i’m dong wrong here ?

Thanks a lot !

68

I’m able to create the simple chart of the example using this in my view




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

   'options'=>array(

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

      'xAxis' => array(

         'categories' => array('Apples', 'Bananas', 'Oranges')

      ),

      'yAxis' => array(

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

      ),

      'series' => array(

         array('name' => 'Jane', 'data' => array(1, 0, 4)),

         array('name' => 'John', 'data' => array(5, 7, 3))

      )

   )

));

But i need a more ‘granular’ control over it.

In specific, I need to manually user highcharts javascript. This because I need to create and show the charts only on $.ajax(…).success();

How to simply use highcharts library ‘as is’ via pure javascript ?

69

I’m trying to use this extension, and it works very well for simple charts, but i’m trying to make a column chart with a simple drilldown and i can’t figure this out, can anyone help me out ?

I only need a working example of a column chart with a simple drillsown so i can understand how drilldown works.

70

Anyone ?

P.S: got it working… so if anyone as the same doubt i had here’s a woking code for a chart colum with drilldown.




<?php

$this->pageTitle=Yii::app()->name . ' - '.Yii::t('app','Highcharts');

?>

<h1><?php echo Yii::t('app','Highcharts').' Column DrillDown'; ?></h1>

 

<?php

 

$level1 = array();

$level1[] = array('name' => 'GroupOne', 'y' => 11, 'drilldown' => 'dd1');

$level1[] = array('name' => 'GroupTwo', 'y' => 22, 'drilldown' => 'dd2');

$level1[] = array('name' => 'GroupThree', 'y' => 33, 'drilldown' => 'dd3');

 

$level2 = array();

$level2[] = array('id' => 'dd1', 'data' => array(array('Detail1', 1), array('Detail2', 2), array('Detail3', 4)));

$level2[] = array('id' => 'dd2', 'data' => array(array('Detaila', <img src='http://www.yiiframework.com/forum/public/style_emoticons/default/cool.gif' class='bbc_emoticon' alt='8)' />, array('Detailb', 9), array('Detailc', 3)));

$level2[] = array('id' => 'dd3', 'data' => array(array('DetailX', 7), array('DetailY', 5), array('DetailZ', 6)));

 

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

        'scripts' => array(

        'modules/drilldown', // in fact, this is mandatory <img src='http://www.yiiframework.com/forum/public/style_emoticons/default/smile.gif' class='bbc_emoticon' alt=':)' />

        ),

    'options'=>array(

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

        'title' => array('text' => Yii::t('app','Levels 1 and 2')),

        'subtitle' => array('text' => Yii::t('app','Click the columns to view details.')),

        'xAxis' => array('type' => 'category'),

        'yAxis' => array('title' => array('text' => Yii::t('app','Vertical legend')),),

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

        'plotOptions' => array (

            'series' => array (

                            'borderWidth' => 0,

                            'dataLabels' => array(

                                'enabled' => true,

                            ),

                        ),

                    ),

        'series' => array (array(

                        'name' => 'MyData',

                        'colorByPoint' => true,

                        'data' => $level1,

                    )),

        'drilldown' => array(

                        'series' => $level2,

                    ),

    ),

));

 

?>
71

Yii Highcharts Widget v3.0.10 is now available! Please see the extension page for installation and usage instructions. Enjoy.

72

Hey guys,

i am currently trying to figure out how to use the Highcharts Widget for my dashboard.

Still after trying several hours i cant seem to fix the following error:

First of all the necessary code :




$date_arr = array();

	$steps_arr = array();

	while(($row=$dataReader->read())!==false) {

		$temp=implode($row);

		$splitted = explode(",", $temp);

			//Parse data

			$date =explode("=", $splitted[1]);

			$steps=explode("=", $splitted[2]);

			//Insert into array

			$date_arr[]=$date[1];

			$steps_arr[]=$steps[1];


			//Insert into output table

			echo "<tr>";

			echo "<td>$date[1]</td>";

			echo "<td>$steps[1]</td>";

			echo "</tr>";

			

	}

	print_r($steps_arr);


	// using foreach to traverse through every row of data

	

	$connection->active=false;

	

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

			'options'=>array(

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

					'title' => array('text' => 'Patient Activity'),

					'xAxis' => array(

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

							'categories' => $date_arr

					),

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

					'yAxis' => array(

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

					),

					'series' => array(

							array('name' => 'Patient', 'data' => $steps_arr)

					)

			)

	));

Short explanation : Input is something like [id=1,time=2014-03-01,steps=19142,…] I parse this to get the time and the steps. I write those values in one array each (date_arr and steps_arr).

So an example would look like $date_arr = array(2014-03-01, 2014-03-02) and $steps_arr = array(1000,5000)

Still i am having problems using those variables in the highcharts widget. $date_arr for the categories works just fine but i cant get $steps_arr get running for the series data.

If i manually create the Array with the same data it works just fine.

I simply get no data if i use my $steps_arr variable :(

I hope someone can help me, because i think i overlooked something stupid …

73

Hi, Inoos. Sorry I missed your question. I hope you have solved it by now. If not, I’d be glad to have a look but would need some sample data.

74

Yii Highcharts Widget v4.0.1 is now available and supports 3D charts! Please see the extension page for installation and usage instructions. Enjoy.

75

I’m trying to load a chart with ajax but I only get a blank return. What is wrong? Below is my example:

View:




<script>

$(document).ready(function() 

{


		$.ajax(

		{

			url: '/dashboard/financeiro/carregarGraficoLinhasSaldoContas',

			type: 'GET',

		})

		.done(function(graficoLinhasSaldoContas) 

		{

			$('#divGraficoLinhasSaldoContas').html(graficoLinhasSaldoContas);

		})

		.fail(function() 

		{

			console.log("Não conseguiu carregar o gráfico de linhas dos saldos das contas");

		})

});

</script>


<div id="divGraficoLinhasSaldoContas"></div>

Controller:




public function actionCarregarGraficoLinhasSaldoContas()

	{


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

		                        )

		                ))

		        )

		));

	}

I’m using Yii 1.1.14 and I’ve already tryed with yii-highchart 3.0.10 and 4.0.1

76

Bianchi, HighchartsWidget relies on registered JavaScript, so it must be run in the context of a view. I would just run the widget in the base view, and then reload the data via AJAX. For example:

View:




<?php $this->widget('ext.highcharts.HighchartsWidget', array('id' => 'divGraficoLinhasSaldoContas')); ?>

<script>

jQuery(window).on('load', function() {

    $.getJSON('/dashboard/financeiro/carregarGraficoLinhasSaldoContas')

        .done(function(data) {

            var chart = $('#divGraficoLinhasSaldoContas').highcharts();


            // remove old data

            $(chart.series).each(function() {

                this.remove();

            });


            // add new data

            chart.addSeries(data);

        })

        .fail(function() {

            console.log("Não conseguiu carregar o gráfico de linhas dos saldos das contas");

        });

});

</script>

Controller:




public function actionCarregarGraficoLinhasSaldoContas()

{

    echo CJSON::encode(array(

        'type' => 'pie',

        'data' => array(

            array('Firefox', 44.2),

            array('IE7', 26.6),

            array('IE6', 20),

            array('Chrome', 3.1),

            array('Other', 5.4)

        )

    ));

}
77

Hi Milo, great job, thanks!!

I use this code to hide/show tickets because I have a lot of data:


xAxis: {

                 type: "categorie",

                 events:{

                afterSetExtremes:function(){


                    chart.showLoading("Loading...");


                	if(chart.xAxis[0].tickPositions.length <25){

                 		this.update({

                        labels:{

                            style:{

                                  fontSize: 11,

                                color: "#8a8f8f",                     

                            } 

                        },

                        tickLength: 0,

                     });

                    

                    chart.hideLoading();


                	} else {

                		this.update({

                        labels:{

                            style:{

                                 fontSize: 11,

                                color: "white",                             

                            } 

                        },

                        tickLength: 0

                    });

                    chart.hideLoading();

                	}

                }    

                

            },

I tried it:


'xAxis' => array(

    	  'events' =>array(

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

    	  			chart.showLoading("Loading...");

    	  			if(chart.xAxis[0].tickPositions.length <26){

                              ...........

But not working, if use alert to show ‘chart.xAxis[0].tickPositions.length’ apareace 5.

Any idea?

Thanks

78

Gledson, I cannot debug without a full sample code. Is the callback function executing at all?

79

Hi,

Sorry for delay…

Example of code:




  $data = array();

  $data[] = array('name' => 'bananaA', 'y' => 11);

  $data[] = array('name' => 'bananaB', 'y' => 12);

  $data[] = array('name' => 'bananaC', 'y' => 13);

  $data[] = array('name' => 'bananaD', 'y' => 14);

  $data[] = array('name' => 'bananaE', 'y' => 15);

  $data[] = array('name' => 'bananaF', 'y' => 16);

  $data[] = array('name' => 'bananaG', 'y' => 17);

  $data[] = array('name' => 'bananaH', 'y' => 18);

  $data[] = array('name' => 'bananaI', 'y' => 19);

  $data[] = array('name' => 'bananaJ', 'y' => 20);

  $data[] = array('name' => 'bananaK', 'y' => 21);

  $data[] = array('name' => 'bananaL', 'y' => 22);


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

                'scripts' => array(),

                'options' => array(

                    'lang' => array('resetZoom' => 'Limpar zoom'),

                    'chart' => array(

                        'type' => 'spline',

                        'marginBottom' => 100,

                        'zoomType' => 'x',

                    ),

                    'tooltip' => false,

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

                    'subtitle' => array('text' => ''),

                    'xAxis' => array(

                        'events' => array(

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

    	  			if(chart.xAxis[0].tickPositions.length < 10){

                                this.update({

                        labels:{

                            style:{

                                fontSize: 11,

                                color: "gray",  

                            } 

                        },

                        tickLength: 0,

                     });

    	  			} else {

                                this.update({

                        labels:{

                            style:{

                                fontSize: 11,

                                color: "white",  

                            } 

                        },

                        tickLength: 0,

                     });

                                        

    	  			}

                

    	  			chart.hideLoading();

    	  		}',

                        ),

                        'type' => 'category',

                        'labels' => array(

                            'rotation' => -45,

                            'style' => array(

                                'fontSize' => '11px',

                                'color' => 'gray',

                            ),

                        ),

                    ),

                    'yAxis' => array(

                        'labels' => array(

                            'style' => array(

                                'color' => '#E8E8E8',

                            ),

                        ),

                        

                        'title' => array(

                            'text' => Yii::t('app', 'Test'),

                            'style' => array(

                                'color' => '#E8E8E8',

                                'fontSize' => '11px',

                            ),

                        ),

                    ),

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

                    'plotOptions' => array(

                        'series' => array(

                            'borderWidth' => 0,

                            'dataLabels' => array(

                                'enabled' => false,

                            ),

                            'marker' => array(

                                'animation' => array(

                                    'duration' => 2000,

                                ),

                                'states' => array(

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

                                ),

                                'enabled' => false,

                            ),

                        ),

                    ),

                    'series' => array(array(

                            'name' => '',

                            'color' => 'blue',

                            'data' => $data,

                        )),

                ),

            ));

the first goal has been met, that is, I can show / hide the label (leaving the white color that is equal the graph background), but the label changes getting numbers,

any ideas?

80

Answering my own question: I separated the data of the category: P