FlexChart Examples
The FlexChart has been deprecated as of version 3.7.
Be aware that the method
api.buildFlexChartis now deprecated. You can find more info in API Documentation.From version 10.0
api.isSyntaxCheck()is replaced withapi.isInputGenerationExecution().
Column Chart, Using Default Template
def data = [
series: [
[
data: [29.9, 71.5, 106.4, 129.2, 144.0]
]
]
]
api.buildFlexChart(data)Template "Default"
// The default template specifies options which are applied if no explicit template was selected
// Still gets merged with the base template
{
"chart": {
"type": "column"
},
"tooltip": {
"formatter": function() {
return 'The value for <b>'+ this.x +
'</b> is <b>'+ this.y +'</b>';
}
}
}Chart with Full Definition in Template
api.buildFlexChart("FlexChart_tests_T001", "{}")Template FlexChart_tests_T001
{
"chart": {
"type": "line"
},
"title": {
"text": "Another cool FlexChart"
},
"xAxis": {
"categories": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
},
"yAxis": {
},
"legend": {
"layout": "vertical",
"floating": true,
"backgroundColor": "#FFFFFF",
"align": "left",
"verticalAlign": "top",
"y": 60,
"x": 90
},
"tooltip": {
"formatter": function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
"plotOptions": {
},
"series": [{
"data": [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
}Line Chart with Definition Overriding the Template
def data = [
series: [
[
data: [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21]
]
]
]
api.buildFlexChart("FlexChart_tests_T001", data)
Waterfall Chart
def data = [
title: [
text: 'Highcharts Waterfall'
],
yAxis: [
title: [
text: 'USD'
]
],
series: [[
data: [[
name: 'Start',
y: 120000
], [
name: 'Product Revenue',
y: 569000
], [
name: 'Service Revenue',
y: 231000
], [
name: 'Positive Balance',
isIntermediateSum: true,
color: "#0d233a"
], [
name: 'Fixed Costs',
y: -342000
], [
name: 'Variable Costs',
y: -233000
], [
name: 'Balance',
isSum: true,
color: "#0d233a"
]]
]]
]
api.buildFlexChart("hc_wf_base", data)Template "hc_wf_base"
{
"chart": {
"type": "waterfall"
},
"xAxis": {
"type": "category"
},
"yAxis": {
"title": {
"text": "K USD"
}
},
"legend": {
"enabled": false
},
"tooltip": {
"headerFormat": "",
"pointFormat": "{point.name}: {point.y:,.3f}"
},
"plotOptions": {
"waterfall": {
"upColor": "#8bbc21",
"color": "#910000",
"dataLabels": {
"enabled": true,
"formatter": function () {
return Highcharts.numberFormat(this.y / 1000, 0, ',') + 'k';
},
"style": {
"color": "#FFFFFF",
"fontWeight": "bold",
"textShadow": "0px 0px 3px black"
}
},
"pointPadding": 0
}
}
}Column Series
def fChart = [
chart: [
type: 'column'
],
title: [
text: 'Chart Title'
],
xAxis: [
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
],
series: [[
name: 'John',
data: [5, 3, 4, 7, 2]
], [
name: 'Jane',
data: [2, -2, -3, 2, 1]
], [
name: 'Joe',
data: [3, 4, 4, -2, 5]
]]
]
api.buildFlexChart(fChart)Column and Spline Chart
if(api.isInputGenerationExecution()) return
def customerId = api.getElement("CustomerId")
def customerName = api.getElement("CustomerName")
def specCode = api.getElement("SpecCode")
def specCodeDescription = api.getElement("SpecCodeDescription")
api.buildFlexChart([
chart: [
type: "column"
],
title: [
text: "Monthly Volume and AVG NetPrice PU in the last 6 months"
],
subtitle: [
text: customerName + " / " + specCodeDescription
],
xAxis: [
title: [
text: 'Date'
],
categories: ["1", "2", "3", "4"],
//categories: getNetPriceHistory(customerId, specCode)[0]
],
yAxis: [[
title: [
text: 'Average Net Price per Unit'
],
labels: [
format: '{value} BRL'
],
],
[
title: [
text: 'Total Volume'
],
opposite: true
],
],
tooltip: [
shared: true
],
legend: [
layout: 'vertical',
align: 'left',
x: 150,
verticalAlign: 'top',
y: 120,
floating: true
//backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
],
series: [
[
name: "Total Volume",
type: 'column',
yAxis: 1,
data: [4.0, 3.9, 6.5, 9.1]
//data: getNetPriceHistory(customerId, specCode)[1]
],
[
name: "Average Net Price per Unit",
type: 'spline',
data: [70.0, 60.9, 90.5, 100.1],
// data: getNetPriceHistory(customerId, specCode)[2],
tooltip: [
valueSuffix: ' BRL'
]
]
]
])
Overlapping Area and Column Chart
if (api.isInputGenerationExecution()) return
def definition = [
chart: [
type: "area",
//step: 'left'
],
xAxis: [
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
],
title: [
text: "A common FlexChart"
],
series: [
[
name: 'Asia',
type: "area",
data: [502, 635, 809, 947, 1402, 3634, 5268]
], [
name: 'Africa',
type: "area",
data: [106, 107, 111, 133, 221, 767, 1766]
], [
name: 'Europe',
type: "area",
data: [163, 203, 276, 408, 547, 729, 628]
], [
name: 'America',
type: "area",
data: [18, 31, 54, 156, 339, 818, 1201]
], [
name: 'Oceania',
type: "area",
data: [2, 2, 2, 6, 13, 30, 46]
],
[
name: 'Pavel test',
type: "column",
data: [502, 635, 809, 947, 1402, 3634, 5268]
]
]
]
api.buildFlexChart("AreaTemplate", definition)
Found an issue in documentation? Write to us.