Google Charts

Before getting into Google Charts and examples it is good to know what are charts and how it is useful.

“A picture is worth a thousand words” means that a complex things/idea can be conveyed easily with just a single still picture. Charts can also be used in same way, where it can help conveying information with just one box where it can take pages to describe with text and numbers.

What is chart?

A chart of graph is graphical representation of data and nothing else. Think of when you’re presenting and explaining data. You can show tables with figures, numbers, percentages and relationships. However, the chances are that your point will be lost if you rely on these alone.

But if you use a chart or a graph then all thing will make sense suddenly because charts itself can describe the information in easier manner. It helps understanding the data easily and quickly.

Deciding to show information using chart is also not enough, as there are many kind of charts/graphs available. You also have to decide what kind of chart will be suitable for the information you like to share with your audience/peoples. Few common charts are:

Area chart
Bar chart
Bubble chart
Pie chart
Column chart
Line chart
Diff chart
Table chart

It provides easier way to visualize information on your website using their services. Google is providing wide range of charts starting from simple line charts to complex tree maps. If you are working on analytics project and you like to show big information/data using rich chart system then Google charts is the best option. Google charts is a powerful chart tools yet very easy to implement.

Here is the list of common charts with details on how to integrate using their JavaScript API.

1. Bar Chart (See bar chart on Google Charts)

Google Charts - Bar Chart — Google Charts – Bar Chart

