A Dashing widget to show a Google Visualizations Column Chart on a dashboard.
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>
The following options can be added to the <div>
of the chart object (defaults in parenthesis):
data-title
- (no title) Title of the chartdata-is_stacked
- (false) Set totrue
to enable stacking of the y axis values.data-colors
- (Googles default colors) A comma separated list of colors to use for the chart barsdata-legend_position
- (right) Position of the legend. One of 'bottom', 'left', 'in', 'none', 'right' or 'top'
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>
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]
])
Would it be possible to change the colour of the legend text?