Skip to main content
Skip table of contents

Including Google Charts And Adjusting Options

The options dataTable and beforeDraw of the PocketQuery.chart method are deprecated. If you are using either of these chart options, please see the corresponding article:

The PocketQuery Javascript API offers a way to draw Google Charts. These work well in combination with Basic Functions For Templates.

A chart is created with the following method:

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


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.

  • "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.


The options object may contain the following:

  • all options that the Google Chart draw method expects: new google.visualization.[VisualType]().draw(Options)

  • all options that Google Chart format methods expect: new google.visualization.[FormatType](Options)

  • dataTable: 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 Basic Functions For Templates.

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

  • beforeDraw: 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) {}. See the example below.

PocketQuery.chart('Bar', {
  // Options of Google chart method
  title: 'PocketQuery rocks!!!',
  allowHtml: true,
  showRowNumber: true,
  height: 200,
  width: 500,
  // Google Chart formatting, see
  format: {
    type: 'NumberFormat',
    column: 1,
    options: { // Options that the GC Formatting methods expect
      prefix: '$',
      negativeColor: 'red',
      negativeParens: true
JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.