adding multiple (dynamic number) google charts in page - charts

Question

Am trying to create a test report from the xml file generated from the test suite run. I have to generate the google line chart for each activity in an application node in xml. Its dynamic and we dont know how many activities will be there under application tag.
so far i tried to generate the line charts using the callback method in a for loop but, all the graphs are having the same data. when i debugged the code i found that the code in call back method to create the datatable is always executing for the last activity and generating the same chart for each activity.
here is the code i tried
html
<div id="container">
<div id="report" class="table-responsive">
<select id="app" name="app" aria-placeholder="Select Application">
<option>-- Select Application --</option>
</select>
<select id="activity" name="activity" aria-placeholder="Select Activity">
<option>-- Select Activity --</option>
</select>
<select id="type" name="type" aria-placeholder="Select StartupType">
<option value="coldstart" >Cold</option>
<option value="warmstart" selected>Warm</option>
</select>
<br/>
<div id="chartContainer">
</div>
</div>
<div align="center" class="loader">
<img src="images/loader.gif" id="load" width="400" height="400" align="absmiddle" />
</div>
</div>
javascript
var appXml;
var summaryXml;
$(document).ready(function () {
prepareCharts();
$("#app").change(function () {
var app = $(this).val();
if (app != "") {
$(appXml).find('package').each(function () {
if ($(this).attr('appname') == app) {
var options = '<option value="">-- Select activity --</option>';
$(this).find('activity').each(function () {
options += '<option value="' + $(this).attr('activityname') + '">' + $(this).attr('activityname') + '</option>';
});
$('#activity').html(options);
}
});
}
});
$("#activity").change(function () {
if ($(this).val() != "")
drawActivityChart();
else
drawActivityCharts(appXml, $('#type').val());
});
$('#type').change(function () {
var type = $(this).val();
if ($('#activity').val() == "")
drawActivityCharts(appXml, type);
else
drawActivityChart();
});
});
function prepareCharts() {
$.ajax({
type: "GET",
url: "Startuptime.xml",
dataType: "xml",
success: drawCharts
});
}
function drawCharts(xml) {
console.log('drawing charts');
appXml = xml;
prepareDropdowns(xml);
drawActivityCharts(xml);
}
function prepareDropdowns(xml) {
var options = '<option value="">-- Select application --</option>';
$(xml).find('package').each(function () {
options += '<option value="' + $(this).attr('appname') + '">' + $(this).attr('appname') + '</option>';
});
$('#app').html(options);
$('#app option:nth-child(2)').attr('selected', 'selected').change();
}
function drawActivityCharts(xml, type) {
$('#chartContainer').children().remove();
if (typeof type === 'undefined')
type = 'warmstart';
google.charts.load('current', { 'packages': ['corechart'] });
var app = $('#app').val();
$(xml).find('package').each(function () {
var that = this;
if ($(that).attr('appname') == app) {
var i = 1;
$(that).find('activity').each(function () {
var activityName = $(this).attr('activityname');
console.log(i);
console.log(activityName);
i++;
if ($(this).find(type).length > 0) {
that = this;
$('#chartContainer').append('<div id="' + activityName + '"></div>')
google.charts.setOnLoadCallback(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Occurance');
data.addColumn('number', 'Time');
var row = 1;
$(that).children(type).find('displaytime').each(function () {
data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
row++;
});
// Set chart options
var options = {
'title': activityName,
'width': 800,
'height': 200
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById(activityName));
chart.draw(data, options);
});
}
});
}
});
}
function drawActivityChart() {
$('#chartContainer').children().remove();
google.charts.load('current', { 'packages': ['corechart'] });
var app = $('#app').val();
var activity = $('#activity').val();
var type = $('#type').val();
$(appXml).find('package').each(function () {
var that = this;
if ($(that).attr('appname') == app) {
$(that).find('activity').each(function () {
var activityName = $(this).attr('activityname');
if (activityName == activity) {
if ($(this).find(type).length > 0) {
that = this;
$('#chartContainer').append('<div id="' + activityName + '"></div>')
google.charts.setOnLoadCallback(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Occurance');
data.addColumn('number', 'Time');
var row = 1;
$(that).find('displaytime').each(function () {
data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
row++;
});
// Set chart options
var options = {
'title': activityName,
'width': 800,
'height': 200
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById(activityName));
chart.draw(data, options);
});
}
}
});
}
});
}
drawActivityCharts() is the method which has to draw the activity charts
and xml schema will be like below.
<?xml version='1.0' encoding='UTF-8' ?>
<appstartuptime>
<package appname="appname" name="packagename" packageversion="version">
<activity activityname="activityname">
<coldstart numberoftimes="1">
<displaytime>
<timetoinitialdisplay>841</timetoinitialdisplay>
</displaytime>
</coldstart>
</activity>
<activity activityname="activityname">
<warmstart numberoftimes="2">
<displaytime>
<timetoinitialdisplay>454</timetoinitialdisplay>
</displaytime>
<displaytime>
<timetoinitialdisplay>467</timetoinitialdisplay>
</displaytime>
</warmstart>
</activity>
</package>
</appstartuptime>

