title: How to change to range format for ChartRangeFilter?
body: <p>I am writing to seek help, in how I can change the formatting for my ChartRangeFilter control, so it shows daily dates, instead of years:</p>
  
  <p>Current output:
  <img src="https://i.stack.imgur.com/54teE.jpg" alt="enter image description here"></p>
  
  <p>Is their particular controller properties i should be looking into:</p>
  
  <pre><code>   function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
          if (dataValues.length &lt; 1)
              return;
  
          var data = new google.visualization.DataTable();
          data.addColumn('string', columnNames.split(',')[0], 'Name');
          data.addColumn('number', columnNames.split(',')[1], 'Price');
          data.addColumn('string', columnNames.split(',')[2], 'Type');
          data.addColumn('datetime', columnNames.split(',')[3], 'Date');
  
          for (var i = 0; i &lt; dataValues.length; i++) {
  
  
              var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));
  
              data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
          }
  
  
          var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });
          var line = new google.visualization.ChartWrapper({
              'chartType': 'LineChart',
              'containerId': 'PieChartContainer',
              'options': {
                  'width': 950,
                  'height': 450,
                  'legend': 'right',
                  'hAxis': {
                      'format': "dd-MM-yyyy",
                      'hAxis.maxValue': 'viewWindow.max',
                      'maxValue': new Date(2014, 05, 30), 'minValue': new Date(2014, 04, 05),
                      'viewWindow': { 'max': new Date(2014, 05, 30) },
                  },
                  'title': chartTitle,
                  'chartArea': { 'left': 100, 'top': 100, 'right': 0, 'bottom': 100 },
                  'tooltip': { isHtml: true }
              },
              'view': {
                  'columns': [{
  
                      type: 'string',
                      label: data.getColumnLabel(3),
                      calc: function (dt, row) {
                          var date = dt.getValue(row, 3);
                          return dateFormatter.formatValue(date);
                      }
                  }, 1, {
                      type: 'string',
                      role: 'tooltip',
                      calc: function (dt, row) {
                          return 'Name: ' + dt.getValue(row, 0) + ', Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row, 3);
                      }
                  }]
              }
          });
  
  
          var myIdSlider = new google.visualization.ControlWrapper({
              'controlType': 'ChartRangeFilter',
              'containerId': 'control2',
              'options': {
                  'filterColumnIndex': 3,
                  'ui': {
                      'chartView': { 'columns': [3, 1] }
                  }
              }
          });
  
          new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([myIdSlider], [line]).draw(data);
      }
  </code></pre>
  
  <p>Please advise. Many thanks. </p>