Create a gist now

Instantly share code, notes, and snippets.

Google Pie Chart for Dashing

Description

A Dashing widget to show a Google Visualizations Pie Chart on a dashboard.

Installation

Copy the google_pie.coffee, google_pie.html and google_pie.scss file to into /widgets/google_pie directory.

Add the following to the dashboard layout file:

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

Then to include the widget on the dashboard, add the following item to your dashboard file:

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="mychart" data-view="GooglePie"  data-title="My Chart"></div>
    </li>

Options

The following options can be added to the <div> of the chart object (defaults in parenthesis):

  • data-title - (no title) Title of the chart.
  • data-is_3d - (false) Set to true to draw the pie chart in 3D.
  • data-pie_hole - (none) Set between 0 and 1 to change the ratio of the pie that is a hole vs chart.
  • data-pie_start_angle - (0) Set the rotation angle of the first slice of the pie.
  • data-colors - (Google default colors) A comma separated list of colors to use for the slices.
  • data-legend_position - (right) Position of the legend. One of 'bottom', 'left', 'labeled', 'none', 'right' or 'top'.

Complex Example

The following would create a 3D chart with no legend and picking specific colors for the slices:

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="mychart" data-view="GooglePie" data-is_3d="true" data-legend_position="none" data-colors="purple, black, blue, red" data-title="My Chart"></div>
    </li>

Populating the Chart

To send data to the chart, use send_event to send an item called slices with a two dimensional array. Make sure the first "row" in the array is an array of headers for the data.

For example:

send_event('mychart', slices: [
        ['Task', 'Hours per Day'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
      ])
class Dashing.GooglePie extends Dashing.Widget
ready: ->
container = $(@node).parent()
# Gross hacks. Let's fix this.
width = (Dashing.widget_base_dimensions[0] * container.data("sizex")) + Dashing.widget_margins[0] * 2 * (container.data("sizex") - 1)
height = (Dashing.widget_base_dimensions[1] * container.data("sizey"))
colors = null
if @get('colors')
colors = @get('colors').split(/\s*,\s*/)
@chart = new google.visualization.PieChart($(@node).find(".chart")[0])
@options =
height: height
width: width
colors: colors
is3D: @get('is_3d')
pieHole: @get('pie_hole')
pieStartAngle: @get('pie_start_angle')
backgroundColor: 'transparent'
legend:
position: @get('legend_position')
if @get('slices')
@data = google.visualization.arrayToDataTable @get('slices')
else
@data = google.visualization.arrayToDataTable []
@chart.draw @data, @options
onData: (data) ->
if @chart
@data = google.visualization.arrayToDataTable data.slices
@chart.draw @data, @options
<h1 class="title" data-bind="title"></h1>
<div class="chart"></div>
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #fb9618;
// ----------------------------------------------------------------------------
// Widget-GoogleGauge styles
// ----------------------------------------------------------------------------
.widget-google-pie {
background-color: $background-color;
position: relative;
.title {
position: absolute;
top: 5px;
left: 0px;
right: 0px;
}
.chart {
position: absolute;
left: 0px;
top: 0px;
}
}
@moonchaser

Awesome. Thanks, works like a charm!

@larrycai
larrycai commented Jul 2, 2015

looks good, can you show the json data format to send via curl command ?

@rgevaert
rgevaert commented Jul 3, 2015

would be nice to know this as I'm facing the same issue now...

@larrycai
larrycai commented Jul 6, 2015

got it, see google_pie.json

{ 
  "auth_token": "YOUR_AUTH_TOKEN",
  "slices": [
        ["Task", "Hours per Day"],
        ["Work",     11],
        ["Eat",      2],
        ["Commute",  2],
        ["Watch TV", 11],
        ["Sleep",    7]
  ]
}

Then you can use like curl -d @google_pie.json localhost:3030/widgets/mychart

@kkuderko

Great widget. Thanks!
Tried to change the pieSliceText from precenage to value but any time I add option pieSliceText: @get('pie_slice_text') to the google_pie.coffee the graph dissappears. Any ideas?

@kkuderko

nevermind, figured it out. used "space" instead of "tab" in .coffee file and it worked. doh!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment