Archive of TideArt content.

Wed, Jan 23 2013 19:45:37 UTC

Making graphs with Google Charts

A lot of designers out there work with data. With big data becoming all the rage, managers, advertisers and others struggle to deal with a large amount of data, and what often happens is that data analysts need those designers to create good, visually pleasing presentations that illustrate their points. Sometimes this is done in a word processor or spreadsheet, but often this is for web sites or online work, and you may need to quickly create graphs, pie charts or other types of visual cues that illustrate a mountain of data. If you know a bit of HTML and JavaScript, one interesting tool you should know about is Google Charts. Here, we'll go over how to use this service to easily create visually pleasing charts and graphs.

Google Charts is a service available from the Google site for anyone to use. You don't need to subscribe or to authenticate yourself, and it doesn't matter where your data comes from. Often, you will have access to a database filled with data, or it could be in a CSV file, or even from a remote URL. Your job as a designer will likely be to take this raw data, and create a nice looking chart or graph. The first thing to do is to go through the many available graph types and pick the one you want between the pie, line or bar chart.

Once that's done, you can go to the corresponding documentation page to see examples of code and a list of all the options available to you. This is the code that you need to put in your HTML file in order to load the Google Chart tools:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>

Once that's done, you can start writing your JavaScript code inside of a script area. The process is usually always the same. First, you load the right type of chart, then you create an array containing your data, you set the options you want for your graphic, and finally you draw it. The way drawing is done simply means that the code will draw the chart inside of a div that is present on that page. Here is a simple example to draw the pie chart shown above:

google.load('visualization', '1.0', {'packages':['corechart']});
function drawChart()
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  ['Mushrooms', 3],
  ['Onions', 1],
  ['Olives', 1],
  ['Zucchini', 1],
  ['Pepperoni', 2]
  var options = {'title':'How Much Pizza I Ate Last Night', 'width':400, 'height':300};
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  chart.draw(data, options);

This code follows the steps specified above, and if you know JavaScript you can easily go through it and see what the steps are. Basically, to adapt it to your needs, you simply have to change what the data is inside of the addRows section, and change the labels in the addColumns section. Finally, once that code is done, you simply need to add the proper div, the container that will contain the actual chart, wherever you need it inside of your page:

<div id='chart_div'></div>

This was a very simple example of how to create a pie chart using Google Charts, but this system is very powerful, and once you get used to working with it, you will find out that you have a lot of options available to you. If you need to create interactive sites, blog posts, presentations, flyers, and so on, you may find out that having well done charts and graphs may bring your point across much easier than simple numbers.

Back to index

© 2007-2019 Patrick Lambert - All resources on this site are provided under the MIT License - You can contact me at: contact@dendory.net