Louisville Web Design - Online Stores
Marketing - Advertising
Payment Processing Solutions
Business Integration - Intranet Portal
Custom Software - Mobile Apps
Increase Your Profit Margin

Website Design Company

Business Integration Made Easy!

Phone: +1 (502) 439-8692
This email address is being protected from spambots. You need JavaScript enabled to view it.

How to Use Google Charts to Graph Data

I use Google Charts to Graph data.  Google Chart has a great set of Javascript classes that allows you to easily show many different types of charts.

The tutorial uses the Google Pie Chart.

The 1st step is to load the Google Chart Class.

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

 I use the MooTools Request class to perform another AJAX call to get data from the database

function GetChartData(){
	var myRequest = new Request({
		url: '../phpfiles/GetDatabaseDataSummary.php',
		method: 'post',
		useSpinner: true,
		spinnerTarget:'website_table',
		spinnerOptions: { message: 'Getting Data...' },
		onRequest: function(){
		},
		onSuccess: function(responseText){
			//alert(responseText);
			var status_arr = eval("(" + responseText + ")");
			AddChart(status_arr);
		},
		onFailure: function(){
			alert("A problem occured loading jobs.");
		}
		});
	strSend = "";
	myRequest.send(strSend);
}

 

 I use a Javascrip function called AddChart(status_arr) to show the Google Pie Chart

function AddChart(Rows){
    var options1 = { title: 'Marketing Sources Summary',
            width:450 };
	var data_region = new google.visualization.DataTable();
	
	data_region.addColumn('string', 'Region');
	data_region.addColumn('number', 'Total Sales');
	var i = 0;
	for (i = 0; i < Rows.length; i++){
		data_region.addRow([Rows[i]['type'], Number(Rows[i]['total'])]);
	}
            
    var chart = new google.visualization.PieChart(document.getElementById('chart_region_div'));
    chart.draw(data_region, options1);
}

 

Website Design by iMarketing Solutions