Great workaround, mrwallace. This is a big help. I have added a link to your post in the requirements section of the documentation.
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?
how do you change the themes?
thanks
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?
Great extension, can you give me a complete example using a model and a controller ?