[visualization-api] One or more participants failed to draw(), Invalid Column Label

Mon, 07 Aug 2017 20:09:08 -0700 


I have an error that looks like this when I tried to insert a number range 
filter for my pie chart

One or more participants failed to draw() Invalid column label:percentage

How it look likes and there's no error message in the console 
<https://i.stack.imgur.com/WQhcf.png>

I tried to make it look exactly like the example they provided in 
https://developers.google.com/chart/interactive/docs/gallery/controls with 
the only difference in data. The data used in the example is hard-coded 
while the data I used is directly from MySQL using PHP.


Here is my PHP codes.


<?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>


Please advice. Thank you in advance.

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/google-visualization-api/caaa7f2f-ddf7-42ba-90a0-9012ea28f6a8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to