Newbie problem with dashboard and Map

[Mike Sherman]

I am trying to show both a map with coordinates and a table of data for a specific page and I am trying to add dropdowns to filter both the map and the table.
I was able to draw the map and table with no problems, but then I tried to use a dashboard for the first time. The table come up just fine, but the map will not show anymore. I set the view options to what I believe are the proper settings.
Here is my code:
   <script type="text/javascript">
      google.load('visualization', '1.0', {packages: ['controls']});

    </script>
    <script type="text/javascript">
       
       google.setOnLoadCallback(drawVisualization);  
      function drawVisualization(){
                    
  <?php 
  //echo "var geoData = google.visualization.arrayToDataTable([['Lat', 'Lon', 'Value', 'Name','Date','Event'],";
  echo "var geoData = new google.visualization.DataTable();";
        echo"geoData.addColumn('number', 'Lat');";
        echo"geoData.addColumn('number', 'Lon');";
        echo"geoData.addColumn('string', 'Value');";
        echo"geoData.addColumn('number', 'Name');";
        echo"geoData.addColumn('string', 'Date');";
        echo"geoData.addColumn('number', 'Event');";
            for($f = 0; $f < $count; $f++)
            {
                $var0 =  mysql_result($result2,$f,'xcoor');
                $var1 =  mysql_result($result2,$f,'ycoor');
                $var2 =  mysql_result($result2,$f,'hh_number');
                $var3 =  mysql_result($result2,$f,'icemr_site');
                $var4 =  mysql_result($result2,$f,'hh_type');
                $var5 =  mysql_result($result2,$f,'hh_number');
                $var6 =  mysql_result($result2,$f,'today');
                $var7 =  mysql_result($result2,$f,'event_id');
                switch ($var3) {
                    case '1':
                        $var3 = "Choma";
                        break;
                    case '2':
                        $var3 = "Nchelenge";
                        break;
                    case '3':
                        $var3 = "Mutasa";
                        break;
                    default:
                        $var3 = "unknown";
                                                    }
                switch ($var4) {
                    case '1':
                        $var4 = "Cross-Sectional";
                        break;
                    case '2':
                        $var4 = "Longitudinal";
                        break;
                    default:
                        $var3 = "unknown";
                                                    }
                    echo"geoData.addRow([".$var0.",".$var1.",'".$var2." - ".$var3." - ".$var4."',".$var5.",'".$var6."',".$var7."]);";
            }
    //echo"]);";?>
   

        var eventPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnLabel': 'Event',
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

        var namePicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control2',
          'options': {
            'filterColumnLabel': 'Name',
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,
              'allowMultiple': false
            }
          }
        });

              var table = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'table_div',
          'options': {
                            'alternatingRowStyle': true,
                             'allowHtml': true,
                              'page': 'enable',
                              'pageSize': 15
          }
        });
       

                var map = new google.visualization.ChartWrapper({
          'chartType': 'Map',
          'containerId': 'map_div',
                    'options': {
                          'mapType': 'normal',
                            'showTip': true,
                            'useMapTypeControl': true,
                            'enableScrollWheel': true
                           
          },
          'view': {'columns': [ 0, 1, 2 ]}
        });

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

dashboard.bind(namePicker, map);
dashboard.bind(eventPicker, map);
dashboard.bind(namePicker, table);
dashboard.bind(eventPicker, table);
    
dashboard.draw(geoData);
      }

    </script>

<?php
echo"</head>";
echo"<div id=\"dash_div\" style=\"width:100%; height: 100%;\">";
echo"<table>";
echo"<tr><td><div id=\"control1\"></div><div id=\"control2\"></div></td></tr>";
echo"<tr><td><div id=\"map_div\" style=\"width:50%; height: 50%;\"></div></td></tr>";
echo"<tr><td ><div id=\"table_div\"></div></td></tr>";
echo"</table>";
echo"</div>";
echo"</html>";
   ?>

Thanks for any help, just not too sure what is wrong.

[asgallant]

We can't test your PHP code, can you post the javascript output by the PHP?  Open the page in a browser, view the page source, and paste it here.

[Thomas Rybka]

Posting the JS will definitely help, but I think the problem is just that your .bind statements need to be changed.

Try this:

dashboard.bind([namePicker, eventPicker], [map, table]);

Thomas Rybka | Software Engineer | try...@google.com | Google

Thomas Rybka | Software Engineer | try...@google.com | GViz

--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Mike Sherman]

Here is the script code from the source view. I removed a lot of the geoData.addRow, I didn't think it was needed. There were several hundred of them. They should be fine, because the table is showing up fine.

