You can add a map to your dashboard, so that you can display regional data in a graphical form.
All you have to do is to create a Highmaps map widget and use it in your dashboard. The widget is defined by a calculation logic using the api.buildHighmap method. The data can come either from PriceAnalyzer or other storages or can be created on the fly.
Refer to the Highmaps API reference to explore the full variety of settings. At the very least you need to provide a
chart.map value, series[n].joinBy value and series[n].data....
The following example is based on Color axis and data labels with a 1 to 1 translation from JavaScript (as found in "View Options" on the linked page) to Groovy:
| Paste code macro | ||||
|---|---|---|---|---|
| ||||
//======================================================
// to be adapted to your partition's Datamart definition
def DM_NAME = 'datamart_transaction'
def COUNTRY_FIELD = 'Country'
def REVENUE_FIELD = 'InvoicePrice'
def REGION_FIELD = 'Region'
//======================================================
def ctx = api.getDatamartContext()
def dm = ctx.getDatamart(DM_NAME)
def customQuery =
ctx.newQuery(dm,true)
.select(COUNTRY_FIELD, 'Country')
.select('SUM('+REVENUE_FIELD+')', 'Revenue')
// .where(REGION_FIELD + "='Europe'")
.orderBy('Country')
def res = ctx.executeQuery(customQuery)?.getData()
def max = res.selectColumn('Revenue').max()?.getValue()?.toInteger()
def data = []
res.each { row ->
def country = row.get('Country')
switch (country) {
case 'UK': country = 'United Kingdom'
break
case 'USA': country = 'United States of America'
break
}
def value = row.get('Revenue')
if (value) {
value = value.toInteger()
}
// by using the 'keys' option in series, we can
// replace this commented out map by a simple array
//data.push([ 'country' : country, 'value' : value ])
data.push([ country, value ])
}
api.trace('data', '', data)
def definition = [
chart: [
map: 'custom/europe',
//map: 'custom/world',
borderWidth: 1
],
title: [
text: 'Revenu by Country (EUR)'
],
legend: [
layout: 'horizontal',
borderWidth: 0,
backgroundColor: 'rgba(255,255,255,0.85)',
floating: true,
verticalAlign: 'top',
y: 25
],
mapNavigation: [
enabled: true
],
colorAxis: [
type: 'linear',
minColor: '#EEEEFF',
maxColor: '#000022',
stops: [
[0, '#EFEFFF'],
[0.67, '#4444FF'],
[1, '#000022']
]
],
series: [[
animation: [ duration: 100 ],
keys: ['country', 'value'], // see the above comment at data.push()
joinBy: ['name', 'country'], // map key is 'name', data key is 'country'
data: data,
dataLabels: [
enabled: true,
color: '#FFFFFF',
format: '{point.country}'
],
name: 'Revenue',
tooltip: [
pointFormat: '{point.country}: {point.value} EUR'
]
]]
]
api.buildHighmap(definition)
|
...
| Tip |
|---|
If you cannot find an example of an existing logic that uses a chart type that you require, it should be fairly easy to adapt one of the Highmaps Demos.
|
...