[luckas]

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 ;-)

best regards

[evoself]

how to use it ?

[luckas]

evoself, on 19 August 2012 - 10:07 AM, said:

how to use it ?

Hi, you can follow this instructions http://www.yiiframew...eamchartwidget/

[evoself]

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')
));

[luckas]

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

[evoself]

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

[luckas]

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

evoself, on 21 August 2012 - 08:44 PM, said:

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

[evoself]

it's working! great, thx

if i want to make the chart like this http://www.amcharts....ate-based-data/

how can i do ?

[Owen Lopez]

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!

[luckas]

evoself, on 23 August 2012 - 08:30 PM, said:

it's working! great, thx

if i want to make the chart like this http://www.amcharts....ate-based-data/

how can i do ?

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

[luckas]

Owen Lopez, on 04 September 2012 - 01:57 AM, said:

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, the foreign relation will be implemented in the future