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

Jump to content

  • (4 Pages)
  • +
  • « First
  • 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

#61 User is offline   rums 

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

Posted 10 September 2013 - 11:06 AM

View Postrums, on 30 August 2013 - 01:53 PM, said:

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


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

#62 User is offline   webservice 

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

Posted 14 September 2013 - 08:31 PM

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
0

#63 User is offline   Xavier John 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 41
  • Joined: 16-August 13
  • Location:Redmond, WA

Posted 16 September 2013 - 12:50 PM

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

0

#64 User is offline   migueArgentina 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 139
  • Joined: 09-March 11

Posted 27 September 2013 - 08:47 AM

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

#65 User is offline   jorge sequeira 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 33
  • Joined: 05-February 13

Posted 22 November 2013 - 02:18 PM

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

0

#66 User is offline   rahif 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 152
  • Joined: 11-July 13

Posted 04 December 2013 - 01:05 PM

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']],
		],
   ],  
]);

0

#67 User is offline   Pascal.l 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 16-January 14

Posted 16 January 2014 - 02:33 PM

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

#68 User is offline   realtebo 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 620
  • Joined: 03-October 12
  • Location:Ferrara

Posted 21 January 2014 - 09:25 AM

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 ?
Il computer non ragiona, ma ha sempre ragione.
Ricordalo quando fai il debug
0

#69 User is offline   ptv1p3r 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 20-June 13

Posted 29 January 2014 - 05:12 AM

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

#70 User is offline   ptv1p3r 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 7
  • Joined: 20-June 13

Posted 30 January 2014 - 10:36 AM

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

0

#71 User is offline   Milo Schuman 

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

Posted 17 March 2014 - 12:30 PM

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

#72 User is offline   Inoos 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 1
  • Joined: 28-March 14

Posted 31 March 2014 - 03:29 AM

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

#73 User is offline   Milo Schuman 

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

Posted 25 April 2014 - 12:02 PM

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

#74 User is offline   Milo Schuman 

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

Posted 25 April 2014 - 12:04 PM

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

#75 User is offline   Bianchi 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 17
  • Joined: 07-June 13

Posted 25 April 2014 - 12:39 PM

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
0

#76 User is offline   Milo Schuman 

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

Posted 27 April 2014 - 03:49 PM

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

0

Share this topic:


  • (4 Pages)
  • +
  • « First
  • 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