Social Networks

Here in this tutorial we will learn to create the Google Chart quickly using Google Chart API, Javascript and simple HTML Form. Basically we will create a Google chart generator  which will help to create all the type of the chart on the fly. Chart is the graphical presentation of the data in the different symbols like Bar, line, Pie etc. Using chart you can present the data in different dimension visually. I tried so many Chart API, Google is the best one. Jon Winstanley  created very interesting form to generate the charts but source ode is not available there, here you can download the Google Chart Generator source code and customize as per your requirement,with free source code you will find the working Google Chart Generator Demo also.

You may like some good Google related articles –

Login Using Google Account | Google OPENID Login

How to Appear Higher on Google Search Results [INFOGRAPHIC]

Google Chart Generator Tutorial with Source Code and working Demo

google chart generator

Download Free Google Chart Generator Source code:

Download Google Chart Generator Source Code

See working Chart Generator Demo:

 

Google Chart Generator Demo

 

Implementation:

Javacsript:

	function selText()
		{
		document.getElementById("chart_link").select();
		}
	function gcg_create_link()
	{
	// Chart Type
	type=document.forms[0].gcg_charttype;
	charttype="cht=p3";
	for (i=0;i<type.length;++ i)
	{
		 if (type[i].checked)
		{
			charttype="cht=" + type[i].value;
		}
	}

// Chart Size

	chart_width = document.forms[0].gcg_width.value;
	chart_height = document.forms[0].gcg_height.value;
	// Chart Background
	chart_bg = document.forms[0].gcg_bgcolor.value;
	if (chart_bg != "")
	{
		chart_bg = "&chf=bg,s," + chart_bg;
	}
	// Chart Data
	chartdata=document.forms[0].gcg_chartdata;
	var data = new Array();
	{
	for (i=0;i<chartdata.length;i++)
		if (chartdata[i].value) {
		data[i] = chartdata[i].value;
	  	}
	}

// Chart Data Colors

	chartdata_colors=document.forms[0].gcg_data_color;
	var chart_colors= new Array();
	for (i=0;i<chartdata_colors.length;i++)
	{
	  if (chartdata_colors[i].value)
	  {	  
		chart_colors[i] = chartdata_colors[i].value;
		}
	}
	var data_color_string = chart_colors.join("|");
	if (data_color_string != "") {
	data_color_string = "&chco=" + data_color_string;
	}

// Chart Labels

	chartlabels=document.forms[0].gcg_labels;
	var labels = new Array();
	for (i=0;i<chartlabels.length;i++)
	{
	  if (chartlabels[i].value)
	  {
		labels[i] = chartlabels[i].value;
		}
	}
	var labelstring = labels.join("|");
	if ((labelstring != "") && (charttype != "cht=lc")){
	labelstring = "&chl=" + labelstring;
	} else if ((labelstring != "") && ((charttype == "cht=lc") || (charttype == "cht=bvs"))){
	labelstring = "&chxt=x&chxl=0:|" + labelstring;
	}

// Show Chart Data Point Labels

	if (document.forms[0].gcg_chart_point_labels.checked) {
		data_point_labels = "&chm=N*f0*,000000,0,-1,11";
	}
	else {
	data_point_labels = "";
	}

// Chart Title

	chart_title_line_1 = document.forms[0].gcg_title_line1.value;
	if (chart_title_line_1 !="") {
		chart_title_line_1 = chart_title_line_1.replace(" ", "+");
		title="&chtt=" + chart_title_line_1;
		chart_title_line_2 = document.forms[0].gcg_title_line2.value;
			if (chart_title_line_2 !="") {
				chart_title_line_2 = chart_title_line_2.replace(" ", "+");
				title=title + "|" + chart_title_line_2;
			}
	}
	else {
	chart_title_line_2 = document.forms[0].gcg_title_line2.value;
	if (chart_title_line_2 !="") {
			alert("Chart Title Line 1 is empty.");
		}
		title="";
	}
 
	if (title !=""){
		chart_title_font_color = document.forms[0].gcg_title_font_color.value;
		chart_title_font_size = document.forms[0].gcg_title_font_size.value;
		if (chart_title_font_color != "") 
		{
			if (chart_title_font_size != "") 
				{
				title_font="&chts=" + chart_title_font_color + "," + chart_title_font_size;
				}
			else
				{
				title_font="&chts=" + chart_title_font_color;
				}
		}
		else 
		{
				title_font="";
				if (chart_title_font_size != "")
				{
				alert("Chart Tile must have a color if size is specified.");
				}
		}
	}

//Generate the Chart Image

	document.getElementById("chart_link").value="http://chart.apis.google.com/chart?" + charttype + "&chs=" + chart_width + "x" + chart_height + chart_bg + "&chd=t:" + data + 
 
data_color_string + data_point_labels + labelstring + title + title_font;
	document.getElementById("chart").src=document.getElementById("chart_link").value;

HTML Code

<div class="postbox" id="chart_box">
<h3 class="hndle" id="chart_box_hndle">Google Chart</h3>
&nbsp;
<div class="inside" id="chart_box_inside">
<img id="chart" alt="" src="http://chart.apis.google.com/chart?cht=lc&amp;chs=500x300&amp;chf=bg,s,E7E7E7&amp;chd=t:41,100,22,72,26&amp;chm=N*f0*,000000,0,-1,11&amp;chxt=x&amp;chxl=0:|Mon|Tue|Wed|Thur|Fri&amp;chtt=Daily+Downloads|for+this plugin&amp;chts=000000,16" />
<input id="chart_link" type="text" size="50" value="copy this code" />
<input class="btn btn-primary btn-giant" onclick="gcg_create_link()" type="button" value="Generate Chart" /> 
<input class="btn btn-primary btn-giant" onclick="selText()" type="button" value="select" />
</div>
</div>

You can download the complete source code and customize yourself. I have used the Bar Chart, Line Chart, Pie Chart nd Google-o-Meter as the chart type, you can add other types also please go though the Google Chart Tools for more options.

Leave a Reply

Your email address will not be published. Required fields are marked *

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>