Create a gist now

Instantly share code, notes, and snippets.

@lizer /README.md
Last active Nov 21, 2016

What would you like to do?
Google Line Chart for Dashing

Thanks for Mike Machado@machadolab!! This plugin is developed based on Google Column Chart the gentleman developed.

Description

A Dashing widget to show a Google Line Chart on a dashboard.

Installation

Copy the google_line.coffee, google_line.html and google_line.scss file to into /widgets/google_line 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="GoogleLine"  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-colors - (Googles default colors) A comma separated list of colors to use for the chart bars
  • data-legend_position - (right) Position of the legend. One of 'bottom', 'left', 'in', 'none', 'right' or 'top'
  • data-vaxis_format - (auto) A format string for numeric axis labels. One of 'none', 'decimal', 'scientific', 'currency', 'percent', 'short', 'long'
  • data-curve_type - (none) Controls the curve of the lines when the line width is not zero. One of 'none', 'function'

Complex Example

The following would show vertical axis values in percent. e.g. 0.4 -> 40% , remove the legend and smooth the angles of the line:

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="mychart" data-view="GoogleLine" data-legend_position="none" data-vaxis_format="percent" data-curve_type="function" data-title="My Chart"></div>
    </li>

Populating the Chart

To send data to the chart, use send_event to send an item called points 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', points: [
      ['Year', 'Sales', 'Expenses'],
      ['2004',  1000,      400],
      ['2005',  1170,      460],
      ['2006',  660,       1120],
      ['2007',  1030,      540]
  ])
class Dashing.GoogleLine extends Dashing.Widget
@accessor 'current', ->
return @get('displayedValue') if @get('displayedValue')
points = @get('points')
if points
points[points.length - 1].y
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.LineChart($(@node).find(".chart")[0])
@options =
height: height
width: width
colors: colors
backgroundColor:
fill:'transparent'
legend:
position: @get('legend_position')
animation:
duration: 500,
easing: 'out'
vAxis:
format: @get('vaxis_format')
curveType: @get('curve_type')
if @get('points')
@data = google.visualization.arrayToDataTable @get('points')
else
@data = google.visualization.arrayToDataTable []
@chart.draw @data, @options
onData: (data) ->
if @chart
@data = google.visualization.arrayToDataTable data.points
@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-line {
background-color: $background-color;
position: relative;
.title {
position: absolute;
top: 5px;
left: 0px;
right: 0px;
}
.chart {
position: absolute;
left: 0px;
top: 0px;
}
}
@lizer

This comment has been minimized.

Show comment Hide comment
@lizer

lizer Feb 1, 2016

An example of using a rest call to refresh a line chart with data

ccurl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "points":
[ ["Date","Rate"],
["01-27",0.0303030303],
["01-28",0.0869565217],
["01-29",0.0645161290],
["01-30",0],
["01-31",0],
["02-1",0.0294117647]
]}' http://localhost:3030/widgets/mychart

Owner

lizer commented Feb 1, 2016

An example of using a rest call to refresh a line chart with data

ccurl -d '{ "auth_token": "YOUR_AUTH_TOKEN", "points":
[ ["Date","Rate"],
["01-27",0.0303030303],
["01-28",0.0869565217],
["01-29",0.0645161290],
["01-30",0],
["01-31",0],
["02-1",0.0294117647]
]}' http://localhost:3030/widgets/mychart

@machadolab

This comment has been minimized.

Show comment Hide comment
@machadolab

machadolab Feb 7, 2016

Very nice! :)

Very nice! :)

@clairesarsam-wf

This comment has been minimized.

Show comment Hide comment
@clairesarsam-wf

clairesarsam-wf Feb 10, 2016

Thanks for making this!

I ran into a minor bug - colors is initialized but never passed through to the visualization. See here.

Thanks for making this!

I ran into a minor bug - colors is initialized but never passed through to the visualization. See here.

@lizer

This comment has been minimized.

Show comment Hide comment
@lizer

lizer Feb 10, 2016

@clairesarsam-wf

Thanks for pointing the bug out. I have it corrected now.

Owner

lizer commented Feb 10, 2016

@clairesarsam-wf

Thanks for pointing the bug out. I have it corrected now.

@saileanplum

This comment has been minimized.

Show comment Hide comment
@saileanplum

saileanplum May 23, 2016

How do I change the background color on the widget?

How do I change the background color on the widget?

@lizer

This comment has been minimized.

Show comment Hide comment
@lizer

lizer Jun 14, 2016

@saileanplum

Chart background colour can be change by adding style="background-color:#47BBB3" in your chart div. E.g.

Owner

lizer commented Jun 14, 2016

@saileanplum

Chart background colour can be change by adding style="background-color:#47BBB3" in your chart div. E.g.

@Atishdharvesh

This comment has been minimized.

Show comment Hide comment
@Atishdharvesh

Atishdharvesh Aug 5, 2016

hi there,
its indeed very nice widget.
perhaps you might help me to get data in the widget while quering directly in a mysql db (already setup).
I've this particular job setup and maybe it can be reused to get this done :
https://github.com/Shopify/dashing/wiki/How-to:-send-mysql-data-to-your-widgets

Thnks for your help and precious time.
BR,

hi there,
its indeed very nice widget.
perhaps you might help me to get data in the widget while quering directly in a mysql db (already setup).
I've this particular job setup and maybe it can be reused to get this done :
https://github.com/Shopify/dashing/wiki/How-to:-send-mysql-data-to-your-widgets

Thnks for your help and precious time.
BR,

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