Using Google Charts

PocketQuery has the Google Chart API embedded. This means almost unlimited possibilities in visualizations! The PocketQuery JavaScript API lets you make use of 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 a lot of examples on how to build PocketQuery templates with Google Charts on the page Google Charts Examples.

Adding A Chart

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

HTML

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

The argument - "BarChart" in this case - specifies which type of chart you want to render. As default, the result of the corresponding query will be used as the data set for the chart.

Which charts are available?

You can find a list with the most commonly used charts on the Javascript API Provided By PocketQuery. For a complete list, please refer to the Google Charts Documentation.

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:

HTML

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