title: Line Chart Slider Implementation using google visualisation dashboard and controls
body: <p>I am facing issue while implementing the slider control using google visualisation contorls. I have implemented numberRangeFilter as a control wrapper. i have datatable like this having following columns.</p>
  
  <pre><code>var dataTable = google.visualization.arrayToDataTable([
        ['Year', 'Australia', 'china'],
        [2004,  1000,      400],
        [2005,  1170,      460],
        [2006,  660,       1120],
        [2007,  1030,      540]
        [2008,  1030,      540]
  
      ]);
  </code></pre>
  
  <p>All the column are number type.While drawing this i am getting  x axis data displayed in number format, got reference from <a href="https://developers.google.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous" rel="nofollow noreferrer">https://developers.google.com/chart/interactive/docs/customizing_axes#Discrete_vs_Continuous</a> and corrected this.</p>
  
  <p>Here my code:</p>
  
  <pre><code> var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div'));
          var yearRangeSlider = new google.visualization.ControlWrapper({
            'controlType': 'NumberRangeFilter',
            'containerId': 'filter_div',
            'options': {
              'filterColumnIndex': 1,
              'width': '100%',
              'ui': { 'labelStacking': 'horizontal', 'format': { 'pattern':'####','fractionDigits':'0','groupingSymbol':'','showRangeValues':true }}
            },
  
          });
       // Create a Line chart, passing some options
          var LineChart = new google.visualization.ChartWrapper({
            'chartType': 'LineChart',
            'containerId': 'chart_div',
            'options': {
              'width': 900,
              'height': 500,
              'fontSize':11,
              'hAxis':{'slantedText':'true','direction':'1','format': { 'pattern':'0' }},
              'hAxis.gridlines.color':'#ccc',
              'hAxis': {
                  gridlines: {
                      color: 'transparent'
                  }
              }
  
            }
          });
          dashboard.bind(yearRangeSlider, LineChart);
          var dataViewNew = new google.visualization.DataView(dataTable);
             dataViewNew.setColumns([{calc: function(data, row) { 
             return data.getFormattedValue(row, 0); }, type:'string'}, 0,1]);
  
          dashboard.draw(dataViewNew); 
  </code></pre>
  
  <p>Here in this code i have added new column in the datatable which is of type string.</p>
  
  <pre><code>var dataViewNew = new google.visualization.DataView(dataTable);
             dataViewNew.setColumns([{calc: function(data, row) { 
             return data.getFormattedValue(row, 0); }, type:'string'}, 0,1]);
  </code></pre>
  
  <p>Now the datatable is like this. </p>
  
  <pre><code>['Year' 'Year', 'Australia', 'china'],
        ['2004',2004,  1000,      400],
        ['2005',2005,  1170,      460],
        ['2006',2006,  660,       1120],
        ['2007',2007,  1030,      540]
        ['2008',2008,  1030,      540]
  </code></pre>
  
  <p>Here after drawing the chart x axis come in string format but a new column is added in the legend. please suggest how to remove new column from the legend.</p>
  
  <p><img src="https://i.stack.imgur.com/J0JhU.jpg" alt="enter image description here"> </p>