Google Charts Dashboard lädt nur, wenn ich rechts auf inspect Element klicken

Ich möchte einige Dashboard-Charts (like these ones), zum Beispiel ein PieChart und ein BarChart zeigen.Google Charts Dashboard lädt nur, wenn ich rechts auf inspect Element klicken

Das Problem, das ich gefunden habe, ist, dass diese Diagramme nicht angezeigt werden, es sei denn, ich rechne auf Inspect Element. Und umgekehrt, wenn ich die inspect Element Werkzeuge bereits geöffnet habe, sind die Diagramme nicht entweder bis Ich schließe die inspizieren Elemente Werkzeuge.

Ich benutze Bootstrap, schlanke Rahmen und eloquente Orm.

Im Falle des PieChart zeigten die Abtastdaten ist die folgende:

 [ 
      { 
       Area: "Actores y Procesos Sociales", 
       Cantidad: 49 
      }, 
      { 
       Area: "Población y Estudios Demográficos", 
       Cantidad: 41 
      }, 
      { 
       Area: "Estudios Agrarios", 
       Cantidad: 40 
      }, 
      { 
       Area: "Instituciones Políticas", 
       Cantidad: 35 
      }, 
      { 
       Area: "Sociedad y Cultura", 
       Cantidad: 30 
      }, 
      { 
       Area: "Estudios Urbanos y Regionales", 
       Cantidad: 26 
      }, 
      { 
       Area: "Estudios de la Educación y la Ciencia", 
       Cantidad: 23 
      } 
     ]

Hier ist der Code für sowohl die PieChart und dem BarChart:

im HTML-:

<head> 
    <link href="http://132.248.234.17/sica15/public/assets/css/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="/metisMenu/dist/metisMenu.min.css" rel="stylesheet"> 
    <link href="/assets/css/font-awesome-4.6.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link href="/assets/css/sbadmin2-sidebar-toggle.css" rel="stylesheet" /> 
</head> 
<body> 
    <div id="page-wrapper"> 
     <div class="container-fluid"> 
      <div class="row"> 
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
         <div id="projectresearcher"> 
          <div id="numberRangeFilter_control_div"></div> <div id="numberRangeFilter_chart_div"></div> 
         </div> 
        </div> 
     </div> 

     <div class="row"> 
        <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8"> 
         <div id="institucionesPporproyecto_div"> 
          <div id="numberRangeFilter_control_div_2"></div> <div id="numberRangeFilter_chart_div_2"></div> 
         </div> 
        </div> 
      </div> 
     </div> 
    </div>

im Skript:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script src="http:/assets/js/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js"></script> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript"> 
     google.charts.load('current', {'packages':['corechart','table','controls'],'language': 'es'}); 
     google.charts.setOnLoadCallback(proyectosporarea); 
     google.charts.setOnLoadCallback(institucionesPporproyecto); 


    function proyectosporarea() {/*PROYECTOS POR ÁREA*/ 

     var data = new google.visualization.DataTable(); 
     var proyectosporarea = {{proyectosporarea|json_encode|raw}}; 
     var totalproyectos = 0; 
     data.addColumn('string', 'Área'); 
     data.addColumn('number', 'Cantidad'); 
     $.each(proyectosporarea, function(index, value){ 
      var Cantidad = parseInt(value.Cantidad); 
      totalproyectos += Cantidad; 
      data.addRow([value.Area,Cantidad]); 
     }); 

     var dashboard = new google.visualization.Dashboard(document.getElementById('projectarea'));//var chart = new google.visualization.PieChart(document.getElementById('projectarea')); 

     // Create a range slider, passing some options 
     var donutRangeSlider = new google.visualization.ControlWrapper({ 
      'controlType': 'NumberRangeFilter', 
      'containerId': 'numberRangeFilter_control_div', 
      'options': { 
       'filterColumnLabel': 'Cantidad' 
      } 
     }); 

     // Create a pie chart, passing some options 
     var pieChart = new google.visualization.ChartWrapper({ 
      'chartType': 'PieChart', 
      'containerId': 'numberRangeFilter_chart_div', 
      'options': { 
       title: 'Número de proyectos vigentes por área de investigación (total: '+totalproyectos+')', 
       backgroundColor: { fill:'transparent'}, 
       height: 500, 
      } 
     }); 

     dashboard.bind(donutRangeSlider, pieChart); 


     function resizeHandler() { 
      dashboard.draw(data);//chart.draw(data, options); 
     } 
     if (window.addEventListener) { 
      window.addEventListener('resize', resizeHandler, false); 
     } 
     else if (window.attachEvent) { 
      window.attachEvent('onresize', resizeHandler); 
     } 
    }/*Fin de drawChart() Proyectos por área*/ 

