HTML Presentation Object: Bubble chart

Following query contains example data for the bubble chart. Add it to a dataset with name "exampleData". Note that this example needs QPR Reporting Expression datasource installed.

data0=CreateDataset(Array('Risk', 'Value', 'Cost', 'Category'))
data1=AddDatasetRow([data0], 4, 1, 6, 'Category 1')
data2=AddDatasetRow([data1], 8, 5, 4, 'Category 2')
data3=AddDatasetRow([data2], 1, 9, 4, 'Category 3')
data4=AddDatasetRow([data3], 3, 2, 8, 'Category 1')
data5=AddDatasetRow([data4], 3, 8, 9, 'Category 3')
data6=AddDatasetRow([data5], 7, 4, 5, 'Category 2')
data7=AddDatasetRow([data6], 6, 7, 6, 'Category 1')
data8=AddDatasetRow([data7], 9, 1, 7, 'Category 4')
data9=AddDatasetRow([data8], 2, 3, 4, 'Category 1')
data10=AddDatasetRow([data9], 8, 6, 7, 'Category 4')

Paste this example code into a HTML presentation object.

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

<script>
var poData<#uniqueId>;
var width<#uniqueId>;
var height<#uniqueId>;

function <#datasetChangeFunction>(datasetIdentifier, datasetChangeCallbackFunction) {
  if (datasetIdentifier == "exampleData") {
    datasetChangeCallbackFunction(myDatasetAvailable<#uniqueId>);
  }
}

function myDatasetAvailable<#uniqueId>(datasetData) {
  if (datasetData == null || datasetData.sheets == null || datasetData.sheets.length == 0 || datasetData.sheets[0] == null || datasetData.sheets[0].values == null || datasetData.sheets[0].values.length == 0) return;
  poData<#uniqueId> = [];
  for (var row = 1; row < datasetData.sheets[0].values[0].length; row++) {
    var rowObject = {};
    for (var column = 0; column < datasetData.sheets[0].values.length; column++) {
      rowObject[datasetData.sheets[0].values[column][0].attribute] = datasetData.sheets[0].values[column][row].value;
    }
    poData<#uniqueId>.push(rowObject);
  }
  drawPO<#uniqueId>();
}

function <#resizeFunction>(newWidth, newHeight) {
  width<#uniqueId> = newWidth;
  height<#uniqueId> = newHeight;
  $("#container<#uniqueId>").width(newWidth);
  $("#container<#uniqueId>").height(newHeight);
  drawPO<#uniqueId>();
}

function drawPO<#uniqueId>() {
  if (poData<#uniqueId> == null || width<#uniqueId> == null) return;
  $("#container<#uniqueId>").empty();
  Highcharts.chart("container<#uniqueId>", {
    chart: {
      type: 'bubble',
      plotBorderWidth: 1,
      zoomType: 'xy'
    },
    title: {
      text: 'Example bubble chart'
    },
    credits: {
      enabled: false
    },
    xAxis: {
      gridLineWidth: 1
    },
    yAxis: {
      startOnTick: false,
      endOnTick: false,
      title: ""
    },
    series: formatDataset(poData<#uniqueId>, {"x": "Value", "y": "Risk", "x": "Value", "z": "Cost"}, "Category", "name", "data")
  });
}

function formatDataset(inputData, mappings, groupColumn, groupAttribute, innerArrayAttribute) {
  var mappedData = [];
  var namesToMap = Object.getOwnPropertyNames(mappings);
  for (var i = 0; i < inputData.length; i++) {
    var row = {};
    var mappedColumns = [];
    for (var j = 0; j < namesToMap.length; j++) {
      row[namesToMap[j]] = inputData[i][mappings[namesToMap[j]]];
      mappedColumns.push(mappings[namesToMap[j]]);
    }
    var dataColumns = Object.getOwnPropertyNames(inputData[i]);
    for (j = 0; j < dataColumns.length; j++) {
      if (mappedColumns.indexOf(dataColumns[j]) == -1) {
        row[dataColumns[j]] = inputData[i][dataColumns[j]];
      }
    }
    mappedData.push(row);
  }

  if (groupColumn == null) {
    return mappedData;
  } else {
    var groups = {};
    for (var i = 0; i < mappedData.length; i++) {
      var groupName = mappedData[i][groupColumn];
      if (groups[groupName] == null) groups[groupName] = [];
      groups[groupName].push(mappedData[i]);
      delete mappedData[i][groupColumn];
    }
    var groupedData = [];
    var groupNames = Object.getOwnPropertyNames(groups);
    for (var i = 0; i < groupNames.length; i++) {
      var group = {};
      group[groupAttribute] = groupNames[i];
      group[innerArrayAttribute] = groups[groupNames[i]];
      groupedData.push(group);
    }
    return groupedData;
  }
}
</script>