HTML Presentation Object: Bubble chart - Revision history

TeeHiet at 07:50, 6 June 2018

2018-06-06T07:50:04Z

Ollvihe at 09:15, 16 March 2018

2018-03-16T09:15:53Z

Ollvihe: Ollvihe moved page Bubble chart using HTML Presentation Object to HTML Presentation Object: Bubble chart without leaving a redirect

2018-02-06T16:46:48Z

Ollvihe moved page Bubble chart using HTML Presentation Object to HTML Presentation Object: Bubble chart without leaving a redirect

Ollvihe at 09:37, 15 December 2017

2017-12-15T09:37:16Z

Ollvihe at 20:05, 6 December 2017

2017-12-06T20:05:29Z

Ollvihe at 19:57, 6 December 2017

2017-12-06T19:57:09Z

Ollvihe: Created page with "

 data0=CreateDataset(Array('Risk', 'Value', 'Cost', 'Category')) data1=AddDatasetRow([data0], 4, 1, 6, 'Category 1') data2=AddDatasetRow([data1], 8, 5, 4, 'Category 2') d..."

2017-12-06T19:38:32Z

Created page with "<pre> data0=CreateDataset(Array('Risk', 'Value', 'Cost', 'Category')) data1=AddDatasetRow([data0], 4, 1, 6, 'Category 1') data2=AddDatasetRow([data1], 8, 5, 4, 'Category 2') d..."

New page

<pre>
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')
</pre>

<pre>
<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 with random data'
},
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(data, mappings, groupColumn, groupAttribute, innerArrayAttribute) {
var output = [];
var namesToMap = Object.getOwnPropertyNames(mappings);
for (var i = 0; i < data.length; i++) {
var row = {};
var mappedColumns = [];
for (var j = 0; j < namesToMap.length; j++) {
row[namesToMap[j]] = data[i][mappings[namesToMap[j]]];
mappedColumns.push(mappings[namesToMap[j]]);
}
var dataColumns = Object.getOwnPropertyNames(data[i]);
for (j = 0; j < dataColumns.length; j++) {
if (mappedColumns.indexOf(dataColumns[j]) == -1) {
row[dataColumns[j]] = data[i][dataColumns[j]];
}
}
output.push(row);
}

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

← Older revision		Revision as of 07:50, 6 June 2018
Line 120:		Line 120:
	</script>		</script>
	</pre>		</pre>
		+
		+	[[Category: QPR UI]]

@@ Line 2: / Line 2: @@
 <pre>
-data0=CreateDataset(Array('Risk', 'Value', 'Cost', 'Category'))
+data=CreateDataset(Array('Risk', 'Value', 'Cost', 'Category'))
-data1=AddDatasetRow([data0], 4, 1, 6, 'Category 1')
+data=AddDatasetRow([data], 4, 1, 6, 'Category 1')
-data2=AddDatasetRow([data1], 8, 5, 4, 'Category 2')
+data=AddDatasetRow([data], 8, 5, 4, 'Category 2')
-data3=AddDatasetRow([data2], 1, 9, 4, 'Category 3')
+data=AddDatasetRow([data], 1, 9, 4, 'Category 3')
-data4=AddDatasetRow([data3], 3, 2, 8, 'Category 1')
+data=AddDatasetRow([data], 3, 2, 8, 'Category 1')
-data5=AddDatasetRow([data4], 3, 8, 9, 'Category 3')
+data=AddDatasetRow([data], 3, 8, 9, 'Category 3')
-data6=AddDatasetRow([data5], 7, 4, 5, 'Category 2')
+data=AddDatasetRow([data], 7, 4, 5, 'Category 2')
-data7=AddDatasetRow([data6], 6, 7, 6, 'Category 1')
+data=AddDatasetRow([data], 6, 7, 6, 'Category 1')
-data8=AddDatasetRow([data7], 9, 1, 7, 'Category 4')
+data=AddDatasetRow([data], 9, 1, 7, 'Category 4')
-data9=AddDatasetRow([data8], 2, 3, 4, 'Category 1')
+data=AddDatasetRow([data], 2, 3, 4, 'Category 1')
-data10=AddDatasetRow([data9], 8, 6, 7, 'Category 4')
+data=AddDatasetRow([data], 8, 6, 7, 'Category 4')
 </pre>

← Older revision	Revision as of 16:46, 6 February 2018
(No difference)

@@ Line 74: / Line 74: @@
        title: ""
      },
