Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

This comment has been minimized.

Show comment Hide comment
@moonchaser

moonchaser Oct 16, 2014

Awesome. Thanks, works like a charm!

Awesome. Thanks, works like a charm!

@larrycai

This comment has been minimized.

Show comment Hide comment
@larrycai

larrycai Jul 2, 2015

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

larrycai commented Jul 2, 2015

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

@rgevaert

This comment has been minimized.

Show comment Hide comment
@rgevaert

rgevaert Jul 3, 2015

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

rgevaert commented Jul 3, 2015

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

@larrycai

This comment has been minimized.

Show comment Hide comment
@larrycai

larrycai 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

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

This comment has been minimized.

Show comment Hide comment
@kkuderko

kkuderko Sep 11, 2016

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?

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

This comment has been minimized.

Show comment Hide comment
@kkuderko

kkuderko Oct 14, 2016

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

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

@lucasltd

This comment has been minimized.

Show comment Hide comment
@lucasltd

lucasltd Feb 16, 2017

i'm designing a dashboard where the different value of the data change the colour of the pie chart but i'm having trouble sending this information dynamically from a job. i tried to write something like that:

clr=['red']
send_event('mychart', slices:datateste, color: [clr,'blue'], title:'Testing')

But didn't work, someone can help me?
Maybe i have to change something in the .coffee but i don't know.

@machadolab @kkuderko @larrycai

i'm designing a dashboard where the different value of the data change the colour of the pie chart but i'm having trouble sending this information dynamically from a job. i tried to write something like that:

clr=['red']
send_event('mychart', slices:datateste, color: [clr,'blue'], title:'Testing')

But didn't work, someone can help me?
Maybe i have to change something in the .coffee but i don't know.

@machadolab @kkuderko @larrycai

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