yii-chartjs Extension ¶
Yii Extension for ChartJS library(http://www.chartjs.org/) This is a simple wrapper to use the ChartJS charts as yii framework php widgets.
This is my very first extension, I tried to use the structure of yii-bootstrap. Iam Happy about every advices, the most recent version of this extension is always on GitHub. https://github.com/MeiSign/yii-chartjs
Changelog ¶
05.04.2013: Added labels to all round charts and removed the Labelposition since everyone should style this with individual css.
28.03.2013: Uploaded new version of extension. It includes provisory labels for the PieChart now and I will add the labels also for Doughnut and Polar charts. The configuration has slightly changed to make the installing process easier.
Installation ¶
Download this extension at my GitHub Repository: https://github.com/MeiSign/yii-chartjs
Extract the yii-chartjs folder to the extension folder of your yii app (myApp/protected/extensions)
Add to you main.php config (myApp/protected/config/main.php)
Yii::setPathOfAlias('chartjs', dirname(__FILE__).'/../extensions/yii-chartjs');
- Add in the component section of your main.php config (myApp/protected/config/main.php)
'components' => array(
...,
'chartjs' => array('class' => 'chartjs.components.ChartJs'),
)
- Add in the preload section of your main.php config(myApp/protected/config/main.php)
'preload' => array(
'chartjs'
),
- Use the widgets:
Bar Chart
<?php
$this->widget(
'chartjs.widgets.ChBars',
array(
'width' => 600,
'height' => 300,
'htmlOptions' => array(),
'labels' => array("January","February","March","April","May","June"),
'datasets' => array(
array(
"fillColor" => "#ff00ff",
"strokeColor" => "rgba(220,220,220,1)",
"data" => array(10, 20, 30, 40, 50, 60)
)
),
'options' => array()
)
);
?>
Line Chart
<?php
$this->widget(
'chartjs.widgets.ChLine',
array(
'width' => 600,
'height' => 300,
'htmlOptions' => array(),
'labels' => array("January","February","March","April","May","June"),
'datasets' => array(
array(
"fillColor" => "rgba(220,220,220,0.5)",
"strokeColor" => "rgba(220,220,220,1)",
"pointColor" => "rgba(220,220,220,1)",
"pointStrokeColor" => "#ffffff",
"data" => array(10, 20, 25, 25, 50, 60)
),
array(
"fillColor" => "rgba(220,220,220,0.5)",
"strokeColor" => "rgba(220,220,220,1)",
"pointColor" => "rgba(220,220,220,1)",
"pointStrokeColor" => "#ffffff",
"data" => array(55, 50, 45, 30, 20, 10)
)
),
'options' => array()
)
);
?>
Radar Chart
<?php
$this->widget(
'chartjs.widgets.ChRadar',
array(
'width' => 600,
'height' => 300,
'htmlOptions' => array(),
'labels' => array("January","February","March","April", "May"),
'datasets' => array(
array(
"fillColor" => "rgba(220,220,220,0.5)",
"strokeColor" => "rgba(220,220,220,1)",
"pointColor" => "rgba(220,220,220,1)",
"pointStrokeColor" => "#ffffff",
"data" => array(5, 15, 50, 25, 35)
),
array(
"fillColor" => "rgba(220,220,220,0.5)",
"strokeColor" => "rgba(220,220,220,1)",
"pointColor" => "rgba(220,220,220,1)",
"pointStrokeColor" => "#ffffff",
"data" => array(55, 50, 45, 30, 20)
)
),
'options' => array()
)
);
?>
Polar Area Chart
<?php
$this->widget(
'chartjs.widgets.ChPolar',
array(
'width' => 600,
'height' => 300,
'htmlOptions' => array(),
'drawLabels' => true,
'datasets' => array(
array(
"value" => 50,
"color" => "rgba(220,30, 70,1)",
"label" => "Hunde"
),
array(
"value" => 25,
"color" => "rgba(66,66,66,1)",
"label" => "Katzen"
),
array(
"value" => 40,
"color" => "rgba(100,100,220,1)",
"label" => "Vögel"
),
array(
"value" => 15,
"color" => "rgba(20,120,120,1)",
"label" => "Mäuse"
)
),
'options' => array()
)
);
?>
Pie Chart
<?php
$this->widget(
'chartjs.widgets.ChPie',
array(
'width' => 600,
'height' => 300,
'htmlOptions' => array(),
'drawLabels' => true,
'datasets' => array(
array(
"value" => 50,
"color" => "rgba(220,30, 70,1)",
"label" => "Hunde"
),
array(
"value" => 25,
"color" => "rgba(66,66,66,1)",
"label" => "Katzen"
),
array(
"value" => 40,
"color" => "rgba(100,100,220,1)",
"label" => "Vögel"
),
array(
"value" => 15,
"color" => "rgba(20,120,120,1)",
"label" => "Mäuse"
)
),
'options' => array()
)
);
?>
Doughnut Chart
<?php
$this->widget(
'chartjs.widgets.ChDoughnut',
array(
'width' => 600,
'height' => 300,
'htmlOptions' => array(),
'drawLabels' => true,
'datasets' => array(
array(
"value" => 50,
"color" => "rgba(220,30, 70,1)",
"label" => "Hunde"
),
array(
"value" => 25,
"color" => "rgba(66,66,66,1)",
"label" => "Katzen"
),
array(
"value" => 40,
"color" => "rgba(100,100,220,1)",
"label" => "Vögel"
),
array(
"value" => 15,
"color" => "rgba(20,120,120,1)",
"label" => "Mäuse"
)
),
'options' => array()
)
);
?>
Pie Chart
Thanks for this great extension. is there a way to add labels to the pie chart?
Pie Chart comments
Hi skworden,
thanks for your feedback. I am planning to add a label attribute in the next version of the extension widgets. I think the Library will add labels for that widgets too probably so it will be a temporary fix from my side.
Edit: Added now the labels for the pie chart provisory as html spans. Hopefully the library itself comes up soon with a nicer solution.
Good Work but keep old versions online pls
Good Work i think i'll use when the labels will be active...
PS : could you keep first version online pls?
cause some news version could have little bug in some case...
i've try your 28-03-2013 version and i have troubles with jquery UI and probably bootstrap (the charts don't be draw in page and 'zii.widgets.jui.CJuiAccordion' don't work properly.
edit : 29/03/2013 Works!!! thx i forgot the preload...
Re: Keep old versions online please
Hi Grandoom,
in future I will keep the old versions online, no problem.
For now: If the widgets doesnt draw than you probably didn't updated your config after you downloaded the new version of the extension. Make sure that the extension is mentioned in the preload array of your config.
Bootstrap has actually nothing to do with the extension and jqueury should be already registered in your yii app.
'zii.widgets.jui.CJuiAccordion' is part from Yii booster and also not used in the extension. Hope I could help. :-)
RE Labels
Wow Thanks that was fast.
Just fyi the label position below and beside show in the same place.
Labels added to other charttypes
In the newest version all round Charts can have labels now.
The labelposition was removed. All labels are contained in a div container which is individual styleable over css for everyone.
Error Message
Hello,
I followed the installation instructions above but am getting this error message
Property "CWebApplication.0" is not defined.
CWebapplication
I don't think that this is a problem with the Extension. Please post the complete Stacktrace or send me a pm for further help.
no errors but blank
I installed this extension and I believe it is working fine, except that when I try one of the examples all I get is a blank view...
In Firebug I can see that it has generated the following code:
<canvas id="yii_chartjs_bar_0" height="300" width="600"></canvas>anyone had the same problem?
No Errors but blank
Have you added the preload settings to your config? Sounds to me like the html is generated but no javascript gets loaded.
Also check the browser console and look for errors please.
No Errors but blank
@MeiSign: thanks, that helped. In the console I noticed that the javascript was not getting loaded. I renamed the folder and deleted the contents of the assets folder and it is now working.
Tried to give you a thumb up, but it does not seem to be working right now :-)
Nice work
This was perfect for one of our projects, thank you for the effort. You saved me a lot of time.
For those having a problem with alias:
For those having a problem with adding alias, try doing this in the main.php config file :
'aliases' => array( 'chartjs' => 'ext.chartjs' ),And don't add this : Yii::setPathOfAlias('chartjs', dirname(FILE).'/../extensions/yii-chartjs');
All the JS and the CSS should load now.
Label over the Bars and AxisLabel
Is there any way we can add labes over bars and label around axis.
(there is something on chartjs
//Boolean - If we show the scale above the chart data
scaleOverlay : false,)
But how can I add this using extenstion.
Re: Label over the Bars and AxisLabel
If this is a chartJS option, you can set it over the options array. But I think there is no native labeling in chartJS.
Sigle bar issue is bar graph
When I have single bar in the graph.. the graph doesn't apprear. Only what I can see is the two axes.
Beutiful!
I use this extension for extend my extension:
http://www.yiiframework.com/extension/googleanalyticscounter/
database connection
Thank you very much for the extension, it works perfect. Only I have a question, how I can make a graph dynamic?, I want to make the chart get the data from mysql.
database connection
You can get the mysql data in your controller actions, send the data to the view as array and use that array for the widget.
database connection
I need a function in the following way? (eg)
public function actionTest() { $user = Yii::app()->db->createCommand() ->select('id, username, profile') ->from('tbl_user u') ->join('tbl_profile p', 'u.id=p.user_id') ->where('id=:id', array(':id'=>$id)) ->queryRow(); }If this is correct, how do I add it to the chart view?
database connection
@nkdos
I do this: I load my array with a call to the relevant model
The function "listUserOutlets" that I have here is where you would put your SQL code to retrieve your data, your "actionTest".
Then I do some more formatting to the data received
$datasets = array(); $year = date("Y",time()); $count=0; foreach ($user_outlets as $key) { $legends[$key]['outlet'] = Outlets::model()->currentOutlet($key)->description; $legends[$key]['color'] = $strokes[$count]; $datasets[$count] = array( "fillColor" => "rgba(220,220,220,0.5)", "strokeColor" => $strokes[$count], //"rgba(220,220,120,1)", "pointColor" => "rgba(220,220,220,1)", "pointStrokeColor" => "#ffffff", ); unset($tmp); for ($i=1;$i<=12;$i++) { $totals = SalesStatement::model()->total($key, $i, $year); if(($totals) && (count($totals)>0)) { $tmp[] = round($totals['5']['amount']); } } $datasets[$count]['data'] = $tmp; $count++; }and pass it to the chart like this:
<?php $this->widget( 'chartjs.widgets.ChLine', array( 'width' => 775, 'height' => 400, 'labels' => array("January","February","March","April","May","June","July","August","September","October","November","December"), 'datasets' => $datasets, 'options' => $options ) ); ?>showing values on hover on the points min line chart
can we show the values of the points on hovering on the points in line chart
@bhawn
Unfortunately that is not part of the native chart.js library but there are solutions. Have a look at this stackoverflow post for mor information. http://stackoverflow.com/questions/20966817/how-to-add-text-inside-the-doughnut-chart-using-chart-js
scaleStartValue?
Is it possible to set scaleStartValue of a Bar chart or to define the scaling?
tips
how can i enable tooltips from Global chart configuration
upgrade
Thanks for this extension. It saved me lot of effort.
If I am right it uses ChartJs 0.1. Would it be possible to upgrade to version 0.2? Nice tooltips were added, which makes user experience much better in my opinion.
Thanks.
bar and line graphs with yii chartjs ext
How do i add the heading,the x and y-axis to yii chartjs,any assistance i shall appreciate
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.