title: Hiding chart lines with no value
body: <p>How can I hide the lines that go below value 1 so the chart doesn't look like the one below?. My chart shows a product sales over period of time. Some products don't have enought data which produces weirdly looking charts.
  <a href="https://i.stack.imgur.com/O9AET.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O9AET.png" alt="enter image description here" /></a></p>
  <p>I have added <code>vAxis: { viewWindowMode: 'pretty' } </code> and this is helping to some extent to make it &quot;pretty&quot; but it isn't enough.</p>
  <p>I've tried with data view and I thought that was the solution but the view is hiding some extra rows. My code for view where I convert the 0 row to date and trying to limit the min and max values:</p>
  <pre><code>let view = new google.visualization.DataView(dataYear);
              view.setColumns([{
                  calc: function(dataYear, row) {
                      return new Date(dataYear.getValue(row, 0));
                  },
                  label: dataYear.getColumnLabel(0),
                  type: 'date'
              }, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
              view.setRows(view.getFilteredRows([{
                  column: 1,
                  minValue: 1,
                  maxValue: 500
              }]));
  </code></pre>
  <p>I am a bit confused how view exactly works after many tries of tweaking up different columns and min/maxValues. In addition, I can target only 1 column at a time with the view? Bonus question: I would like also to hide the data points that are with 0 value (the one appearing on the x axis)
  My chart code:</p>
  <pre><code>function chartYear(dataYear) {
              // Display the total number of products sold for each chart/period
              function getSum(dataYear, column) {
                  var total = 0;
                  for (i = 0; i &lt; dataYear.getNumberOfRows(); i++)
                      total = total + dataYear.getValue(i, column);
                  return total;
              }
              let name = document.querySelectorAll('.google-visualization-table-tr-sel td')[2].textContent;
              let interval = 1;
              let dataRange = dataYear.getColumnRange(9);
              let vTicks = [];
              for (var i = dataRange.min; i &lt;= dataRange.max + interval; i = i + interval) {
                  vTicks.push(i);
              };
  
              
              var chart = new google.visualization.ChartWrapper({
                  chartType: 'LineChart',
                  containerId: 'chartYear',
                  options: {
                      title: &quot;6 months sales: &quot; + name + &quot;\nTotal: &quot; + getSum(dataYear, 9),
                      curveType: &quot;function&quot;,
                      pointsVisible: true,
                      pointSize: 5,
                      snapToData: true,
                      // pointBackgroundColor: '#FF0000',
                      titleTextStyle: {
                          fontName: 'Verdana',
                          fontSize: 13,
                          italic: true
                      },
                      vAxis: {
                          viewWindowMode: 'pretty',
                          ticks: vTicks,
                          minValue: 1
                      },
                      hAxis: {
                          // minValue: 1,  // THROWS ERROR a.getTime() is not a function
                          // viewWindowMode: 'pretty',
                          slantedText: 1,
                          slantedTextAngle: 60
                      },
                      series: {
                          0: {
                              color: '#DC3912'
                          },
                          1: {
                              color: '#FF9900'
                          },
                          2: {
                              color: '#109618'
                          },
                          3: {
                              color: '#990099'
                          },
                          4: {
                              color: '#bbe9ff'
                          },
                          5: {
                              color: '#43459d'
                          },
                          6: {
                              color: '#C60AD3'
                          },
                          7: {
                              color: '#1c91c0'
                          },
                          8: {
                              color: '#3366CC'
                          },
                      }
                  }
              });
  
              var dateSlider = new google.visualization.ControlWrapper({
                  'controlType': 'ChartRangeFilter',
                  'containerId': 'chartRangeFilter',
                  'options': {
                      filterColumnLabel: 'Dato',
                      ui: {
                          chartType: 'LineChart',
                          chartOptions: {
                              snapToData: true,
                              height: 50,
                              chartArea: {
                                  width: '80%'
                              },
                              series: {
                                  0: {
                                      color: '#DC3912'
                                  },
                                  1: {
                                      color: '#FF9900'
                                  },
                                  2: {
                                      color: '#109618'
                                  },
                                  3: {
                                      color: '#990099'
                                  },
                                  4: {
                                      color: '#bbe9ff'
                                  },
                                  5: {
                                      color: '#43459d'
                                  },
                                  6: {
                                      color: '#C60AD3'
                                  },
                                  7: {
                                      color: '#1c91c0'
                                  },
                                  8: {
                                      color: '#3366CC'
                                  },
                              }
                          }
                      }
                  }
              });
              var formatter_long = new google.visualization.DateFormat({
                  pattern: 'yyyy-MM-dd'
              });
              formatter_long.format(dataYear, 0);
  
  
              google.visualization.events.addListener(chart, 'error', function(googleError) {
                  google.visualization.errors.removeError(googleError.id);
              });
              
              let view = new google.visualization.DataView(dataYear);
              view.setColumns([{
                  calc: function(dataYear, row) {
                      return new Date(dataYear.getValue(row, 0));
                  },
                  label: dataYear.getColumnLabel(0),
                  type: 'date'
              }, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
              view.setRows(view.getFilteredRows([{
                  column: 1,
                  minValue: 0,
                  maxValue: 500
              }]));
  
              
  
              var dashboard2 = new google.visualization.Dashboard(document.getElementById('dashboard2'));
              dashboard2.bind(dateSlider, chart);
              dashboard2.draw(view);
  
  
          }
  </code></pre>
  <p>The chart is drawn when the user clicks on a table row. I send the product id with ajax and get back data for this product. I can add the select handler if needed.</p>