function drawBarChart() {
var data = google.visualization.arrayToDataTable([
[&#039;Source&#039;, &#039;Percentage&#039;, {role: &#039;style&#039;}],
[&#039;Services&#039;, 50, &#039;#b87333&#039;], // RGB value
[&#039;Mobiles&#039;, 20, &#039;silver&#039;], // English color name
[&#039;Computers&#039;, 20, &#039;gold&#039;],
[&#039;Others&#039;, 10, &#039;color: #e5e4e2&#039;], // CSS-style declaration
]);

var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{calc: &quot;stringify&quot;,
sourceColumn: 1,
type: &quot;string&quot;,
role: &quot;annotation&quot;},
2]);

var options = {
title: &quot;Company Sales&quot;,
width: 600,
height: 400,
bar: {groupWidth: &quot;95%&quot;},
legend: {position: &quot;none&quot;},
};
var chart = new google.visualization.BarChart(
document.getElementById(&quot;bar_chart_div&quot;));
chart.draw(view, options);
}

2. Pie Chart (See pie chart on Google Charts)

Google Charts - Pie Chart — Google Charts – Pie Chart

function drawPieChart() {

// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn(&#039;string&#039;, &#039;Source&#039;);
data.addColumn(&#039;number&#039;, &#039;Percentage&#039;);
data.addRows([
[&#039;Services&#039;, 50],
[&#039;Mobiles&#039;, 20],
[&#039;Computers&#039;, 20],
[&#039;Others&#039;, 10],
]);

// Set chart options
var options = {&#039;title&#039;: &#039;Company Sales&#039;,
&#039;width&#039;: 400,
&#039;height&#039;: 300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(
document.getElementById(&#039;pie_chart_div&#039;));
chart.draw(data, options);
}

3. Column Chart (See column chart on Google Charts)

Google Charts - Column Chart — Google Charts – Column Chart

function drawColumnChart() {

var data = google.visualization.arrayToDataTable([
[&#039;Source&#039;, &#039;Percentage&#039;, {role: &#039;style&#039;}],
[&#039;Services&#039;, 50, &#039;#b87333&#039;], // RGB value
[&#039;Mobiles&#039;, 20, &#039;silver&#039;], // English color name
[&#039;Computers&#039;, 20, &#039;gold&#039;],
[&#039;Others&#039;, 10, &#039;color: #e5e4e2&#039;], // CSS-style declaration
]);

var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{calc: &quot;stringify&quot;,
sourceColumn: 1,
type: &quot;string&quot;,
role: &quot;annotation&quot;},
2]);

var options = {
title: &quot;Company Sales&quot;,
width: 600,
height: 400,
bar: {groupWidth: &quot;95%&quot;},
legend: {position: &quot;none&quot;},
};
var chart = new google.visualization.ColumnChart(
document.getElementById(&quot;column_chart_div&quot;));
chart.draw(view, options);
}

4. Line Chart (See line chart on Google Charts)

Google Charts - Line Chart — Google Charts – Line Chart

function drawLineChart() {

var data = google.visualization.arrayToDataTable([
[&#039;Year&#039;, &#039;Sales&#039;, &#039;Expenses&#039;],
[&#039;2004&#039;, 1000, 400],
[&#039;2005&#039;, 1170, 460],
[&#039;2006&#039;, 660, 1120],
[&#039;2007&#039;, 1030, 540]
]);

var options = {
width: 600,
height: 400,
title: &#039;Company Performance&#039;,
curveType: &#039;function&#039;,
legend: {position: &#039;bottom&#039;}
};

var chart = new google.visualization.LineChart(
document.getElementById(&#039;line_chart_div&#039;));

chart.draw(data, options);

}

5. Bubble Chart (See bubble chart on Google Charts)

Google Charts - Bubble Chart — Google Charts – Bubble Chart

function drawBubbleChart() {
var data = google.visualization.arrayToDataTable([
[&#039;ID&#039;, &#039;X&#039;, &#039;Y&#039;, &#039;Temperature&#039;],
[&#039;&#039;, 80, 167, 120],
[&#039;&#039;, 79, 136, 130],
[&#039;&#039;, 78, 184, 50],
[&#039;&#039;, 72, 278, 230],
[&#039;&#039;, 81, 200, 210],
[&#039;&#039;, 72, 170, 100],
[&#039;&#039;, 68, 477, 80]
]);

var options = {
title: &#039;Temperature Bubble Chart&#039;,
width: 600,
height: 400,
colorAxis: {colors: [&#039;yellow&#039;, &#039;red&#039;]}
};

var chart = new google.visualization.BubbleChart(
document.getElementById(&#039;bubble_chart_div&#039;));
chart.draw(data, options);
}

6. Donut Chart (See donut chart on Google Charts)

Google Charts - Donut Chart — Google Charts – Donut Chart

function drawDonutChart() {

var data = new google.visualization.DataTable();
data.addColumn(&#039;string&#039;, &#039;Source&#039;);
data.addColumn(&#039;number&#039;, &#039;Percentage&#039;);
data.addRows([
[&#039;Services&#039;, 50],
[&#039;Mobiles&#039;, 20],
[&#039;Computers&#039;, 20],
[&#039;Others&#039;, 10],
]);

var options = {&#039;title&#039;: &#039;Company Sales&#039;,
&#039;width&#039;: 400,
&#039;height&#039;: 300,
pieHole: 0.4,
};

var chart = new google.visualization.PieChart(
document.getElementById(&#039;donut_chart_div&#039;));
chart.draw(data, options);
}

7. Table Chart (See table chart on Google Charts)

Google Charts - Table — Google Charts – Table

function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn(&#039;string&#039;, &#039;Source&#039;);
data.addColumn(&#039;number&#039;, &#039;Percentage&#039;);
data.addColumn(&#039;string&#039;, &#039;Year&#039;);
data.addRows([
[&#039;Services&#039;, {v: 50, f: &#039;50%&#039;}, &#039;2015&#039;],
[&#039;Mobiles&#039;, {v: 20, f: &#039;20%&#039;}, &#039;2015&#039;],
[&#039;Computers&#039;, {v: 20, f: &#039;20%&#039;}, &#039;2015&#039;],
[&#039;Others&#039;, {v: 10, f: &#039;10%&#039;}, &#039;2015&#039;],
[&#039;Services&#039;, {v: 40, f: &#039;40%&#039;}, &#039;2014&#039;],
[&#039;Mobiles&#039;, {v: 30, f: &#039;30%&#039;}, &#039;2014&#039;],
[&#039;Computers&#039;, {v: 10, f: &#039;10%&#039;}, &#039;2014&#039;],
[&#039;Others&#039;, {v: 20, f: &#039;20%&#039;}, &#039;2014&#039;],
]);

var table = new google.visualization.Table(
document.getElementById(&#039;table_chart_div&#039;));

table.draw(data, {showRowNumber: true, width: &#039;50%&#039;, height: &#039;50%&#039;});
}

8. Candlestick – Waterfall Chart (See waterfall chart on Google Charts)

Google Charts - Candlestick - Waterfall Chart — Google Charts – Candlestick – Waterfall Chart

function drawCandlestickChart() {
var data = google.visualization.arrayToDataTable([
[&#039;Mon&#039;, 28, 28, 38, 38],
[&#039;Tue&#039;, 38, 38, 55, 55],
[&#039;Wed&#039;, 55, 55, 77, 77],
[&#039;Thu&#039;, 77, 77, 66, 66],
[&#039;Fri&#039;, 66, 66, 22, 22]
], true);

var options = {
legend: &#039;none&#039;,
&#039;width&#039;: 400,
&#039;height&#039;: 300,
bar: {groupWidth: &#039;100%&#039;}, // Remove space between bars.
candlestick: {
fallingColor: {strokeWidth: 0, fill: &#039;#a52714&#039;}, // red
risingColor: {strokeWidth: 0, fill: &#039;#0f9d58&#039;} // green
}
};

var chart = new google.visualization.CandlestickChart(
document.getElementById(&#039;candlestick_chart_div&#039;));
chart.draw(data, options);
}

9. Histogram Chart (See histogram chart on Google Charts)

Google Charts - Histogram Chart — Histogram Chart

function drawHistogramChart() {
var data = google.visualization.arrayToDataTable([
[&#039;Source&#039;, &#039;Percentage&#039;],
[&#039;Computers&#039;, 15],
[&#039;Mobiles&#039;, 5],
[&#039;Services&#039;, 25],
[&#039;Call Centers&#039;, 35],
[&#039;Market&#039;, 5],
[&#039;Advertisements&#039;, 5],
[&#039;Others&#039;, 10],
]);

var options = {
title: &#039;Company Sales&#039;,
&#039;width&#039;: 400,
&#039;height&#039;: 300,
legend: {position: &#039;none&#039;},
};

var chart = new google.visualization.Histogram(
document.getElementById(&#039;histogram_chart_div&#039;));
chart.draw(data, options);
}

10. WordTree Chart (See wordtree chart on Google Charts)

WordTree view with Weight

function drawWordTree() {
var data = google.visualization.arrayToDataTable(
[[&#039;Phrases&#039;],
[&#039;JavaScript is language&#039;],
[&#039;JavaScript is scripting language&#039;],
[&#039;JavaScript is popular&#039;],
[&#039;JavaScript is client side scripting language&#039;],
[&#039;JavaScript is base of jQuery&#039;],
[&#039;JavaScript is base of Prototype&#039;],
[&#039;JavaScript is base of Angular&#039;],
[&#039;JavaScript is base of Backbone&#039;],
]
);

var options = {
wordtree: {
format: &#039;implicit&#039;,
word: &#039;JavaScript&#039;
}
};

var chart = new google.visualization.WordTree(
document.getElementById(&#039;wordtree_chart_div&#039;));
chart.draw(data, options);
}

Download complete source code for the charts shown above: Download Source

I’ve also wrote one WordPress plugin using many of these charts. It is simple WordPress plugin that embeds charts in your blog and shows the usage and numbers related to blog, category, page, comment, tag, user and CPT. This plugin allow you to see how your blog is using all these elements. All the stats shown using Google Chats including Pie Chart, Google Column Charts and Google Table.

Plugin URL: WP Show Stats – Personal dashboard for WordPress admin

More information: WP Show Stats – Features and how to use guide

There are plenty of other charts as well which can be used according to different requirements. Here is the list of useful links for other demos and documentation for Google Charts.

Useful links for Google Charts

Charts: https://developers.google.com/chart/
Demos: https://developers.google.com/chart/interactive/docs/gallery
Google charts Development API reference: https://developers.google.com/chart/interactive/docs/reference
Charts Forum: https://groups.google.com/forum/#!forum/google-visualization-api

Please add comment or drop me an email if you need any kind of help or having trouble in implementing charts.

Follow us

Google Charts – How to use it for your next analytics project