Piles Of Money - Sample

Overview

A column chart made out of money bills. The height of each money pile is relative to the value. This chart displays only positive values. Negative values are ignored.

Example

Sample Code

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.css"/>
    <script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/pilesofmoney/pom.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  </head>
  <body>
    <div id="chartdiv"></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, 'Germany');
        data.setCell(2, 0, 'USA');
        data.setCell(3, 0, 'Poland');
        data.setCell(0, 1, 10, '$10,000');
        data.setCell(1, 1, 30, '$30,000');
        data.setCell(2, 1, 20, '$20,000');
        data.setCell(3, 1, 7.5, '$7,500');
        var chartDiv = document.getElementById('chartdiv');
        var options = {title: 'Reveneues By Country'};
        chart = new PilesOfMoney(chartDiv);
        chart.draw(data, options);
        //google.visualization.events.addListener(chart, 'select', handleSelect);
      }
    </script>
  </body>
</html>

Expected Data Format

The chart suport 2 data formats:

Options

Name Type Description
canSelect boolean If set to true (the default), users can select bars by clicking on them.
currency string 'USD' for dollars (default), 'EUR' for Euro
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.
title string A title to display above the chart. If not specified, no title is displayed.

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 pile may be selected (by clicking on the money pile).

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.