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

33 views
Skip to first unread message

Daniel LaLiberte

unread,
Aug 8, 2017, 7:08:42 AM8/8/17
to Google Visualization API
There appears to be no column with label 'percentage' in your data table.  That's what the error is about, since your number range filter is referring to that column.  

You could view the generated source in your browser to see what is being given to the DataTable constructor via the php expression: <?=$jsonTable?>

On Mon, Aug 7, 2017 at 11:08 PM, Kin Leung Tang <tangkin...@gmail.com> wrote:

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

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+unsub...@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 all
Reply to author
Forward
0 new messages