2017-08-08 1 views
0

J'ai une erreur qui ressemble à ceci quand j'ai essayé d'insérer un filtre de plage de numéros pour mon camembertUn ou plusieurs participants n'ont pas draw(), colonne non valide Étiquette

Un ou plusieurs participants omis d'établir() étiquette de colonne non valide: pourcentage

How it look likes and there's no error message in the console

j'ai essayé de le faire paraître exactement comme l'exemple ils ont fourni en https://developers.google.com/chart/interactive/docs/gallery/controls avec la seule différence dans les données. Les données utilisées dans l'exemple sont codées en dur alors que les données que j'ai utilisées proviennent directement de MySQL en utilisant PHP.

Voici mes codes PHP.

<?php 
$con=mysqli_connect("localhost","root","password") or die("Failed to connect with database"); 
mysqli_select_db($con, "tutor"); 

$sql="SELECT * 
FROM googlechart"; 

$result = mysqli_query($con,$sql) or die(mysqli_error($con)); 

$rows = array(); 
$flag = true; 

$table = array(); 
$table['cols'] = array(
    array('label' => 'Topics', 'type' => 'string'), 
    array('label' => 'Percentage', 'type' => 'number') 

); 

$rows = array(); 
while($r = mysqli_fetch_assoc($result)) { 
    $temp = array(); 
    $temp[] = array('v' => (string) $r['weekly_task']); 
    $temp[] = array('v' => (int) $r['percentage']); 
    $rows[] = array('c' => $temp); 
} 

$table['rows'] = $rows; 
$jsonTable = json_encode($table); 
?> 

<head> 
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

    <script type="text/javascript"> 

     google.charts.load('current', {'packages':['corechart', 'controls']}); 

     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 

      var data = new google.visualization.DataTable(<?=$jsonTable?>); 

      var dashboard = new google.visualization.Dashboard(
       document.getElementById('dashboard_div')); 

      var donutRangeSlider = new google.visualization.ControlWrapper({ 
       'controlType': 'NumberRangeFilter', 
       'containerId': 'filter_div', 
       'options': { 
        'filterColumnLabel': 'percentage' 
       } 
      }); 

      var pieChart = new google.visualization.ChartWrapper({ 
       'chartType': 'PieChart', 
       'containerId': 'chart_div', 
       'options': { 
        'width': 300, 
        'height': 300, 
        'pieSliceText': 'value', 
        'legend': 'right' 
       } 
      }); 
      dashboard.bind(donutRangeSlider, pieChart); 
      dashboard.draw(data); 
     } 
    </script> 
</head> 

<body> 
<div id="dashboard_div"> 
    <div id="filter_div"></div> 
    <div id="chart_div"></div> 
</div> 
</body> 

Veuillez nous consulter. Merci d'avance.

Répondre

0

Le problème réside dans le filtreColumnLabel de donutRangeSlider.

var donutRangeSlider = new google.visualization.ControlWrapper({ 
      'controlType': 'NumberRangeFilter', 
      'containerId': 'filter_div', 
      'options': { 
       'filterColumnLabel': 'percentage' 
      } 
     }); 

Au lieu de nommer comme « pourcentage », il devrait être « Pourcentage » comme suivre l'étiquette de la colonne du code PHP.

$table['cols'] = array(
array('label' => 'Topics', 'type' => 'string'), 
array('label' => 'Percentage', 'type' => 'number') 
); 

Solution:

var donutRangeSlider = new google.visualization.ControlWrapper({ 
      'controlType': 'NumberRangeFilter', 
      'containerId': 'filter_div', 
      'options': { 
       'filterColumnLabel': 'Percentage' 
      } 
     });