Hi All, I have a sample script with hard coded data and I want to modify it to work with my dataset,
my dataset name is "mydataset" xAxisCategoriesColumn : "<City>" , yAxisCategoriesColumn : "<area>, seriesValueColumn : "<code>"
the sample script I have is :
could anyone please plase the valuse I provided on hard coded script,
thanks
var config = {
xAxisCategoriesColumn : '<xxx>',
yAxisCategoriesColumn : '<xxx>',
seriesValueColumn : '<xxx>'
};
config.testMode = config.xAxisCategoriesColumn == null
|| config.xAxisCategoriesColumn == '<xxx>'
|| config.yAxisCategoriesColumn == null
|| config.yAxisCategoriesColumn == '<xxx>'
|| config.seriesValueColumn == null
|| config.seriesValueColumn == '<xxx>';
var customViz = this;
var chartConfig = {
chart : {
type : 'heatmap',
marginTop : 40,
marginBottom : 40,
style : {
color : '#555555',
fontFamily : 'Arial',
fontSize : '14px'
}
},
title : {
text : 'Heat Map',
style : {
color : '#333333',
fontSize : '16px',
fontWeight : 'bold'
}
},
credits:{
enabled:false
},
xAxis : {
categories : [ 'Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas',
'Maria', 'Leon', 'Anna', 'Tim', 'Laura' ]
},
yAxis : {
categories : [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday' ],
title : null
},
colorAxis : {
minColor : '#FFFFFF',
maxColor : '#7cb5ec'
},
legend : {
align : 'right',
layout : 'vertical',
margin : 0,
verticalAlign : 'top',
y : 25
},
tooltip : {
formatter : function() {
return '<b>' + this.series.xAxis.categories[this.point.x]
+ '</b> sold <br><b>' + this.point.value
+ '</b> items on <br><b>'
+ this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series : [ {
name : 'Sales per employee',
borderWidth : 1,
borderColor : '#FFFFFF',
data : [ [ 0, 0, 10 ], [ 0, 1, 19 ], [ 0, 2, 8 ], [ 0, 3, 24 ] ],
states : {
hover : {
color : '#777777'
}
},
dataLabels : {
enabled : true,
style : {
color : '#333333',
textShadow : 'none',
HcTextStroke : null,
fontSize : '16px',
fontWeight : 'bold'
}
}
} ]
}
customize();
function customize() {
if (!config.testMode && customViz.getData()) {
var data = customViz.getData();
chartConfig.xAxis.categories = getAxisArray(data,
config.xAxisCategoriesColumn);
chartConfig.yAxis.categories = getAxisArray(data,
config.yAxisCategoriesColumn);
chartConfig.series[0].data = transform(data);
if (!chartConfig.colorAxis.min && chartConfig.series[0].data[0]
&& chartConfig.series[0].data[0].length == 3) {
chartConfig.colorAxis.min = chartConfig.series[0].data[0][2];
}
if (!chartConfig.colorAxis.max && chartConfig.series[0].data
&& chartConfig.series[0].data.length > 0) {
chartConfig.colorAxis.max = chartConfig.series[0].data[chartConfig.series[0].data.length - 1][2];
}
}
var birtOpts = customViz.getBirtOpts();
if (birtOpts.theme == 'Modern') {
chartConfig.colorAxis.minColor = '#B0D24E';
chartConfig.colorAxis.maxColor = '#C53C34';
} else if (birtOpts.theme == 'Clean Blue') {
chartConfig.colorAxis.minColor = '#FFFFFF';
chartConfig.colorAxis.maxColor = '#7CADD1';
} else if (birtOpts.theme == 'Warm Red') {
chartConfig.colorAxis.minColor = '#FFFFFF';
chartConfig.colorAxis.maxColor = '#C44E32';
} else if (birtOpts.theme == 'Grayscale') {
chartConfig.colorAxis.minColor = '#FFFFFF';
chartConfig.colorAxis.maxColor = '#9C9C9C';
}
}
function getAxisArray(data, columnName) {
if (!data) {
return null;
}
var axisArr = [];
var pos = $.inArray(columnName, data.columns);
if (pos < 0) {
return null;
}
var rawdata = data.rows;
for (var i = 0; i < rawdata.length; i++) {
if ($.inArray(rawdata[i][pos], axisArr) < 0) {
axisArr.push(rawdata[i][pos]);
}
}
return axisArr;
}
function getIndexByCategories(data, index, categories, type, columnName) {
if (!categories.length || categories.length <= 0) {
return null;
}
if (type == 'x') {
var pos = $.inArray(columnName, data.columns);
if (pos < 0) {
return null;
}
for (var i = 0; i < categories.length; i++) {
if (data.rows[index][pos] == categories[i]) {
return i;
}
}
} else if (type == 'y') {
var pos = $.inArray(columnName, data.columns);
if (pos < 0) {
return null;
}
for (var i = 0; i < categories.length; i++) {
if (data.rows[index][pos] == categories[i]) {
return i;
}
}
} else {
return null;
}
return null;
}
function transform(data) {
if (!data) {
return null;
}
var dataArray = [];
var totalCountNum = data.rows.length;
xCategories = getAxisArray(data, config.xAxisCategoriesColumn);
yCategories = getAxisArray(data, config.yAxisCategoriesColumn);
if (xCategories && xCategories.length > 0 && yCategories
&& yCategories.length > 0) {
for (var i = 0; i < totalCountNum; i++) {
var item = [];
item.push(getIndexByCategories(data, i, xCategories, 'x',
config.xAxisCategoriesColumn));
item.push(getIndexByCategories(data, i, yCategories, 'y',
config.yAxisCategoriesColumn));
var pos = $.inArray(config.seriesValueColumn, data.columns);
if (pos < 0) {
item.push(null);
}
var dataVal = data.rows[i][pos];
item.push(format(dataVal));
dataArray.push(item);
}
}
dataArray.sort(function(a, b) {
if (a.length == 3 && b.length == 3) {
return Number(a[2]) - Number(b[2]);
}
return a;
});
return dataArray;
}
// format the float to 2 digits.
function format(val) {
if (!Number(val)) {
return 0;
}
val = Number(val);
if (isFloat(val)) {
val = val.toFixed(2);
}
return val;
}
function isFloat(n) {
return n === +n && n !== (n | 0);
}
var callback = function() {
var heatmapChart = $('#' + customViz.getId()).highcharts(chartConfig);
customViz.setDelegate(heatmapChart);
customViz.setPrintReady();
}
head.load('http://code.highcharts.com/highcharts.js',
'http://code.highcharts.com/modules/heatmap.js', callback);