Chart designer using the Google Chart API

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.

<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:

<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.

< 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:

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’.

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.

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.