[Solved] Whvisualizationchart Google Chart

I have a a Google Chart on my form :



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




	$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(






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

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


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









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

Chart widget is from Yiiwheels

And I have looked here a bit

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

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"]});


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



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

and the following code in the ‘success’ function:



				if (data.length>1) {

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

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



		    	else {

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