Click here to Skip to main content
15,861,125 members
Articles / Web Development / HTML

Chart designer using the Google Chart API

Rate me:
Please Sign up or sign in to vote.
2.43/5 (6 votes)
13 May 2008CPOL4 min read 35.9K   13   4
Chart designer is an application written in JavaScript that allows to create charts and graphs dynamically.

Image 1

Introduction

Chart designer is an online JavaScript application that allows you to create charts dynamically. Most of us use MS-Excel or MS-Word to create charts, which requires some knowledge of the tools. The chart designer provides you the same facility for easily creating charts. It is basically an implementation of the Google Chart API. Any one can create this kind of application for their use, because it provides great comfort and ease; you just have to provide the data for the chart and click a single button, and your desired chart will be ready for you. The image would be PNG formatted, so you can easily use it. Here is the application: www.chartdesigner.cjb.net.

Google Chart API basics

Google Chart API can dynamically generate charts which can be used by any web application. Variuos kinds of charts are available, like:

  • Line chart
  • Pie chart
  • Sparkline
  • Bar chart
  • Venn diagram
  • Scatter plot
  • Radar chart
  • Map
  • Googl-o-meter

The Google Chart API returns a PNG-format image in response to a URL. For each image type, you can specify the attributes such as size, colors, and labels. Dynamic generation of charts is the game of the following URL: http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World.

There are three mandatory attributes that must be provided for every chart:

chart type => cht
chart size  => chs
chart data => chd

and also a fourth parameter, the geographic area, which is only used in maps. For more details about the Google Chart API, visit: http://code.google.com/apis/chart/.

How do I use the Chart API

As I have mentioned above, all you have to do is to play with the URL. Let me explain what I have done step by step by step.

HTML code

In the HTML, I have a dropdown menu which contains all the chart types. On its onchage() event a function, the GenerateAttributes() method will be called, which will dynamically generate the attributes of the chart that is chosen by the user. The following code explains the construction of the combo box.

HTML
<select name="list" size="1" 
        class="style1" id="list" tabindex="0" 
        onchange=" GenerateAttributes()"  önfocus="help(4)">
  <option value="select">-Select One-</option>
  <option value="1"> Line Chart </option>
  <option value="2">Sparkline</option>
  <option value="3">Bar Chart</option>
  <option value="4">Pie Chart</option>
  <option value="5">Venn Diagram</option>
  <option value="6">Scatter Plot</option>
  <option value="7">Radar Chart</option>
  <option value="8">Map</option>
  <option value="9">Google-o-meter</option>
</select>

The controls for the chart data, size, and color are also used in the body section because there was no need to generate these text boxes dynamically as data, size (mandatory), and color are available for all charts.

The img tag is used to display the dynamically generated charts:

HTML
<img id="chart"/> 

The area specified by the div tag will contain all the HTML that would be generated when the GenerateAttributes() function will be called.

HTML
< div id="opt"> </div>

JavaScript code

From here, the real code starts. In the script, there are three functions: GenerateAttributes() which is called on the onchage event of the drop down menu, CreatChart() which is called on the onclick event of button, and the map() function which is called only when the user selects the map from the drop down. Dynamic generation of attributes are done by using innerHTML. The following code executes if the user selects line chart from the dropdown menu:

JavaScript
function GenerateAttributes()
{
    var list=document.getElementById('list')
            
    if(list[1].selected) // line
    {
        opt.innerHTML="*Line Chart Type:<br><input type=radio" + 
                      "  önclick=func1() name=line value=lc>multiple " + 
                      "data sets for multiple lines."
        opt.innerHTML=opt.innerHTML+"<br><input type=radio " + 
                      "önclick=func2() name=line value=lxy>pair " + 
                      "of data sets for each line. "        
    }
}

When the user checks the first radio button, a function func1() will be called that will set the type of the chart to ‘ lc’, or in the case of the second radio button selection, would be set to ‘lxy’.

JavaScript
function func1()
{ type="lc" }

function func2()
{ type="lxy" }

Like this, all the attributes that you want to generate dynamically can be implemented; make sure to globally define the variables that would be used by other functions. CreatChart() is executed on the onclick() event of the button. The values from the text boxes that are created in HTML are put into the variables color, size, and data. Note that the title variable which is defined globally contains the value from the textbox that is generated dynamically on user selection of the first element of the list. These variables are then passed to the source of the image.

JavaScript
function CreatChart()
{
    var color=ccolor.value
    var size=csizew.value+"x"+csizeh.value
    var data=cdata.value

    var list=document.getElementById('list')
    if(list[1].selected)
    {
        title=ctitle.value
        chart.src="http://chart.apis.google.com/chart?cht="+type+
                  "&chtt="+title+"&chco="+color+
                  "&chd=t:"+data+"&chs="+size+"";
    }
}

Thanks and apologies

I would like to thank Mr. Akber Zaidi who helped and encouraged me so much in completing this task. I would also like to apologize as I know there would be lots of mistakes in my code, but I am a beginner to JavaScript, and truly speaking, this is my first ever JavaScript code, so I haven’t made it professionally. And, I also haven’t implemented all of the functions and features of the Google Chart API. But, I have put all my efforts and energy in achieving my desired goal.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Pakistan Pakistan
Mehreen Ansari is a Computer Science & IT student from Pakistan. She likes to code in JavaScript and Asp.Net. Most of the times She does Web programming and enjoys to make complex tasks seem easy through friendly User Interface.

Comments and Discussions

 
General[My vote of 2] good but only for IE Pin
Member 790709914-May-11 11:42
Member 790709914-May-11 11:42 
GeneralInteresting but Pin
Jaime Olivares4-Nov-10 12:49
Jaime Olivares4-Nov-10 12:49 
Generalnice article mahreen.. Pin
Mohamad Kaifi19-Sep-08 0:25
Mohamad Kaifi19-Sep-08 0:25 
General[Message Removed] Pin
Mojtaba Vali13-May-08 21:27
Mojtaba Vali13-May-08 21:27 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.