function institucionesPporproyecto() {/*INSTITUCIONES POR NÚMERO DE PROYECTOS*/ 
     var data = new google.visualization.DataTable(); 
     var proyectosporarea = {{institucionesPporproyecto|json_encode|raw}}; 
     var total = 0; 
     var totalInvestigadores = 0; 
     data.addColumn('string', 'Institución'); 
     data.addColumn('number', 'Cantidad'); 
     data.addColumn({type: 'string', role: 'annotation'}); 
     //Sumando los totales para después calcular el porcentaje 
     $.each(proyectosporarea, function(indice,valor){ 
      var Cantidad = parseInt(valor.Cantidad); 
      var Total = parseInt(Cantidad); 
      total += Total; 
     }); 
     $.each(proyectosporarea, function(index, value){ 
      var Cantidad = parseInt(value.Cantidad); 
      var Porcentaje = ((Cantidad/total)*100); 
      if(Porcentaje % 1 != 0){ 
       Porcentaje = Porcentaje.toFixed(0)+'%'; 
      }else{ 
       Porcentaje = Porcentaje + '%'; 
      } 
      totalInvestigadores=totalInvestigadores+1; 
      data.addRow([value.Institucion,Cantidad,Porcentaje]); 
     }); 

     var view = new google.visualization.DataView(data); view.setColumns([0, 1]); 
     var table = new google.visualization.Table(document.getElementById('institucionesPporproyecto_t')); 
     table.draw(view, {width: '100%', height: '100%'}); 

     var dashboard2 = new google.visualization.Dashboard(document.getElementById('institucionesPporproyecto_div'));/*Cambie chart por dashboard*/ 
     var control2 = new google.visualization.ControlWrapper({ 
      'controlType':'NumberRangeFilter', 
      'containerId':'numberRangeFilter_control_div_2', 
      'options':{ 
       'filterColumnIndex':1, 
       'minValue':0, 
       //'maxValue':60, 
      } 
     }); 
     var chart = new google.visualization.ChartWrapper({ 
      'chartType':'BarChart', 
      'containerId':'numberRangeFilter_chart_div_2', 
      'options':{ 
       title: 'Número de proyectos por institución participante (Total de Instituciones: '+totalInvestigadores+').', 
       chartArea: {width: '45%'}, 
       hAxis: { 
        title: 'Cantidad de proyectos', 
        minValue: 0 
       }, 
       vAxis: { 
        title: 'Instituciones' 
       }, 
       height: 1400, 
       //width: 1200, 
      } 
     }); 

     dashboard2.draw(view);//chart.draw(view); 
     google.visualization.events.addListener(table, 'sort', 
       function(event) { 
        data.sort([{column: event.column, desc: !event.ascending}]); 
        dashboard2.draw(view);//chart.draw(view); 
       }); 

     //chart.draw(data, options); Aquí ando 
     dashboard2.bind(control2,chart); 
     function resizeHandler() { 
      dashboard2.draw(data);//chart.draw(data, options); 
     } 
     if (window.addEventListener) { 
      window.addEventListener('resize', resizeHandler, false); 
     } 
     else if (window.attachEvent) { 
      window.attachEvent('onresize', resizeHandler); 
     } 
    }/*Fin de drawChart() Tabla Instituciones por número de proyectos*/ 

    </script>

