The PocketQuery for Jira 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)


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


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.

## 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 for Jira rocks!!!',
  allowHtml: true,
  showRowNumber: true,
  // overriding the PocketQuery for Jira 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
  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