Thanks for looking.

<script type="text/javascript">
      google.load('visualization', '1.0', {packages: ['controls','map']});

    </script>
    <script type="text/javascript">
       
       google.setOnLoadCallback(drawVisualization);  
      function drawVisualization(){
                    

  var geoData = new google.visualization.DataTable();geoData.addColumn('number', 'Lat');geoData.addColumn('number', 'Lon');geoData.addColumn('string', 'Value');geoData.addColumn('number', 'Name');geoData.addColumn('string', 'Date');geoData.addColumn('number', 'Event');geoData.addRow([-12.367581927507025,22.837432880325437,'100032 - Crisis - Cross-Sectional',100032,'2010-06-08',1978]);   
    //window.alert(geoData.toSource());

        var eventPicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnLabel': 'Event',
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,

              'allowMultiple': true
            }
          }
        });
        var valuePicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control3',
          'options': {
            'filterColumnLabel': 'Value',

            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,

              'allowMultiple': true

            }
          }
        });
        var namePicker = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'control2',
          'options': {
            'filterColumnLabel': 'Name',
            'ui': {
              'labelStacking': 'vertical',
              'allowTyping': false,

              'allowMultiple': true

            }
          }
        });

              var table = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'table_div',
          'options': {
                            'alternatingRowStyle': true,
                             'allowHtml': true,
                              'page': 'enable',
                              'pageSize': 15
          }
        });
       

                var map = new google.visualization.ChartWrapper({
          'chartType': 'Map',
          'containerId': 'map_div',
                    'options': {
                          'mapType': 'normal',
                            'showTip': true,
                            'useMapTypeControl': true,
                            'enableScrollWheel': true
                           
          },
          'view': {'columns': [ 0, 1, 2 ]}
        });

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

dashboard.bind(valuePicker, map);
//dashboard.bind(eventPicker, map);
dashboard.bind(namePicker, table);
dashboard.bind(eventPicker, table);


        google.visualization.events.addListener(table, 'select',
            function() {
              map.setSelection(table.getSelection());
            });
        google.visualization.events.addListener(map, 'select',
            function() {
              table.setSelection(map.getSelection());
            });    
dashboard.draw(geoData);
      }

    </script>

On Friday, March 22, 2013 10:18:29 AM UTC-4, Mike Sherman wrote:

[asgallant]

I put this code in a JSfiddle and cleaned up the dashboard binding a bit: http://jsfiddle.net/asgallant/kwAvQ/.  Is that operating the way you expect it to?

On Friday, March 22, 2013 10:18:29 AM UTC-4, Mike Sherman wrote:

[Mike Sherman]

I'm still getting the same "One or more participants failed to draw()" error.
and the "a is not iterable" error. I have no variable of a??
I am only using the google.load('visualization', '1.0', {packages: ['controls', 'map']});
Is there another one that I might be missing?

On Friday, March 22, 2013 10:18:29 AM UTC-4, Mike Sherman wrote:

[asgallant]

Are you getting that error when running the fiddle, or in your code?

[Mike Sherman]

Both

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/0PQpGOwLBkM/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[asgallant]

That's odd, the fiddle code works in all browsers for me.  What is your operating system?  What browsers do you see the problem in?

Both

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.

[Mike Sherman]

I have been using firefox and chrome, firefox gives me the error and chrome shows nothing at all. IE will show it correctly if I choose to show unsecure content.
I am using this over an https:\\ address.
I did not think that was an issue, but I guess it could be.

Thanks again for taking the time to look at this. I truly appreciate everyone's advice.

To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

[Mike Sherman]

I changed my "script src=" calls to https:\\ and it seem to have fixed the issue in chrome and IE. Firefox is still having the same issue.

Thank you for the bind corrections, those were the initial problem.

[asgallant]

Good news/bad news: I was able to replicate the problem in Firefox, and it seems to have something to do with the internal code for the ChartWrapper; it isn't something wrong with your code.  There is a way to hack around the problem by driving an intermediate visualization off of the controls, and then fetching the data used by that visualization to draw the map: http://jsfiddle.net/asgallant/kwAvQ/7/ (in the example, the "junk" table serves as the intermediary, though if you plan on having the same controls drive both the regular table and the map, you can use that table instead).

See example of the Firefox bug here: http://jsfiddle.net/asgallant/qv8mQ/.  I filed a bug report on this here: https://code.google.com/p/google-visualization-api-issues/issues/detail?id=1176; you can "star" the issue to get updates on it.

Both

To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.