Warum passiert das? Was muss ich beheben, damit diese Diagramme direkt nach dem Öffnen des URI im Browser angezeigt werden?

Gelöst Das Problem in diesem Teil war, wo es das ist function resizeHandler():

Ich hatte:

 dashboard2.bind(control2,chart); 
     /*http://stackoverflow.com/a/18984903/1883256*/   
     function resizeHandler() { /*This helps make the chart responsive*/ 
      dashboard2.draw(data); 
     } 
     if (window.addEventListener) { 
      window.addEventListener('resize', resizeHandler, false); 
     } 
     else if (window.attachEvent) { 
      window.attachEvent('onresize', resizeHandler); 
     }

Statt:

 dashboard2.bind(control2,chart); 
     dashboard2.draw(data); 
     /*http://stackoverflow.com/a/18984903/1883256*/ 
     function resizeHandler() {/*This helps make the chart responsive*/ 
      dashboard2.draw(data); 
     } 
     if (window.addEventListener) { 
      window.addEventListener('resize', resizeHandler, false); 
     } 
     else if (window.attachEvent) { 
      window.attachEvent('onresize', resizeHandler); 
     }

Also, ich wiederhole musste der Ruf der dashboard.draw(data); sowohl innerhalb der function resizeHandler() und außerhalb, Belo w die dashboard.bind() Funktion.

Quelle

2016-08-08 Pathros

erste sollte setOnLoadCallback nur einmal pro Seite zu laden aufgerufen werden
und Sie die 'callback' in google.charts.load

versuchen ersetzen diese umfassen kann ...

google.charts.load('current', {'packages':['corechart','table','controls'],'language': 'es'}); 
google.charts.setOnLoadCallback(proyectosporarea); 
google.charts.setOnLoadCallback(institucionesPporproyecto);

mit diesem ...

google.charts.load('current', { 
     'callback': function() { 
     proyectosporarea(); 
     institucionesPporproyecto(); 
     }, 
     'packages': ['corechart','table','controls'], 
     'language': 'es' 
    });

Als nächstes benötigt jedes Wrapper-Objekt ein dom-Element
in Funktion proyectosporarea, erscheinen die Objekte die falsche containerId
siehe Kommentare im folgenden Ausschnitt haben ...

var donutRangeSlider = new google.visualization.ControlWrapper({ 
    'controlType': 'NumberRangeFilter', 
    'containerId': 'filter_div', //<-- should = numberRangeFilter_control_div 
    'options': { 
     'filterColumnLabel': 'Cantidad' 
    } 
}); 

// Create a pie chart, passing some options 
var pieChart = new google.visualization.ChartWrapper({ 
    'chartType': 'PieChart', 
    'containerId': 'chart_div', //<-- should = numberRangeFilter_chart_div 
    'options': { 
     title: 'Número de proyectos vigentes por área de investigación (total: '+totalproyectos+')', 
     backgroundColor: { fill:'transparent'}, 
     height: 500, 
    } 
});

Quelle

2016-08-09 11:32:52 WhiteHat

hoffe, das hilft, wenn Sie immer noch Probleme haben, bitte eine Probe der Daten für jede Aktie Dashboard - Sie können auch die Konsole des Browsers auf Fehler überprüfen, in der Regel durch Drücken von F12 – WhiteHat

Danke. Ich habe diese Änderungen vorgeschlagen, aber ich habe immer noch das gleiche Problem.Die Diagramme werden nicht angezeigt, wenn ich den URI durchsuche. Sie werden nur angezeigt, wenn ich mit der rechten Maustaste auf _inspect element_ klicke. – Pathros

Ja, ich habe weitere Details zum umgebenden HTML hinzugefügt. Ich habe versucht, [dieses Beispiel] (http://jsfiddle.net/vYMyz/9/) zu folgen, aber ich bekomme immer noch das Seltsame – Pathros

Google Charts Dashboard lädt nur, wenn ich rechts auf inspect Element klicken

Antwort

Verwandte Themen