yii-chartjs Extension to implement the ChartJS Library as widgets

  1. yii-chartjs Extension
  2. Changelog
  3. Installation

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()
            )
        ); 
    ?>
8 0
25 followers
3 508 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Developed by: MeiSign
Created on: Mar 26, 2013
Last updated: 5 years ago

Downloads

show all

Related Extensions