Using Google Charts

PocketQuery has the Google Chart API embedded. This means almost unlimited possibilities for visualizations! The PocketQuery JavaScript API allows you to use Google Charts in templates very easily. The only requirement is that the result retrieved from your database is in the correct format for a chart.

Examples?

You can find many examples on how to build PocketQuery templates with Google Charts on the page Google Chart Examples.

Adding A Chart

The basic way to add a chart into your template is by including a small JavaScript snippet:

CODE

<script>
    PocketQuery.chart('BarChart');
</script>

Overriding the Data Table for Google Charts

PocketQuery uses the query result for the data table used in Google Charts. You can override this data table with your own. Obviously, then the query result will have no effect on the resulting chart. The following example uses the Org Chart with the example data from the Google Charts docs:

CODE

<script>
    PocketQuery.chart('OrgChart',
        { showTip: true, allowHtml: true,
          dataTable: [
            ['Mike', '', 'The President'],
            [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
            ['Alice', 'Mike', ''],
            ['Bob', 'Jim', 'Bob Sponge'],
            ['Carol', 'Bob', ''] ]
        });
</script>