Page tree
Skip to end of metadata
Go to start of metadata

The PocketQuery Javascript API offers a way to draw Google Charts. Of course, the basic JS functions described above might come in handy here, too.

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)

Type

The type is the chart name, i.e. the name of the respective package as defined by the Google 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.

Options

The options object may contain the following:

  • all options that the Google Chart draw method expects: new google.visualization.[VisualType]().draw(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 above

  • container: CSS selector of the div that the resulting chart should be appended to. If no container is given, a new div is created
  • all options that Google Chart format methods expect: new google.visualization.[FormatType](Options)
  • 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.
Example usage within a template
## div that will contain the chart
## must be placed above the call of PocketQuery.chart
<div id="my-chart-div"></div>

PocketQuery.chart('Table', {
  // options of Google chart method
  title: 'PocketQuery rocks!!!',
  allowHtml: true,
  showRowNumber: true,

  // overriding the PocketQuery result with a static dataset
  dataTable: [['Month', 'Value'],
        ['JAN-17', 52.1],
        ['FEB-17', 51.2], 
        ['MAR-17', 51.7]
        ],

  // selecting a specific div for displaying the chart
  container: '#my-chart-div',

  // 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
    }
  },

  beforeDraw: function(dataTable, options) {
    // Do something on dataTable or options before the chart is drawn.
    // Note: the `options` argument holds a reference to the Google `chart` object
	// which is sometimes needed for advanced functionality with event listeners
  }
  
});


  • No labels