I currently have a pie chart displaying smoothly on my webpage, but now I am looking to add a treemap as well. The code snippet for the treemap includes the package {'packages':['treemap']}. It has been stated that only one call should be made to load function google.charts.load(). Even with the code structure in place, the treemap is not rendering properly.
$(document).ready(function () {
$("#submit").click(function () {
$("#pages").hide();
var datefrom = $('#fromdatecalendar').val()
var dateto = $('#todatecalendar').val()
var model = $("#model_name").val().toString();
var queryObject = "";
var queryObjectLen = "";
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.load('current', { 'packages': ['treemap'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "connect.jsp",
type: "POST",
data: { datetype: $('#fromdatecalendar').val(), datatocal: $('#todatecalendar').val(), model: $("#model_name").val().toString() },
success: function (datas) {
var jsonData = JSON.parse(datas);
//loadData(jsondata);
var data = new google.visualization.DataTable();
var data2 = new google.visualization.DataTable();
// assumes "word" is a string and "count" is a number
data.addColumn('string', 'CATEGORY');
data.addColumn('number', 'COUNT_CAT');
data2.addColumn('string', 'CATEGORY');
data2.addColumn('string', 'SUB_CATEGORY');
data2.addColumn('string', 'SUB_CATEGORY_2');
data2.addColumn('string', 'SUB_CATEGORY_3');
data2.addColumn('string', 'SUB_CATEGORY_4');
data2.addColumn('string', 'SUB_CATEGORY_5');
data2.addColumn('number', 'COUNT_CAT');
for (var i = 0; i < jsonData.length; i++) {
data.addRow([jsonData[i].CATEGORY, jsonData[i].COUNT_CAT]);
}
for (var j = 0; i < jsonData.length; i++) {
data2.addRow([jsonData[j].CATEGORY, jsonData[j].SUB_CATEGORY, jsonData[j].SUB_CATEGORY_2, jsonData[j].SUB_CATEGORY_3, jsonData[j].SUB_CATEGORY_4, jsonData[j].SUB_CATEGORY_5, jsonData[j].COUNT_CAT]);
}
//alert(data);
var piechart_options = {
title: 'Category Count',
backgroundColor: '#f5f5f5',
pieSliceText: 'value',
is3D: true
};
var piechart = new google.visualization.PieChart(document.getElementById('chart_div'));
piechart.draw(data, piechart_options);
var barchart_options = {
title: 'Category',
backgroundColor: '#f5f5f5',
legend: 'none'
};
var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
barchart.draw(data, barchart_options);
var tree = new google.visualization.TreeMap(document.getElementById('treechart_div'));
tree.draw(data2, {
minColor: '#f00',
midColor: '#ddd',
maxColor: '#0d0',
headerHeight: 15,
fontColor: 'black',
showScale: true
});
var showsubcat = document.getElementById("showsub");
showsubcat.onclick = function () {
var view = new google.visualization.DataView(data);
view.hideColumns([1]);
piechart.draw(view, piechart_options);
}
},
error: function (xhr, type) {
alert('server error occoured')
}
});
}
});
});