Chart API Available in Templates

The PocketQuery Javascript API offers a way to draw Google Charts. These work well in combination with the general PocketQuery JS API. If you want to see a walkthrough example of how to create a chart in PocketQuery, we recommend looking at this part of the Getting Started Guide.

A chart is created with the following method:

CODE

/**
 * Draws a chart of the given type with the given options.
 */
PocketQuery.chart({String} type, {Object} options)

Inside a Template, the API can be called like this:

CODE

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

Type

The type is the chart name, i.e. the name of the respective package as defined by the Google Charts API in camel case. Among others the following chart types are available.

"AnnotationChart"
"AreaChart"
"BarChart" (version with material design: "Bar")
"BubbleChart"
"CandlestickChart"
"ColumnChart"
"ComboChart"
"Gauge"
"GeoChart"
"Histogram"
"LineChart" (version with material design: "Line")
"OrgChart"
"PieChart"
"ScatterChart" (version with material design: "Scatter")
"SteppedAreaChart"

For a complete list, please refer to the Google Documentation and look up the package name of the chart type you want to draw.

Options

The options object may contain the following:

All options that the Google Chart draw method expects: `new google.visualization.[VisualType]().draw(Options)`	A list of these options can typically be found at the bottom of the documentation of a specific chart type (example).
All options that Google Chart format methods expect: `new google.visualization.[FormatType](Options)`
`dataTable` Deprecated, see How to Refactor dataTable to Converter	Array-of-arrays containing the dataset to be drawn. This overrides the data taken from the query results. Example: `[['Month', 'Value'],['JAN-17', 52.1],['FEB-17', 51.2],['MAR-17', 51.7]]`. If you want to create a custom dataTable using the query results, you can use the `PocketQuery.query*` functions described in the general JS API documentation. This can sometimes be required if you want to make use of more sophisticated formatting options.
`container`	CSS selector of the container (e.g. `<div>` element) where the resulting chart should be rendered. If no container is provided, a new `<div>` is created automatically.
`beforeDraw` Deprecated, see How to Remove beforeDraw chart option	Callback function that is applied before the draw function of Google Chart is called. This function receives the prepared `dataTable` and the full options object as arguments: `function(queryResult, options) {}`.

Example

JS

<script>
PocketQuery.chart('BarChart', {
  // Options of Google chart method
  title: 'PocketQuery rocks!!!',
  allowHtml: true,
  showRowNumber: true,
  height: 200,
  width: 500,
  
  // Google Chart formatting, see
  // https://developers.google.com/chart/interactive/docs/reference#formatters
  format: {
    type: 'NumberFormat',
    column: 1,
    options: { // Options that the GC Formatting methods expect
      prefix: '$',
      negativeColor: 'red',
      negativeParens: true
    }
  }
});
</script>