How to Create Highchart
A Highchart is defined in a calculation logic, using the api.buildHighchart
method. Refer to the Highcharts API reference to explore the full variety of settings.
At the very least you need to provide series[n].type
and series[n].data
, or you can omit series.type
if there is a default chart.type
value.
def definition = [
chart: [ type: 'scatter' ],
series: [
[
// type: 'scatter',
name: 'Test',
data: [
[ 0.1, 0.5 ],
...
]
]
]
]
// def matrix1 = api.newMatrix()
def chart = api.buildHighchart(definition)
// .showDataTab() - Adds a data tab to the chart
// .setDataHeaders('Country', 'Revenue', 'Margin')
// .setResultMatrixTabs(matrix1, matrix2, ...)
return chart
// return chart.addModule(String... moduleNames)
If a message displays, saying that a JavaScript module may be missing, go to the Highcharts documentation and find out which modules are required for each chart type.
The following example fetches data from the Datamart and creates a variwide chart:
//======================================================
// to be adapted to your partition's Datamart definition
def DM_NAME = 'datamart_transaction'
def SKU_FIELD = 'ProductID'
def IP_FIELD = 'InvoicePrice'
def COSTS_FIELD = 'Costs'
def YEAR_FIELD = 'InvoiceDateYear'
//======================================================
def ctx = api.getDatamartContext()
def dm = ctx.getDatamart(DM_NAME)
def customQuery =
ctx.newQuery(dm, true)
.select(SKU_FIELD, 'Sku')
.select('SUM('+IP_FIELD+')/1e6', 'Revenue')
.select('SUM('+IP_FIELD+'-'+COSTS_FIELD+')/SUM('+IP_FIELD+')', 'MarginPct')
// .where(YEAR_FIELD + '=2014')
.orderBy(SKU_FIELD)
api.trace('customQuery', null, customQuery)
def res = ctx.executeQuery(customQuery)
def data = []
res?.getData()?.each { row ->
data.push([row.get('Sku'), row.get('MarginPct'), row.get('Revenue')])
}
def definition = [
chart: [
type: 'variwide'
],
title: [
text: 'Margin % by Product'
],
xAxis: [
type: 'category',
title: [
text: 'Column widths are proportional to total revenue'
]
],
legend: [
enabled: false
],
series: [[
name: 'Margin',
data: data,
dataLabels: [
enabled: true,
format: '{point.y:.2f} %'
],
tooltip: [
pointFormat: 'Margin: <b>{point.y:.2f} %</b><br>' +
'GDP: <b>€ {point.z:.1f} K</b><br>'
],
colorByPoint: true
]]
]
def chart = api.buildHighchart(definition)
chart.addModule('variwide')
return chart
Tips
If you cannot find an example of an existing logic that uses a chart type that you intend to use, it should be fairly easy to adapt one of the Highcharts Demos. Select your chart and click on the 'View Options' button and you will see the JS source code, including a
Highcharts.chart('container', {...})
call. This{...}
content is thedefinition
map. You will have to convert it from JS to Groovy. This always implies replacing the curly brackets by square brackets ({} -> []
). But you may also sometimes encounter code likeHighcharts.color(colors[5]).brighten(0.2).get()
which you should replace by your own hard coded colors, orformatter: function () {...}
which you would have to replace by a simpler pattern formatterformat: '{
point.name}: {point.y:.1f}%'
.The “Highcharts.com” watermark and link are not displayed by default. If you want to have them displayed in the chart, use the
credits
property in your definition:def chartDef = [ chart: [ type: 'column' ], credits: [ enabled: true, text: "highchart.com" ], title: [ text: 'My Chart' ],
If you have a pie chart in a Quote or Agreement/Promotion custom header, chart data labels may not be displayed due to the header's limited space. To make sure the labels are displayed, you must specify a smaller than the default distance of the labels from the pie chart edge. In the following example, you set the distance to 5 instead of the default 30. The value can also be defined as a percentage of the pie's radius:
See also:
General Chart Settings for information about how to configure a global theme definition.
Found an issue in documentation? Write to us.