Create a gist now

Instantly share code, notes, and snippets.

Google Pie Chart for Dashing


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


Copy the, 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=""></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});

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>


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>

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] *"sizex")) + Dashing.widget_margins[0] * 2 * ("sizex") - 1)
height = (Dashing.widget_base_dimensions[1] *"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'
position: @get('legend_position')
if @get('slices')
@data = google.visualization.arrayToDataTable @get('slices')
@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;

Awesome. Thanks, works like a charm!

larrycai commented Jul 2, 2015

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

rgevaert commented Jul 3, 2015

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

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


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 the graph dissappears. Any ideas?


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