2015-10-20 7 views
5

Ich schreibe eine einfache Anwendung mit Flask. Ich verwende Google API zum Zeichnen von Diagrammen. Die erste Seite wird korrekt angezeigt."kann Eigenschaft Länge von Null nicht lesen" - Google

Correct output

Aber in den nächsten Seiten, die ich Fehler „kann nicht Länge von null lesen Eigentum“ immer bin.

Error

My-Code ist wie unten dargestellt:

-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> 
+0

Fehler bei welcher Linie? – vijayP

+0

calldata ist möglicherweise null, wenn Sie aufrufen, um "load" zu erhalten. –

+0

Ich erhalte keinen Fehler in meiner Konsole, sondern es wird ein Fehler in der Box angezeigt, anstatt mein Diagramm zu zeigen. Die erste Seite funktioniert einwandfrei. – sklearning

Antwort

2

Ich benutze Bootstrap-Tabs und wollen auf einer versteckten Tab ein Diagramm angezeigt werden und ich bekomme den gleichen Fehler wie Sie

Wenn ich das Diagramm auf einer aktiven Tabelle anzeigen, zeigt es sich perfekt.

Also ich denke, da ist etwas mit dem DOM verbunden und versteckte Elemente nichts mit Ihren Daten zu tun

Verwandte Themen