Google Column Chart for Dashing

README.md

Description

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

Installation

Copy the google_column.coffee, google_column.html and google_column.scss file to into /widgets/google_column 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="GoogleColumn"  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_stacked - (false) Set to true to enable stacking of the y axis values.
• 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'

Complex Example

The following would stack the y axis values, remove the legend and plot a two-valued chart using purple and black bars:

    <li data-row="1" data-col="1" data-sizex="2" data-sizey="1">
      <div data-id="mychart" data-view="GoogleColumn" data-is_stacked="true" data-legend_position="none" data-colors="purple, black" 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]
  ])

google_column.coffee

class Dashing.GoogleColumn 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.ColumnChart($(@node).find(".chart")[0])
    @options =
      height: height
      width: width
      colors: colors
      backgroundColor:
        fill:'transparent'
      isStacked: @get('is_stacked')
      legend:
        position: @get('legend_position')
      animation:
        duration: 500,
        easing: 'out'

    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

google_column.html

<h1 class="title" data-bind="title"></h1>

<div class="chart"></div>

google_column.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #fb9618;

// ----------------------------------------------------------------------------
// Widget-GoogleGauge styles
// ----------------------------------------------------------------------------
.widget-google-column {

  background-color: $background-color;
  position: relative;

  .title {
    position: absolute;
    top: 5px;
    left: 0px;
    right: 0px;
  }

  .chart {
    position: absolute;
    left: 0px;
    top: 0px;
  }

}

Hi Everyone,

i've been strugling with this for almost 2weeks now and i'd hope someone might help me out on how to convert my sql query from mysql db into 2D array for sending into the google charts widgets please?

My actual script is >

require 'mysql2'

SCHEDULER.every '1m', :first_in => 0 do |job|
points = []

Myql connection

db = Mysql2::Client.new(:host => "192.168.46.2", :username => "AT-DBA", :password => "P0werLin", :port => 3306, :database => "lbn_kpi" )

Mysql query

sql = "SELECT <Field 1>, <Field 2> FROM Table"

Field 1 is Integer

Field 2 is Decimal(65,30)

rs = db.query(sql, :as => :array)

subpoints = []
subpoints.push('Week')
subpoints.push('MTV')
points.push(subpoints)

rs.each do |row|
subpoints = []
subpoints.push(row['Field 1'])
subpoints.push(row['Field 2'])
points.push(subpoints)
end

Update the List widget

send_event('mychart01', points: points)

Mysql2.close

I get the error:
./mysql_chart_01.rb:23:in []': no implicit conversion of String into Integer (TypeError) from ./mysql_chart_01.rb:23:inblock in

'
from ./mysql_chart_01.rb:21:in each' from ./mysql_chart_01.rb:21:in'

actually i'm not even sure to be able to make it work this way.
If anyone has better suggestion or ruby script for google charts ?

Best regards,

any chance on logscale: true ? does not work for me :\