Scatter Chart based on Ad Hoc Data

by Stas_P

HTML

<script src="https://mobiledemo.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>


<div id="container"></div>

CSS

#container {
	min-width: 380;
	max-width: 600px;
	margin: 0 auto;
}

JavaScript

//Run the function to get Ad Hoc Data, and pass the function to render a Highchart as a callback.
getAdHocData(renderScatterChart);


function getAdHocData(renderFunction) {
	var ahv,
			ahvData = [];

  visualize({
    auth: {
      name: "joeuser",
      password: "joeuser",
      organization: "organization_1"
    }
  }, function(v) {
    ahv = v.adhocView({
      resource: "/Self_Service/Ad_Hoc_Data_for_Scatter_Plot",
      success: function(data) {
      console.log(data);
        var ahvDataStringValues = data._dataset_internal_.levelDataNodes[0].detail.data;
        for (var i in ahvDataStringValues) {
        	ahvData[i] = [parseFloat(ahvDataStringValues[i][0]),
          							parseFloat(ahvDataStringValues[i][1])];
        }

				console.log(ahvData);
        renderFunction(ahvData);
      },
      error: function(err) {
        console.log(err)
      }
    })
  });
}


function renderScatterChart(data) {

  if (!Highcharts.Series.prototype.renderCanvas) {
      throw 'Module not loaded';
  }

  console.time('scatter');
  Highcharts.chart('container', {

      chart: {
          zoomType: 'xy',
          height: '100%'
      },

      boost: {
          useGPUTranslations: true,
          usePreAllocated: true
      },

      xAxis: {
          min: 0,
          max: 15,
          gridLineWidth: 1,
          title: {
          	text: 'Store Sales 2013'
          }
      },

      yAxis: {
          // Renders faster when we don't have to compute min and max
          min: 0,
          max: 8,
          minPadding: 0,
          maxPadding: 0,
          title: {
              text: 'Store Cost 2013'
          }
      },

      title: {
          text: 'Scatter chart Store Sales VS Store Cost'
      },

      legend: {
          enabled: false
      },

      series: [{
          type: 'scatter',
          color: 'rgba(220,0,67,0.1)',
          data: data,
          marker: {
              radius: 10
          },
          tooltip: {
             ...