I am trying to use google chart event listeners to make some exploding charts, like a pie chart explodes to a table which in turn explodes to some other chart.[Is there is some other way to do this would appreciate your suggestion.]
Approach > I have a pie chart which is showing up correctly on the page, on clicking any pie it should make a table (using google chart) with some different content. (my call to php page and the results returned are correct) but somehow the table chart is throwing error.
I am getting "container is not defined" error. I looked online for this, some folks said I need to define google.setOnLoadCallback so that all divs are loaded before the call is been made. I tried that but no luck. I know I am doing something silly, any help would be appreciated.
here is my JS, I have m_user_div and 'module_div' defined in my html page.
/*!ZZ
* Column chart for Most Used Modules.
* History
* 2015-Aug-10
*/
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(mostUsedModules);
function mostUsedModules(param) {
var syshost = param.value;
var jsonChartData = $.ajax(
{
url: "include/mostUsedModules.php",
data: "sys="+syshost,
dataType:"json", async: false
}
).responseText;
// Create our data table out of JSON data loaded from server.
var ChartData = new google.visualization.DataTable(
jsonChartData);
// Define Chart Options .
var options = {
title: 'Most Used Modules (Run Time)',
pieHole: 0.4,
sliceVisibilityThreshold: 0.4/8,
};
// Instantiate and draw chart.
var chart = new google.visualization.PieChart(document.getElementById('module_div'));
chart.draw(ChartData, options);
// ***CHART IS CORRECTLY SHOWN ON THE PAGE***
// Add our selection handler.
google.visualization.events.addListener(chart, 'select', selectHandler);
function selectHandler(e) {
// grab a few details before redirecting
var selection = chart.getSelection();
var row = selection[0].row;
var col = selection[0].column;
var module = ChartData.getValue(row,0);
google.load('visualization', '1.1', {packages: ['table']});
google.setOnLoadCallback(tableList(module));
}
function tableList(module) {
//alert(ChartData.getValue(row,0) + ChartData.getValue(row,1));
var jsonTableData = $.ajax(
{
url: "include/userList.php",
data: "module="+module,
datatype: "json", async: false
}
).responseText;
// *** userList.php returns a valid data in json format ***
// Create our datatable out of Json Data loaded from php call.
var TableData = new google.visualization.DataTable(jsonTableData);
google.load('visualization', '1.1', {packages: ['table']});
var tab_options = {title: 'List of Users Used this Module',
showRowNumber: true,
alternatingRowStyle: true,
height: 20}
// Instantiate and Draw our Table
var table = new google.visualization.Table(document.getElementById('m_user_div'));
table.draw(TableData, tab_options);
//location.href = 'http://www.google.com?row=' + row + '&col=' + col;
}
My html page -
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="dashboard_graph x_panel">
<div class="row x_title">
<div class="col-md-6">
<h2>Most Used Modules <small>Darter (2014-2015)</small>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link" ><i class="fa fa-chevron-up"></i></a></li>
</ul>
<div class="clearfix"></div>
</h2>
</div>
</div>
<div class="x_content">
<!-- <script type="text/javascript" src="js/google/mostUsedModules.js">
</script> -->
<div id="module_div"></div>
</div>
</div>
</div> <!-- col-md -->
<div class="col-md-8 col-sm-6 col-xs-12">
<div class="dashboard_graph x_panel">
<div class="row x_title">
<div class="col-md-6">
<h2>Most Used Modules <small>Darter (2014-2015)</small></h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<div class="x_content">
<script type="text/javascript" src="js/google/mostUsedModulesCompile.js">
</script>
<script type="text/javascript" src="js/google/mostUsedModules.js">
</script>
<div id="compile_module_div"></div>
<div id="m_user_div"></div>
</div>
</div>
</div> <!-- col-md -->
</div> <!-- row -->
I think I got the fix.
In function selectHandler, I need to remove
google.load('visualization', '1.1', {packages: ['table']});
google.setOnLoadCallback(tableList(module));
then add package 'table' to the first google.load at the start of my JS.
This fixed the problem as I got to know that div was not getting loaded before calling JS, though this is something that I already wrote in the question (based on my search) I never knew where to hit the hammer. Also, thanks gyanni_guy appreciate your help.
It seems loading visualization again seems to reset/remove the divs that are already loaded till that point.
The first line looks something like this now
google.load('visualization', '1', {packages: ['corechart','table']});