Google Chart Trendline for non zero values

Question

I'm working on adding a linear trendline to my chart which represents a 24 hour clock. Only some of the hours will contain data. In my example, I expect a positive trend when considering I have data present in hours 7 to 10 only.

It appears as if all the Zero values are contributing to the trendline in my example code. This results in a negative trendline.

Is there a way I can make the trendline apply to only the values which are present?

Thanks as always to the experts out there!

google.charts.load('current', {
        'packages': ['corechart']
      });
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable([
          ['Hour', 'Value'],
          [0, 0],
          [1, 0],
          [2, 0],
          [3, 0],
          [4, 0],
          [5, 0],
          [6, 0],
          [7, 5],
          [8, 15],
          [9, 10],
          [10, 20],
          [11, 0],
          [12, 0],
          [13, 0],
          [14, 0],
          [15, 0],
          [16, 0],
          [17, 0],
          [18, 0],
          [19, 0],
          [20, 0],
          [21, 0],
          [22, 0],
          [23, 0],
          [24, 0]
        ]);

        var options = {
          title: 'Task completed per Hour',
          vAxis: {
            title: 'Count'
          },
          hAxis: {
            title: 'Hour',
            slantedText: false,
            ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
          },
          seriesType: 'bars',
          series: {},
          trendlines: {
            0: {type: 'linear'}
          },
          isStacked: false
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);

      }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="chart_div" ></div>

Answer 1

try replacing zero with null

see following working snippet...

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawVisualization);

function drawVisualization() {
  // Some raw data (not necessarily accurate)
  var data = google.visualization.arrayToDataTable([
    ['Hour', 'Value'],
    [0, null],
    [1, null],
    [2, null],
    [3, null],
    [4, null],
    [5, null],
    [6, null],
    [7, 5],
    [8, 15],
    [9, 10],
    [10, 20],
    [11, null],
    [12, null],
    [13, null],
    [14, null],
    [15, null],
    [16, null],
    [17, null],
    [18, null],
    [19, null],
    [20, null],
    [21, null],
    [22, null],
    [23, null],
    [24, null]
  ]);

  var options = {
    title: 'Task completed per Hour',
    vAxis: {
      title: 'Count'
    },
    hAxis: {
      title: 'Hour',
      slantedText: false,
      ticks: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24]
    },
    seriesType: 'bars',
    series: {},
    trendlines: {
      0: {
        type: 'linear'
      }
    },
    isStacked: false
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);

}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>