[Solved] Whvisualizationchart Google Chart

Yii 1.1 General Discussion
1

I have a a Google Chart on my form :




	$this->widget('yiiwheels.widgets.google.WhVisualizationChart', 

		array(

			'visualization' => 'BarChart',

			'data' => $data,

        	'options' => array(

        		'title' => 'Nationalities that started their Newcomer period this year',

				'legend' => 'left',

				'is3D' => true,

				'width'=> 600,

				'height'=> 600,

        	),

        	'htmlOptions' => array(

        		'id' => 'chart1',

        	)

    	)

	);

which is initialized with data:




	$sql= "

		SELECT n.Nationality, COUNT( a.ID ) AS total

		FROM (applicant a, nationality n)

		LEFT JOIN applicant_status apps ON (apps.ApplicantID = a.ID) 

		WHERE (a.NationalityID = n.ID) AND ((YEAR(apps.StartedOn)=2014) AND (apps.StatusID=3))

		GROUP BY a.NationalityID

		ORDER BY n.Nationality";


	$connection=Yii::app()->db;

	$command=$connection->createCommand($sql);

	$dataReader=$command->query();


	$data = array();

	$data[] = array('Nationality', 'Quantity', array('role'=>'style'));




	while(($row=$dataReader->read())!==false) {

		$data[] = array($row['Nationality']." (".$row['total'].")", intval($row['total']), 'stroke-color: #0050FF; stroke-opacity: 0.6; stroke-width: 2; fill-color: #76A7FA; fill-opacity: 0.2');

	}

Works fine up to here. Now I would like to refresh this chart when the user changes values:




	echo TbHtml::dropDownList('inputStatus', '', $statuses);

	echo TbHtml::textField('inputYear', date('Y'), array('placeholder' => 'Year', 'size' => TbHtml::INPUT_SIZE_SMALL));

	echo " ";


	echo TbHtml::ajaxButton(

    	'Refresh',

    	array('statistics/processData'),

    	array(

    		'dataType'=>'json',

    		'type'=>'post',

			'url' => CController::createUrl('statistics/processData'),

			'data' => 'js:{"status": $("#inputStatus").val(), "year": $("#inputYear").val() }',

			'success'=>"js:function(vals){

				$('#chart1').load(); // PROBLEM IS HERE

			}",

    	),

    	array(

    		'id'=>'someID',

    		'color'=>TbHtml::BUTTON_COLOR_DEFAULT,

    		'size'=>TbHtml::BUTTON_SIZE_DEFAULT,

    	)

	);

Not how to refresh the chart… Anybody have an idea?

Chart widget is from Yiiwheels

And I have looked here a bit

2

I guess you’re after the draw() method.

3

Thanks for your response Keith.

I did try the draw method, but it gave the following error in the Firebug console: "function not defined"

I did away with the Yiiwheels widget and got it working this way:




<script type="text/javascript" src="https://www.google.com/jsapi"></script>


<script type="text/javascript">


	google.load("visualization", "1", {packages:["corechart"]});


	google.setOnLoadCallback(drawChart);


	function drawChart(data) {

		if (typeof data !== 'undefined' && data !== null)

			var data = google.visualization.arrayToDataTable(<?php echo json_encode($data); ?>);


		var options = {

		  //colorAxis: {colors: ['yellow', 'red']},

		  title: "",

		  legend: 'left',

		  is3D: true,

		};


		var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

		chart.draw(data, options);

	}


</script>


<div id="chart_div" style="width: 900px; height: 500px;"></div>

and the following code in the ‘success’ function:




			'success'=>"js:function(data){

				//console.log(data.length);

				if (data.length>1) {

		    		var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

		    		var data = google.visualization.arrayToDataTable(data);

		    		chart.draw(data);

		    	}

		    	else {

		    		$('#chart_div').html('no data');

		    	}

			}",