title: Google Chart Dashboard with Slider
body: <p>I have successfully created a web site with dynamic charts using Google Charts.
  Then I tried to add a slider but I failed.
  The error I get is "One or more participants failed to draw()" and "Column 0 is not numeric".</p>
  
  <p>The script of the working web site is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  
  function drawChart() {
    var jsonData = $.ajax({
      url: " ulsuccessperop.php ",          
      dataType: "json",
      async: false
    }).responseText;
  
    var data = new google.visualization.DataTable(jsonData);
    var options = {
       'title': 'UL Success per operatore',              
       'width':1200,
       'height':900,
       chartArea:{left:80,top:50,width:"70%",height:"80%"}
       };
  
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The script of the not working web site is:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  google.charts.load('current', {'packages':['corechart', 'controls']});
  google.charts.setOnLoadCallback(drawDashboard);
  
  function drawDashboard() {
     var jsonData = $.ajax({
         url: "ulsuccessperop.php",               
         dataType: "json",
         async: false
         }).responseText;
  
     var data = new google.visualization.DataTable(jsonData);                     
     var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));        
  
     var dataRangeSlider = new google.visualization.ControlWrapper({      
        'controlType': 'NumberRangeFilter',
        'containerId': 'filter_div',
        'options': {
              'filterColumnLabel': 'Data'
              }
         });
  
     var lineChart = new google.visualization.ChartWrapper({
         'chartType': 'LineChart',
         'containerId': 'chart_div',
         'options': {
             'title': 'UL Success per operatore',             
             'width':1200,
             'height':900,
             chartArea:{left:80,top:50,width:"70%",height:"80%"}
             }
  
        });
  
  dashboard.bind(dataRangeSlider, lineChart);
  dashboard.draw(data);
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The data is provided by a PHP page (ulsuccessperop.php) that return a JSON formatted array of values (multiple column).
  Probably the data to be provided to Dashboard is different to those to be provided to Chart, but I can't find anything in the Google Chart documentation about that.</p>
  
  <hr>
  
  <p>New code after changes suggested by WhiteHat:</p>
  
  <pre><code>google.charts.load('current', {'packages':['corechart', 'controls']});
  
  google.charts.setOnLoadCallback(drawDashboard);
  
  function drawDashboard() {
      var jsonData = $.ajax({
          url: "data/regperop.php,
          dataType: "json",
          async: false
          }).responseText;
  
      var data = new google.visualization.DataTable(jsonData);                
      var view = new google.visualization.DataView(data);                     
      view.setColumns([{
        calc: function (data, row) {
          return new Date(data.getValue(row, 0))
        },
        type: 'date',
        label: 'Data'
      }, 1, 2, 3, 4]);
  
  
      var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));   
  
      var dataRangeSlider = new google.visualization.ControlWrapper({     
          'controlType': 'DateRangeFilter',
          'containerId': 'filter_div',
          'options': {
              'filterColumnLabel': 'Data'
         }
      });
  
  
      google.visualization.events.addListener(dataRangeSlider, 'ready', function () {
          var state = dataRangeSlider.getState();
          console.log(state.lowValue, state.highValue);
        });
  
  
      var lineChart = new google.visualization.ChartWrapper({
          'chartType': 'LineChart',
          'containerId': 'chart_div',
          'options': {
              'title': 'Numero registrazioni per operatore',              'width':1200,
              'height':900,
              chartArea:{left:80,top:50,width:"70%",height:"80%"}
          }
  
      });
  
  
      dashboard.bind(dataRangeSlider, lineChart);
      dashboard.draw(data);
  
  }
  </code></pre>
  
  <p>An example of JSON data follows:</p>
  
  <pre><code>{"cols":[{"label":"Data","type":"date"},
          {"label":"OP1","type":"number"},
          {"label":"OP2","type":"number"},
          {"label":"OP3","type":"number"},
          {"label":"OP4","type":"number"}],
   "rows":[{"c":[{"v":"08-01-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
           {"c":[{"v":"08-02-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
           {"c":[{"v":"08-03-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
           {"c":[{"v":"08-04-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
           {"c":[{"v":"08-05-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
           {"c":[{"v":"08-06-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
           {"c":[{"v":"08-07-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
           {"c":[{"v":"08-08-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
           {"c":[{"v":"08-09-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
           {"c":[{"v":"08-10-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]}]}
  </code></pre>