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>

Categories: Database, ToolsTags: , , , , , , , , , , , ,

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

dbaonTap

What's #OnTapToday

globetrottingteen

If travel is an addiction, I'm afflicted.

The Black Veil One

My Diary Travel, Photography, My Sight About Somethings

Off to Ireland

Trotz Knacks den Schritt ins Ausland wagen

Randy Johnson's Oracle Blog

Oracle DBA Topics Including Unix, Scripting, & Automation

Model For {Change

Creating a positive change.

Globe-T.

Le Bonnet voyageur • The travelling Winter Hat

Another Photography Enthusiast

CLICKS THROUGH MY EYES

corkandspoon

Adventures in food and drink

Break Your Cage

Embracing The Unknown - Travel is not a pause from life, merely an extension of it.

My Girls On Tour

Fashion & Travel Blog by Abigail Royston

NYCQuirk

Two college girls trying to make the most out of living in NYC without breaking the bank!

Don Charisma

because anything is possible with Charisma

Bunny Kitchen

Exploring the possibilities of cruelty free food

Angelart Star

The beautiful picture of angels makes you happy.

%d bloggers like this: