masha256/README.md

## README.md

      
    Raw
  

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

}
	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
	<h1 class="title" data-bind="title"></h1>

	<div class="chart"></div>
	// ----------------------------------------------------------------------------
	// 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;
	}

	}