title: Google visualisation errors
body: <p>I have google vis datatable and dashboard (control filters, string control, datatable, charts). All element is bind.</p>
  <p>So I get from database JSON and send to gViz api to draw table, chart and control.
  When I use contols to filter some data and if there is no data for that string then I get error from google visualisation like this:</p>
  <blockquote>
  <p>One or more participants failed to draw()×</p>
  <p>Table has no rows.×</p>
  </blockquote>
  <p>and similar messages. So in my app this is so ugly so is there any way to not showing it?
  So if there is no data to not show the error...</p>
  <p>I try with CSS option:</p>
  <pre class="lang-css prettyprint-override"><code>#google-visualization-errors-all-3 {
     display:none;
  }
  </code></pre>
  <p>but its not good solution for me.</p>
  <p>Is there any other way, maybe in google visualusation api for dashboard?</p>
  <p><strong>UPDATE:</strong></p>
  <pre><code>var slider;
      var ajdi = '';
        function drawVisualization() {
          
         var cssClassNames = {
          'headerRow': 'zaglavlje',
          'tableRow': 'red',
          'oddTableRow': 'red1',
          'selectedTableRow': 'orange-background large-font',
          'hoverTableRow': 'prekoreda',
          'headerCell': 'gold-border',
          'tableCell': 'cell',
          'rowNumberCell': 'underline-blue-font'
      };
  
          
         var json = $.ajax({
                      url: 'getzadaci.php', // make this url point to the data file
                      dataType: 'json',
                      async: false
                  }).responseText;
                  
                  // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(json);
          //dodajemo kolonu sa kontrolama
          
          
          
      
          
        
          // Define a category picker control for the Gender column
          var categoryPicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'control1',
            'options': {
              'filterColumnLabel': 'Status',
              'ui': {
              'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': true,
                            'caption': 'Status'
  
              }
            }
          });
          
           var categoryPicker1 = new google.visualization.ControlWrapper({
           'controlType': 'CategoryFilter',
            'containerId': 'control2',
            'options': {
              'filterColumnIndex': 8,
              'ui': {
              'labelStacking': 'horizontal',
                'allowTyping': false,
                'allowMultiple': true,
                'caption': 'Parcela'
              }
            }
          });
           var categoryPicker2 = new google.visualization.ControlWrapper({
           'controlType': 'CategoryFilter',
            'containerId': 'control4',
            'options': {
              'filterColumnIndex': 2,
              'ui': {
              'labelStacking': 'horizontal',
                'allowTyping': false,
                'allowMultiple': true,
                'caption': 'Vrsta zadatka'
              }
            }
          });
        
          
          var stringFilter1 = new google.visualization.ControlWrapper({
            'controlType': 'StringFilter',
            'containerId': 'control3',
            'options': {
                        'matchType': 'any',
            'filterColumnIndex': 1,
            'ui': {'labelStacking': 'vertical'}
            }
          });
          
          var slider = new google.visualization.ControlWrapper({
            'controlType': 'DateRangeFilter',
            'containerId': 'control5',
            'options': {
              'filterColumnLabel': 'Pocetak',
           'ui': {'labelStacking': 'vertical'}
            }
          });
        
          // Define a Pie chart
         
    
        
          // Define a table
          var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'chart2',
            'cssClassNames': 'cssClassNames',
            'view': { 'columns': [1,2,12,5,6,8,11] },
            'options': {
          cssClassNames: cssClassNames,
          allowHtml: true
      }
          });
          
         var timeline = new google.visualization.ChartWrapper({
      chartType: 'Timeline',
      containerId: 'chart5',
      options: {
      height: '350',
      timeline: { colorByRowLabel: true, 
                  backgroundColor: '#ffd' },
      //timeline.barLabelStyle: {color: '#000', fontName: 'Arial', fontSize: '13px'},
      //backgroundColor: '#fff',
      colors: ['#55c2a2', '#89d168', '#d3eb87','#8ec63e', '#FFF0BA','#FF542E', '#CFD6DE', '#ADC1D6', '#7297BA']
      //timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
                 // barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
      },
      view: {
          // as an example, use columns &quot;Naziv&quot;, &quot;Vrsta&quot;, &quot;Pocetak&quot;, and &quot;Zavrsetak&quot; for the timeline
          columns: [8, 2, 5, 6]
      },
      
  });
  
             var formatter_short = new google.visualization.DateFormat({formatType: 'short'});
             formatter_short.format(data, 5);
             formatter_short.format(data, 6);
  
          
          new google.visualization.events.addListener(table, 'ready', function () {
          google.visualization.events.addListener(table.getChart(), 'select', function () {
              var selection = table.getChart().getSelection();
              // iterate over all selected rows
              for (var i = 0; i &lt; selection.length; i++) {
                //$(&quot;#edit&quot;).removeClass(&quot;edit btn btn-success&quot;)
                //$('#edit').addClass('edit btn btn-success');
                ajdi = table.getDataTable().getValue(selection[i].row,0);
                $(&quot;#vrednostid&quot;).val(table.getDataTable().getValue(selection[i].row,0));
                $(&quot;#naziv1&quot;).val(table.getDataTable().getValue(selection[i].row,1));
                $(&quot;#vrsta_rada1&quot;).val(table.getDataTable().getValue(selection[i].row,2));
                $(&quot;#status1&quot;).val(table.getDataTable().getValue(selection[i].row,3));
                $(&quot;#opis1&quot;).val(table.getDataTable().getValue(selection[i].row,4));
                $(&quot;#usluzno1&quot;).val(table.getDataTable().getValue(selection[i].row,9));
  
                var p = new Date(table.getDataTable().getValue(selection[i].row,5));
                $(&quot;#dp31&quot;).datepicker(&quot;setDate&quot;, p);
                
                var z = new Date(table.getDataTable().getValue(selection[i].row,6));
                $(&quot;#dp41&quot;).datepicker(&quot;setDate&quot;, z);
                
                //$(&quot;#parcele1&quot;).val(table.getDataTable().getValue(selection[i].row,8));
                //$(&quot;#parcele1&quot;).select2(&quot;val&quot;, [&quot;3&quot;,&quot;19&quot;]);
                var id = table.getDataTable().getValue(selection[i].row,10);
                var naziv = table.getDataTable().getValue(selection[i].row,8);
                
  
  var idArr = (id.lastIndexOf(',') == (id.length - 1) ? id.substr(0, id.length - 1) : id).split(', ');
  var nazivArr = (naziv.lastIndexOf(',') == (naziv.length - 1) ? naziv.substr(0, naziv.length - 1) : naziv).split(', ');
  var objHold = [];
  for(var j=0,length=idArr.length;j&lt;length;j++)
  {
      if(idArr[j] &amp;&amp; nazivArr[j]) // make sure both arrays have a value
      objHold.push({id: idArr[j], naziv: nazivArr[j]});
  }
  $(&quot;#parcele1&quot;).select2(&quot;data&quot;, objHold);
  
              }
          });
      });
          
          
  
        
          // Create a dashboard
          new google.visualization.Dashboard(document.getElementById('dashboard')).
              // Establish bindings, declaring the both the slider and the category
              // picker will drive both charts.
      bind([categoryPicker, categoryPicker1, categoryPicker2, slider, stringFilter1], [table, timeline]).
              // Draw the entire dashboard.
              draw(data, {'allowHtml':true, 'cssClassNames': 'cssClassNames'});      }
        //table.draw(data, {'allowHtml':true, 'cssClassNames': cssClassNames});      }
  
  function dashboardReady() {
          // The dashboard is ready to accept interaction. Configure the buttons to
          // programmatically affect the dashboard when clicked.
        
          // Change the slider selected range when clicked.
          document.getElementById('rangeButton').onclick = function() {
            slider.setState({'lowValue': 2, 'highValue': 5});
            slider.draw();
          };
        
          // Change the pie chart rendering options when clicked.
          document.getElementById('optionsButton').onclick = function() {
            piechart.setOption('is3D', true);
            piechart.draw();
          };
        }
        
  
  
        google.setOnLoadCallback(drawVisualization);// JavaScript Document
        
       
  </code></pre>
  <p>This is my code, so the important part is .ajac function, so how I can here integrate if row&gt;0 to show charts ???</p>