Yii 1.1: yii-chartjs

Extension to implement the ChartJS Library as widgets
25 followers

yii-chartjs Extension

ChartJS

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

  1. Download this extension at my GitHub Repository: https://github.com/MeiSign/yii-chartjs

  2. Extract the yii-chartjs folder to the extension folder of your yii app (myApp/protected/extensions)

  3. Add to you main.php config (myApp/protected/config/main.php)

Yii::setPathOfAlias('chartjs', dirname(__FILE__).'/../extensions/yii-chartjs');
  1. Add in the component section of your main.php config (myApp/protected/config/main.php)
'components' => array(
    ...,
    'chartjs' => array('class' => 'chartjs.components.ChartJs'),
)
  1. Add in the preload section of your main.php config(myApp/protected/config/main.php)
'preload' => array(
            'chartjs'
        ),
  1. 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()
            )
        ); 
    ?>

Total 20 comments

#19411 report it
bcs56897 at 2015/06/24 03:30am
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

#18485 report it
speculatius at 2014/11/05 03:26am
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.

#18083 report it
Dmitrij at 2014/09/05 09:11am
tips

how can i enable tooltips from Global chart configuration

#17141 report it
brok at 2014/05/07 05:28am
scaleStartValue?

Is it possible to set scaleStartValue of a Bar chart or to define the scaling?

#15982 report it
MeiSign at 2014/01/07 03:37am
@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

#15953 report it
bhawin at 2014/01/03 06:51am
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

#15332 report it
lgastmans at 2013/10/29 07:21pm
database connection

@nkdos

I do this: I load my array with a call to the relevant model

$user_outlets = UserOutlets::model()->listUserOutlets();

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
    )
);
?>
#15305 report it
nkdos at 2013/10/26 03:05pm
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?

#15304 report it
MeiSign at 2013/10/26 02:34pm
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.

#15303 report it
nkdos at 2013/10/26 02:03pm
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.

#15284 report it
sepu at 2013/10/23 09:35am
Beutiful!

I use this extension for extend my extension: http://www.yiiframework.com/extension/googleanalyticscounter/

#14756 report it
P.A. at 2013/09/07 09:05am
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.

#14734 report it
MeiSign at 2013/09/06 10:16am
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.

#14722 report it
P.A. at 2013/09/06 12:05am
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.

#13674 report it
Sankalp Singha at 2013/06/16 02:41am
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.

#13571 report it
Chris83 at 2013/06/06 07:51pm
Nice work

This was perfect for one of our projects, thank you for the effort. You saved me a lot of time.

#13203 report it
lgastmans at 2013/05/13 09:38pm
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 :-)

#13183 report it
MeiSign at 2013/05/12 09:43am
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.

#13182 report it
lgastmans at 2013/05/12 08:05am
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?

#12912 report it
MeiSign at 2013/04/20 04:20am
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.

Leave a comment

Please to leave your comment.

Create extension