0

Visualize Your Data Online With Google Charts




Wouldn't it be nice to stand up some simple, live visualization tools for your website? Even better, what if it was free and easy to use?

You can with Google Charts! It's a simple Javascript library for visualizing your data online. All you have to do is add some data and start putting up maps, charts, graphs, and other useful data visualization tools.

Sound like something you would like to use? Read on!


Typically, if I needed to visualize my data I would use Microsoft's Excel to build a quick graph and export an image. Those more professional than I could use some extensive third-party libraries to program a display or even build their own via an Adobe product. This leads us to an important point.

Why should I use Google Charts instead of another tool?


  1. Using a chart in Excel will get the job done, but if your data is elsewhere it's probably going to cause you pain. Google lets you use data hosted on its servers and import it.

  2. Even if your data is in Excel, visualizing data there will only get you a static image that doesn't update and isn't interactive.

  3. Google's Charts are all live online! That means you can constantly update the data and your visualization will update with it. Set it up once and let it go!

Still interested? Good. Let's make some charts. We'll do a simple pie chart, but there are more advanced containers available like timelines. You can find them all here. The code we'll use is taken from the Google's quick start page example.

First thing's first: the data. Let's import Google's API and reference some data.

Import Google's API by using the code below.
<script src="https://www.google.com/jsapi"></script>
<script>

// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});

// Set a callback to run when the API is loaded.
google.setOnLoadCallback(drawChart);

 This also loads the "corechart" package, which is what we'll use for our Pie Chart. You can find the other packages and chart types here. The line after that sets the callback to our "drawChart" function that we'll define later.

Great! Now we're ready to start making charts. Next, we need some data for the chart. We will define a table manually and put some data in it, but that's not feasible for many uses. If you want to use a file with data in it, you need to use queries to get it from its internet location.

To load the data into our code, we create an empty data table and put some things in it.

We're going to put this data inside our brand-new "drawChart" function so it can be drawn when the page loads.
function drawChart() {

  var data = new google.visualization.DataTable();
Now, let's make the pie chart!

// Fill the table with some data


data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
]);


// Set chart options
var options = {'title':'Types of Food',
               'width':400,
               'height':300};

// Make the chart
var chart = new google.visualization.PieChart(
                document.getElementById('chart_div'));

// Draw it!
chart.draw(data, options);

} // This ends our drawChart function

</script>
We're almost there, but we're not done yet. Now we need a "div" for the chart to go in. Put an empty div after the code above with an id of "chart_div".

Now, your pie chart should look like this:


And we're done! That was just a simple example, but you get the idea of how it works. There are much more complex things you can do here, from querying external data sources to customizing the look and feel of the visualizations. That's far too much to get into today, but by all means go and learn!

Here are some links for the adventurous programmer.


Join Us For Our Next GDG Meeting!
  • More with HTML5 and SVG
  • Where: Mercer Computer Science Building ( map )
  • When: November 19th, 2013. Networking starts at 6:30pm. Talks will begin by 7:00pm.
  • During this session, we will be learning about the new things we can do with HTML5, SVG and CSS3.

Unknown - PERMALINK

Leave a Reply