Answer 1

both google.charts.load and google.charts.setOnLoadCallback only need to be called once per page load.
in addition, google.charts.load will wait on the page to load by default,
as such, it can be used in place of $(document).ready
you can also include google's callback in the load statement.
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
or use the promise it returns.
google.charts.load('current', {
packages:['corechart']
}).then(drawChart);
given this, recommend loading google first,
then you can draw as many charts as needed.
i didn't go thru all of the code, but something similar to the following should work...
var appXml;
var summaryXml;
google.charts.load('current', {
packages:['corechart']
}).then(function () {
prepareCharts();
$("#app").change(function () {
var app = $(this).val();
if (app != "") {
$(appXml).find('package').each(function () {
if ($(this).attr('appname') == app) {
var options = '<option value="">-- Select activity --</option>';
$(this).find('activity').each(function () {
options += '<option value="' + $(this).attr('activityname') + '">' + $(this).attr('activityname') + '</option>';
});
$('#activity').html(options);
}
});
}
});
$("#activity").change(function () {
if ($(this).val() != "")
drawActivityChart();
else
drawActivityCharts(appXml, $('#type').val());
});
$('#type').change(function () {
var type = $(this).val();
if ($('#activity').val() == "")
drawActivityCharts(appXml, type);
else
drawActivityChart();
});
});
function prepareCharts() {
$.ajax({
type: "GET",
url: "Startuptime.xml",
dataType: "xml",
success: drawCharts
});
}
function drawCharts(xml) {
console.log('drawing charts');
appXml = xml;
prepareDropdowns(xml);
drawActivityCharts(xml);
}
function prepareDropdowns(xml) {
var options = '<option value="">-- Select application --</option>';
$(xml).find('package').each(function () {
options += '<option value="' + $(this).attr('appname') + '">' + $(this).attr('appname') + '</option>';
});
$('#app').html(options);
$('#app option:nth-child(2)').attr('selected', 'selected').change();
}
function drawActivityCharts(xml, type) {
$('#chartContainer').children().remove();
if (typeof type === 'undefined')
type = 'warmstart';
var app = $('#app').val();
$(xml).find('package').each(function () {
var that = this;
if ($(that).attr('appname') == app) {
var i = 1;
$(that).find('activity').each(function () {
var activityName = $(this).attr('activityname');
console.log(i);
console.log(activityName);
i++;
if ($(this).find(type).length > 0) {
that = this;
$('#chartContainer').append('<div id="' + activityName + '"></div>')
var data = new google.visualization.DataTable();
data.addColumn('number', 'Occurance');
data.addColumn('number', 'Time');
var row = 1;
$(that).children(type).find('displaytime').each(function () {
data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
row++;
});
// Set chart options
var options = {
'title': activityName,
'width': 800,
'height': 200
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById(activityName));
chart.draw(data, options);
}
});
}
});
}
function drawActivityChart() {
$('#chartContainer').children().remove();
var app = $('#app').val();
var activity = $('#activity').val();
var type = $('#type').val();
$(appXml).find('package').each(function () {
var that = this;
if ($(that).attr('appname') == app) {
$(that).find('activity').each(function () {
var activityName = $(this).attr('activityname');
if (activityName == activity) {
if ($(this).find(type).length > 0) {
that = this;
$('#chartContainer').append('<div id="' + activityName + '"></div>')
var data = new google.visualization.DataTable();
data.addColumn('number', 'Occurance');
data.addColumn('number', 'Time');
var row = 1;
$(that).find('displaytime').each(function () {
data.addRow([row, parseFloat($.trim($(this).find('timetoinitialdisplay').text()))]);
console.log(row + " " + parseFloat($.trim($(this).find('timetoinitialdisplay').text())));
row++;
});
// Set chart options
var options = {
'title': activityName,
'width': 800,
'height': 200
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById(activityName));
chart.draw(data, options);
}
}
});
}
});
}