-     series: formatDataset(poData<#uniqueId>, {"x": "Value", "y": "Risk", "x": "Value", "z": "Cost"}, "Category", "name", "data")
+     series: formatDataset(poData<#uniqueId>, {"x": "Value", "y": "Risk", "z": "Cost"}, "Category", "name", "data")
    });
+}

@@ Line 61: / Line 61: @@
      },
      title: {
-       text: 'Example bubble chart with random data'
+       text: 'Example bubble chart'
      },
      credits: {
@@ Line 78: / Line 78: @@
+}
-function formatDataset(data, mappings, groupColumn, groupAttribute, innerArrayAttribute) {
+function formatDataset(inputData, mappings, groupColumn, groupAttribute, innerArrayAttribute) {
-   var output = [];
+   var mappedData = [];
    var namesToMap = Object.getOwnPropertyNames(mappings);
-   for (var i = 0; i < data.length; i++) {
+   for (var i = 0; i < inputData.length; i++) {
      var row = {};
      var mappedColumns = [];
      for (var j = 0; j < namesToMap.length; j++) {
-       row[namesToMap[j]] = data[i][mappings[namesToMap[j]]];
+       row[namesToMap[j]] = inputData[i][mappings[namesToMap[j]]];
        mappedColumns.push(mappings[namesToMap[j]]);
+     }
-     var dataColumns = Object.getOwnPropertyNames(data[i]);
+     var dataColumns = Object.getOwnPropertyNames(inputData[i]);
      for (j = 0; j < dataColumns.length; j++) {
        if (mappedColumns.indexOf(dataColumns[j]) == -1) {
-         row[dataColumns[j]] = data[i][dataColumns[j]];
+         row[dataColumns[j]] = inputData[i][dataColumns[j]];
+       }
+     }
-     output.push(row);
+     mappedData.push(row);
+   }
    if (groupColumn == null) {
-     return output;
+     return mappedData;
    } else {
      var groups = {};
-     for (var i = 0; i < output.length; i++) {
+     for (var i = 0; i < mappedData.length; i++) {
-       var groupName = output[i][groupColumn];
+       var groupName = mappedData[i][groupColumn];
        if (groups[groupName] == null) groups[groupName] = [];
-       groups[groupName].push(output[i]);
+       groups[groupName].push(mappedData[i]);
-       delete output[i][groupColumn];
+       delete mappedData[i][groupColumn];
+     }
-     var outputArray = [];
+     var groupedData = [];
      var groupNames = Object.getOwnPropertyNames(groups);
      for (var i = 0; i < groupNames.length; i++) {
-       var groupItem = {};
+       var group = {};
-       groupItem[groupAttribute] = groupNames[i];
+       group[groupAttribute] = groupNames[i];
-       groupItem[innerArrayAttribute] = groups[groupNames[i]];
+       group[innerArrayAttribute] = groups[groupNames[i]];
-       outputArray.push(groupItem);
+       groupedData.push(group);
+     }
-     return outputArray;
+     return groupedData;
+   }
+}
 </script>
 </pre>

@@ Line 1: / Line 1: @@
 <pre>
 data0=CreateDataset(Array('Risk', 'Value', 'Cost', 'Category'))
@@ Line 13: / Line 15: @@
 </pre>
 <pre>
 <div id="container<#uniqueId>"></div>
@@ Line 52: / Line 55: @@
    $("#container<#uniqueId>").empty();
    Highcharts.chart("container<#uniqueId>", {
      chart: {
-        type: 'bubble',
+      type: 'bubble',
-        plotBorderWidth: 1,
+      plotBorderWidth: 1,
-        zoomType: 'xy'
+      zoomType: 'xy'
      },
      title: {
-        text: 'Example bubble chart with random data'
+      text: 'Example bubble chart with random data'
      },
      credits: {
@@ Line 65: / Line 67: @@
      },
      xAxis: {
-        gridLineWidth: 1
+      gridLineWidth: 1
      },
      yAxis: {
-        startOnTick: false,
+      startOnTick: false,
-        endOnTick: false,
+      endOnTick: false,
-        title: ""
+      title: ""
      },
      series: formatDataset(poData<#uniqueId>, {"x": "Value", "y": "Risk", "x": "Value", "z": "Cost"}, "Category", "name", "data")