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

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!

@lucasltd

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