Chart Widget using AmCharts

Hi, I create simple widget to create Graphics usgin amChart called CAmChartWidget, you can create Bar, Column, Area, Pie Chart from a CDataProvider

Example Code:





$arrayData = new CActiveDataProvider('Model');

$arrayData = $arrayData->getData();




// Line & Colum Graph in the same Chart

$this->widget('application.extensions.amcharts.CAmChartWidget', 

					array(

						'width' => 700,

						'height' => 400,

						'Chart'=>array(

									'dataProvider'=>$arrayData,

									'categoryField' => 'DescriptionA'

									),

						'Graphs'=>array(

								array(

									'valueField' => 'value1',

									'title'=>'Value',

									'type' => 'bar'

								),

								array(

									'valueField' => 'value2',

									'title'=>'Value',

									'type' => 'line',

									'fillColors'=>'Transparent',

									'fillAlphas'=>'0',

									'lineColor'=>'#EE2299',

									'bullet'=>'round'

								)),

						'CategoryAxis'=>array(

									'title'=>'Model Name'

									),

						'ValueAxis'=>array(

									'title'=>'Value')

	)); 

	

//Pie Chart

$this->widget('application.extensions.amcharts.CAmChartWidget',

			array(

					'width' => 700,

					'height' => 400,

					'Chart'=>array(

							'dataProvider'=>$arrayData,

							'titleField' => 'Description',

							'valueField' => 'value1',

							'type' => 'pie'

					)

			));



Google Prject Code: yii-amchart-widget

You are free to use, distribute and modify

If you have any improvement contact me :wink:

best regards

how to use it ?

Hi, you can follow this instructions http://www.yiiframework.com/extension/eamchartwidget/

controller

    public function actionAmChart()


    {


        $dataProvider = new CActiveDataProvider('OlimpicMedals');


        $dataProvider = $dataProvider->getData();


        


        $this->render('AmChart',array('dataProvider'=>$dataProvider));


    }

view

$this->widget(‘ext.amcharts.EAmChartWidget’,

                array(


                    'width' => 700, // width of the Chart


                    'height' => 400, // height of the chart


                    'chart'=>array(// collections of grpah to display into the chart


                                'dataProvider'=>$dataProvider, // DataProvider


                                'categoryField' => 'value' // Field of the DataProvider to set on the X Axis


                                ),


                    'graphs'=>array(


                            array(


                                'valueField' => '1', // Field of the DataProvider to set the Y Axis


                                'title'=>'Value', // Title of the , used on the Legend


                                'type' => 'bar' // Type of Graph


                            ),


                            array(


                                'valueField' => 'SilverMedals',


                                'title'=>'Value',


                                'type' => 'line',


                                'fillColors'=>'Transparent',


                                'fillAlphas'=>'0',


                                'lineColor'=>'#EE2299',


                                'bullet'=>'round'


                            )),


                    'categoryAxis'=>array(


                                'title'=>'Species Name'


                                ),


                    'valueAxis'=>array(


                                'title'=>'Identifier')


));

Hi again, Can you post the error message that you get?

nothing but the layout

for example


– Table structure for chart_data


DROP TABLE IF EXISTS chart_data;

CREATE TABLE chart_data (

id bigint(20) NOT NULL AUTO_INCREMENT,

time time DEFAULT NULL,

data float DEFAULT NULL,

PRIMARY KEY (id)

) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;


– Records of chart_data


INSERT INTO chart_data VALUES (‘1’, ‘14:27:55’, ‘2’);

INSERT INTO chart_data VALUES (‘2’, ‘14:28:43’, ‘4’);

INSERT INTO chart_data VALUES (‘3’, ‘14:28:55’, ‘1’);

INSERT INTO chart_data VALUES (‘4’, ‘14:29:18’, ‘8’);

INSERT INTO chart_data VALUES (‘5’, ‘14:29:31’, ‘5’);

How to use the eamchartwidget ? thank u very much

Hi again, i made some changes now you can use any dataProvider that use CActiveDataProvider or IDataProvider

  • Download the 1.1 Verison from here.

  • now you don’t need to send the $dataProvider->getData(), simply send the $dataProvider

Example using your table model:




<?php


// CONTROLLER


/**

*Using a CActiveDataProvider

**/

//$dataProvider = new CActiveDataProvider('ChartData');


/**

*Using a CArrayDataProvider

**/


//SQL Query

		

		$oDbConnection = Yii::app()->db; // Getting database connection (config/main.php has to set up database

		// Here you will use your complex sql query using a string or other yii ways to create your query

		$oCommand = $oDbConnection->createCommand('SELECT * FROM chart_data');

		

		$oCDbDataReader = $oCommand->queryAll(); // Run query and get all results in a CDbDataReader


// Set DataProvider

		$dataProvider=new CArrayDataProvider($oCDbDataReader, array(

				'keyField' => 'ID'

		));


$this->render('AmChart',array('dataProvider'=>$dataProvider));




//VIEW


$this->widget('ext.amcharts.EAmChartWidget', 

					array(

						'width' => 700,

						'height' => 400,

						'chart'=>array(

									'dataProvider'=>$dataProvider,

									'categoryField' => 'time'

									),

						'chartType' => "AmSerialChart",

						'graphs'=>array(

									array(

										'valueField' => 'data',

										'title'=>'Data graph',

										'type' => 'column'

									)),

						'categoryAxis'=>array(

									'title'=>'Time'

									),

						'valueAxis'=>array(

									'title'=>'Data')

	));


?>



Thanks a lot for your questions, there are very helpful to improve the widget

it’s working! great, thx

if i want to make the chart like this [size="3"]http://www.amcharts.com/javascript/line-chart-with-date-based-data/[/size]

how can i do ?

the categoryField I am using for the X-Axis is referenced to another table. how would I show it like in cgridview:


'columns'=>array(

       array(

		...

		'value'=>'$data->ForeignTable->columname',

		...

	     ),

      )

Thank you!

Hi again, some things like SCROLLBAR & CURSOR are not tested yet, in theory you can do it, i don’t have enough time to release the solution, in the next months i’m going to make same improvements on the widget

Sorry

Hi, the foreign relation will be implemented in the future