Bars Of Stuff - Sample

Overview

A bars chart made out of various objects (images). This chart displays only positive values. Negative values are ignored.

The maximal width of bars is determined by the width of the contaner (div) element.

Example

Sample Code

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/barsofstuff/bos.css"/>
    <script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/barsofstuff/bos.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  </head>
  <body>
    <div id="chartdiv" style="width: 500px"></div>
    <script type="text/javascript">
      google.load("visualization", "1");
      google.setOnLoadCallback(drawChart);
      var chart;
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Label');
        data.addColumn('number', 'Value');
        data.addRows(4);
        data.setCell(0, 0, 'France');
        data.setCell(1, 0, 'Sweden');
        data.setCell(2, 0, 'USA');
        data.setCell(3, 0, 'Poland');
        data.setCell(0, 1, 10000, '10,000');
        data.setCell(1, 1, 30000, '30,000');
        data.setCell(2, 1, 20000, '20,000');
        data.setCell(3, 1, 7500, '7,500');
        var chartDiv = document.getElementById('chartdiv');
        var options = {title: 'Commuters By Country'};
        chart = new BarsOfStuff(chartDiv);
        chart.draw(data, options);
        //google.visualization.events.addListener(chart, 'select', handleSelect);
      }
    </script>
  </body>
</html>

Expected Data Format

The chart suport 2 data formats:

The first column is a string, which contains the label for the bar. The second column contains values (numeric).
All columns are numeric. The column label is used to as the bar label. Only values in the first row are used.

Options

Name	Type	Description
canSelect	boolean	If set to true (the default), users can select bars by clicking on them.
max	number	The maximal value to display. The default is the maximal value of the data values.
min	number	The minimal value to display. The default is the maximal value of the data values.
type	string	Type of images. Case insensitive. Can be: 'Train' (default), 'Chocolate', 'Rope', 'Truffle', 'Worm', 'Horse'.
title	string	A title to display above the chart. If not specified, no title is displayed.
width	string	The width of the chart. Can be relative, e.g. '50%' or in pixels, e.g. '340'. Default is '100%'

Methods

Name	Returns	Description
setSelection	none	Standard setSelection implementation.
getSelection	array of selected elements	Standard getSelection implementation.

Events

The chart triggers the standard 'select' event upon selection change. Note that if the option 'canSelect' is set to false, the chart will not allow selection and will not trigger the select event. Only a single bar may be selected (by clicking on the image).

Data Policy

All the data remains on the client, no data is sent to a server.

License

This visualization can be freely used by anyone. The entire source code is open-source. You can look at the code, copy the code, and modify it.

Contact Information

For comments, ideas problem reports please contact visapi.gadgets@gmail.com.