title: Multiple trendlines in Google Charts
body: <p>I need to add multiple trendlines to my google line chart but I just can't figure out how to do it with more than one line.</p>
  
  <p>Here is my code example with a single line based on a date and value to build the chart:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  
          function drawMultipleTrendlineChart() {
  
              var chart;
  
              var data = new google.visualization.DataTable();
              data.addColumn('date', 'Date');
              data.addColumn('number', 'Sales value');
  
              data.addRow([new Date(2013, 3, 11), 10]);
              data.addRow([new Date(2013, 4, 02), 650]);
              data.addRow([new Date(2013, 5, 03), 55]);
              data.addRow([new Date(2013, 6, 04), 95]);
              data.addRow([new Date(2013, 7, 05), 400]);
              data.addRow([new Date(2013, 8, 06), 600]);
              data.addRow([new Date(2014, 0, 07), 800]);
              data.addRow([new Date(2014, 1, 08), 900]);
              data.addRow([new Date(2014, 2, 09), 3127]);
  
              var formatter = new google.visualization.NumberFormat({
                  fractionDigits: 2,
                  prefix: 'R$:'
              });
              formatter.format(data, 1);
              var dateFormatter = new google.visualization.NumberFormat({
                  pattern: 'MMM yyyy'
              });
              dateFormatter.format(data, 0);
              var chartHeight = 400;
              var chartWidth = 600;
              var chartOptions = {
                  tooltip:{isHtml: true},     
                  trendlines: {
                      0: {color: 'red'}
                  },
                  title: 'Trendlines with multiple lines',
                  isStacked: true,
                  width: chartWidth,
                  height: chartHeight,
                  colors: ['#0000D8'],
                  hAxis: {
                      title: 'example title',
                      slantedText: false,
                      slantedTextAngle: 45,
                      textStyle: {
                          fontSize: 10
                      },
                      format: 'dd-MM-yyyy'
                  },
                  chartArea: {
                      left: 100,
                      top: 20,
                      width: (chartWidth - 10),
                      height: (chartHeight - 90)
                  }
              };
              chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
              chart.draw(data, chartOptions);
          }
          google.load('visualization', '1', {packages:['corechart'], callback: drawMultipleTrendlineChart});
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="multipleTrendChart"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I wan't to do it like this image:<a href="https://zerotoledo.files.wordpress.com/2010/03/screen-shot-2010-03-27-at-10-21-12.png" rel="nofollow">Image_example</a> </p>
  
  <p>jsfiddle example: <a href="http://jsfiddle.net/w3ez9gwb/" rel="nofollow">http://jsfiddle.net/w3ez9gwb/</a></p>