FlexChart Examples

Be aware that the method api.buildFlexChart is now deprecated. You can find more info in API Documentation.
From version 10.0 api.isSyntaxCheck() is replaced with api.isInputGenerationExecution().

1 Column Chart, Using Default Template
- 1.1 Template "Default"
2 Chart with Full Definition in Template
- 2.1 Template FlexChart_tests_T001
3 Line Chart with Definition Overriding the Template
4 Waterfall Chart
- 4.1 Template "hc_wf_base"
5 Column Series
6 Column and Spline Chart
7 Overlapping Area and Column Chart

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)