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;
}
}
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

Very nice! :)

Thanks for making this!

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

Owner

lizer commented Feb 10, 2016

@clairesarsam-wf

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

How do I change the background color on the widget?

Owner

lizer commented Jun 14, 2016 edited

@saileanplum

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

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