Thanks a Lot Milo,
I do have a small issue though
In highchartswidget.php you have used array_replace_recursive().
This was introduced only in 5.3 and most webhosts only have 5.2.
I came to know about this after some debugging. I think you should make it backward compatible with 5.2
Thanks
Gaurav
I had the same problem and made a small work-around.
I created a new file in components called CompatibleFunctions.php.
<?php
/*
* To use the needed PHP 5.3 functions in a PHP 5.2 environment
*
*/
// as of PHP 5.3.0 array_replace_recursive() does the work for us
if (function_exists('array_replace_recursive'))
{
return call_user_func_array('array_replace_recursive', func_get_args());
}
if (!function_exists('array_replace_recursive'))
{
function array_replace_recursive($array, $array1)
{
function recurse($array, $array1)
{
foreach ($array1 as $key => $value)
{
// create new key in $array, if it is empty or not an array
if (!isset($array[$key]) || (isset($array[$key]) && !is_array($array[$key])))
{
$array[$key] = array();
}
// overwrite the value in the base array
if (is_array($value))
{
$value = recurse($array[$key], $value);
}
$array[$key] = $value;
}
return $array;
}
// handle the arguments, merge one by one
$args = func_get_args();
$array = $args[0];
if (!is_array($array))
{
return $array;
}
for ($i = 1; $i < count($args); $i++)
{
if (is_array($args[$i]))
{
$array = recurse($array, $args[$i]);
}
}
return $array;
}
}
?>
And added this file to be loaded in the index.php of Yii.
<?php
// change the following paths if necessary
$yii=dirname(__FILE__).'/../framework/yii.php';
$config=dirname(__FILE__).'/protected/config/main.php';
$compfunctions=dirname(__FILE__).'/protected/components/CompatibleFunctions.php';
// remove the following lines when in production mode
defined('YII_DEBUG') or define('YII_DEBUG',true);
defined('YII_TRACE_LEVEL') or define('YII_TRACE_LEVEL',3);
require_once($compfunctions);
require_once($yii);
Yii::createWebApplication($config)->run();
Problem solved. After you upgrade to PHP 5.3 the original function will be used instead of this work-around one.
Thank you for the tip, Gaurav. That was an oversight on my part. I have updated the requirements section of the documentation and will add support for PHP 5.2 in the next release.
Great workaround, mrwallace. This is a big help. I have added a link to your post in the requirements section of the documentation.
I’m having problems with fitting the axis-labels on the screen. After a certain length the label just gets cut off. Ideas anyone?
Do you have a screenshot you can post?
Here you go. The first 4 labels are cut off. At first I thought it was because of my use of a bar chart, so I’ve changed to a column chart. But as you can see, the problem is the same.
Edit:
It seems to be caused by differences in div sizes and SVG size.
Try using the "renderTo" chart option.:
$this->Widget('ext.highcharts.HighchartsWidget', array(
'options' => array(
'chart' => array(
'renderTo' => 'myContainer',
'defaultSeriesType' => 'column',
....
),
...
));
echo '<div id="myContainer"></div>';
Where "myContainer" is the DIV ID of your choice. If you display more than one chart, you can use "myContainer1", "myContainer2", etc…
How to display pie chart using highcharts?
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.
Thanks Milo,
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?
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
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 );
}
How do you change the theme for this extension?
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.
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()
)
)
));
?>
Hi,
How I can implement server heath or performance real time live?
like this example:
http://www.highcharts.com/studies/live-server.htm
http://www.highcharts.com/documentation/how-to-use
Could you please help me?
Thanks
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),
))
));
?>
Thank you, but this is not clear for me. Could you please help?