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().

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)