How to Display Large Number of Data Points in FlexChart Scatter Plot

The FlexCharts are configured using the underlying Highcharts framework's options. For large data sets, Highcharts features the so-called turbo mode, to speed up the display. By default, the number of points above which this mode kicks in is set to 1000 data points, but this value can be modified in the options. One typical way of providing a data point in Highcharts is a Map, e.g., in Groovy [ 'x': 1.5, 'y':0.2 ]. However, if the turbo mode kicks in, Maps are no longer supported and the chart might remain blank. The solution is to provide the points as a simple array, e.g., replace the previous expression by [ 1.5, 0.2 ]. It is also possible to raise the turboThreshold value, or to simply disable the turbo, but this may have a noticeable performance impact.

The below code shows a very simple FlexChart scatter plot that uses Maps for data points and will not display because the data array size is 1001. The commented out code shows the two ways of fixing it.

Note: One reason why option 1 may not work for you is the case when the data point's tooltip must display additional values, such as text values or additional measures.

def data = []

for (int i = 0; i < 1001; i++) {
  double x = i, y = i
  data << [ 'x': x, 'y': y ]
  // option 1.
  // data << [ x, y ]
}

def chartDefinition = [
  chart: [ 'type': 'scatter' ],
  xAxis: [[ title: ['text' : xAxisTitle] ]],
  yAxis: [[ title : ['text' : yAxisTitle] ]],
  // option 2. (default is 1000, disabled is 0)
  //plotOptions: [ series: [turboThreshold: 2000] ],
  series: [[ 'name' : 'series1', 'data': data ]]
]
api.buildFlexChart("test", chartDefinition)