Everyone likes pie (apparently)

Following on from my post yesterday (or was it early this morning..?), here’s a slight modification for those wanting pie charts.    So back to my original data, we have to choose one data set to graph since pie charts don’t do well with multiple dimensions.   I have also cut down on the number of data points so the chart doesn’t become too busy (translation: useless).  Here’s the end result.

It could do with some tidying up – perhaps make the chart area smaller and the legend more meaningful with a title but you get the idea.  The Google framework is excellent for putting these sorts of things together.  Have a look at the Google page for this tool:

So how did we get there?   The full code is below, but the interesting parts I’ll walk through next.  The necessary changes are:

  • Line 30: Modified the data set to have only two “axis of data” headings (not to be confused with the “axis of evil” – that’s Excel).
  • Line 31 to 36: Modified data itself
  • Line 43: If you want 3D rather than 2D charts, put this setting in
  • Line 49: Define the chart type as PieChart and make sure you give it a decent label.
  • Line 60: Make sure you refer back to that reference label you used on line 49

So that’s it.  What next?  I love the GeoCharts but for my uses, I can’t think of a practical need for them.  It is very neat though and when combined with the SQL graph tool Carlos Sierra posted yesterday (http://carlos-sierra.net/2014/07/28/free-script-to-generate-a-line-chart-on-html/), you can visualise a lot of good data very quickly.

Resources:

So, enjoy these new tools and methods.  For the record, I prefer real fruit cake to pie.


<html>
<!– $Header: line_chart.sql 2014-07-27 carlos.sierra $ –>
<head>
<title>pie_chart.html</title>

<style type=”text/css”>
body {font:10pt Arial,Helvetica,Geneva,sans-serif; color:black; background:white;}
h1 {font-size:16pt; font-weight:bold; color:#336699; border-bottom:1px solid #cccc99; margin-top:0pt; margin-bottom:0pt; padding:0px 0px 0px 0px;}
h2 {font-size:14pt; font-weight:bold; color:#336699; margin-top:4pt; margin-bottom:0pt;}
h3 {font-size:12pt; font-weight:bold; color:#336699; margin-top:4pt; margin-bottom:0pt;}
pre {font:8pt monospace;Monaco,”Courier New”,Courier;}
a {color:#663300;}
table {font-size:8pt; border_collapse:collapse; empty-cells:show; white-space:nowrap; border:1px solid #cccc99;}
li {font-size:8pt; color:black; padding-left:4px; padding-right:4px; padding-bottom:2px;}
th {font-weight:bold; color:white; background:#0066CC; padding-left:4px; padding-right:4px; padding-bottom:2px;}
td {color:black; background:#fcfcf0; vertical-align:top; border:1px solid #cccc99;}
td.c {text-align:center;}
font.n {font-size:8pt; font-style:italic; color:#336699;}
font.f {font-size:8pt; color:#999999; border-top:1px solid #cccc99; margin-top:30pt;}
</style>

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script&gt;
<script type=”text/javascript”>
google.load(“visualization”, “1”, {packages:[“corechart”]})
google.setOnLoadCallback(drawChart)

function drawChart() {
var data = google.visualization.arrayToDataTable([
[‘Hour’,’Instance1′]
,[‘0:00’,488]
,[‘1:00’,488]
,[‘2:00’,816]
,[‘3:00’,605]
,[‘4:00’,831]
,[‘5:00’,475]
])
var options = {
backgroundColor: {fill: ‘#fcfcf0’, stroke: ‘#336699’, strokeWidth: 1},
title: ‘Swap Out Data by Hour’,
is3D: true,
titleTextStyle: {fontSize: 16, bold: false},
legend: {position: ‘right’, textStyle: {fontSize: 12}},
tooltip: {textStyle: {fontSize: 10}}
}

var chart = new google.visualization.PieChart(document.getElementById(‘piechart_3d’))
chart.draw(data, options)
}

</script>
</head>
<body>
<h1>Swap Out Volume by hour</h1>
<br>This line chart is an aggregate per hour.
<br>Add comments here.
<br>.
<div id=”piechart_3d” style=”width: 900px; height: 500px;”></div>
<font class=”n”>Notes:</font>
<font class=”n”><br>1) Drag to Zoom, and right click to reset Chart.</font>
<font class=”n”><br>2) Some other note.</font>
<font class=”n”></font>
<font class=”n”></font>
<br>
<font class=”f”>This is a sample line chart report.</font>
</body>
</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s