Google Trend Chart Not Displaying

Question

I have a Google chart diagram on which I want to show a trend line, but it does not appear.

Data is retrieved from the database, and javascript is generated by PHP, but the resulting javascript looks like this:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1.0', {'packages':['corechart']}); // Set a callback to run when the Google Visualization API is loaded. google.setOnLoadCallback(drawChart); // Callback that creates and populates a data table, // instantiates the pie chart, passes in the data and // draws it. function drawChart() { var dataS = new google.visualization.DataTable(); dataS.addColumn('string', 'Dag'); dataS.addColumn('number', 'Poäng'); dataS.addRows([ ['1', 32], ['2', 37], ['3', 37], ['4', 40], ['5', 31], ['6', 38], ['7', 28], ['8', 34], ['9', 41], ['10', 41], ]); var optionsS = { title: '', legend: 'none', hAxis: {title: 'Serie'}, vAxis: {title: 'Poäng'}, pointSize: 4, trendlines: { 0: {} } }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.LineChart(document.getElementById('chart_div_series')); chart.draw(dataS, optionsS); } </script> 

A script is basically a copy from an example of Google charts. The chart works fine, except that the trend line is not displayed. Any ideas why?

Answer 1

To use the trend line, there must be a continuous domain axis (enter "number", "date", "day-time" or "time of day"). By setting the first column to a "string" type (and filling it with rows), you turn off the trend line. Switch to the column of type "number", and the trend line will work:

 var dataS = new google.visualization.DataTable(); dataS.addColumn('number', 'Dag'); dataS.addColumn('number', 'Poäng'); dataS.addRows([ [1, 32], [2, 37], [3, 37], [4, 40], [5, 31], [6, 38], [7, 28], [8, 34], [9, 41], [10, 41] ]);