Including Google Charts and Adjusting Options

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:

CODE

/**
 * 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 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.

CODE

## 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
  // 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
  }
   
});