Menu
I am writing a simple application using Flask. I am using Google API for drawing graphs. The first page displays correctly.
But in the next pages I am getting "cannot read property length of null" error.
My Code is as shown below:
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="refresh" content="100; URL=http://127.0.0.1:5000/">
<title>Test</title>
<!-- Bootstrap Core CSS -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<link href="static/css/bootstrap-multiselect.css" rel="stylesheet">
<link href="static/css/new.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="static/lib/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<!-- JavaScript -->
<script src="static/js/jquery.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-multiselect.js"></script>
<script src="static/js/Chart.js-master/Chart.js"></script>
</head>
<body onload = onLoading()>
<div class="container">
<div class="col-xs-12">
<div class="page-header">
<h3><b>Test</b></h3>
</div>
<div class="carousel slide" id="myCarousel">
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
<!-- Slide1 -->
<div class="carousel-inner" id="imp">
<!-- /Slide1 -->
</div><!-- /Carousel inner -->
</div><!-- /#myCarousel -->
</div><!-- /.col-xs-12 -->
</div><!-- /.container -->
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 3000
})
});
function onLoading() {
//alert("Inside");
$.get("/load",function(calldata,status) {
//console.log(calldata);
//alert(calldata.length);
var num_nodes = calldata.length;
var loop = 0;
for (i=0;i<num_nodes;i++) {
if (i%4==0) {
if (i==0) {
var divoutput = document.getElementById("imp");
var divhtml = '<div class="item active" id="c'+(i/4)+'"></div>';
divoutput.innerHTML = divoutput.innerHTML+divhtml;
alert(i);
console.log(divoutput.innerHTML);
} else {
var divoutput = document.getElementById("imp");
var divhtml = '<div class="item" id="c'+(i/4)+'"></div>';
divoutput.innerHTML = divoutput.innerHTML+divhtml;
loop = i/4;
alert(loop);
console.log(divoutput.innerHTML);
}
}
var data = new google.visualization.DataTable();
data.addColumn('string', 'Errors');
data.addColumn('number', 'Statistics');
data.addRows([
['Success', calldata[i].errors.success],
['Authorization Failure', calldata[i].errors.auth_failure],
['Feature Failure', calldata[i].errors.feature_failure],
['FSOL Failure', calldata[i].errors.fsol_failure]
]);
var options = {
title: calldata[i].node_name,
is3D: true,
backgroundColor:'#ECECEA',
};
var output = document.getElementById("c"+loop);
//alert("***"+document.getElementById("c"+loop));
var html = '<div class="col-sm-6"><div class="fff"><div class="thumbnail" id="i'+i+'"></div></div></div>';
//alert(html);
output.innerHTML = output.innerHTML + html;
var tmp = "i";
var ele_id = tmp.concat(i);
//alert(ele_id);
if (calldata[i].errors.success < calldata[i].errors.auth_failure) {
document.getElementById("i"+i).style.backgroundColor = "red";
}
google.setOnLoadCallback(drawChart(ele_id,data,options));
}
});
}
function drawChart(ele_id,data,options)
{
google.load("visualization", "1", {packages:["corechart"]});
//alert(ele_id);
//alert("draw"+document.getElementById(ele_id));
var chart = new google.visualization.PieChart(document.getElementById(ele_id));
chart.draw(data, options);
}
</script>
</body>
</html>
723
I use bootstrap tabs and want to display a graph on a hidden tab and I get the same error as you
When I display the graph on an active table it show's up perfectly.
So I guess there is something linked to the DOM and hidden elements nothing to do with your data
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
