Google-chart trendline not showing

Question

Google-chart trend-line not showing. Tried to put the code in vAxis, hAxis and only in options but no luck. I know that the first column must be a number or date and so on and my first column is a date.

 <script type="text/javascript">
  data.sort([{column: 0}]);
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Date', 'Sum'],
       <?php while($row = mysqli_fetch_assoc($result)) { ?>

      [<?php echo $row['date'] ?>,  <?php echo $row['col2'] ?> ],

    <?php } ?>
    ]);

    var options = {
         legend: { position: 'bottom' },
        title: 'Sum per day',
         hAxis : { textStyle : { fontSize: 10 } },
    vAxis: { viewWindowMode: 'explicit', viewWindow: { min: 0 } },
    trendlines: { 0: {} }
    };

    var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
    chart.draw(data, options);
  }
</script>

check this answer --> [Google Chart draw Trendlines with date on x axis](https://stackoverflow.com/a/39756555/5090771) — WhiteHat, May 27 '19 at 15:50
Yes, of course it´s a string, i edited my code but now it´s look like this, see picture. — John_Doe, May 27 '19 at 18:12
try sorting the data before you draw the chart --> `data.sort([{column: 0}]);` — WhiteHat, May 27 '19 at 19:21
I dont know exactly where to put that line. I edited my code. Can You please look? It´s not working and as You can see from the first Picture the dates not match. It should be 2019-01-01 and so on but it´s 1,985 etc. Maybe it´s because i use GROUP BY date in my query? — John_Doe, May 28 '19 at 06:20
I have id, date (date), col2 (int11). In the fields: date in format 2019-05-29 and in col2 is only a number, no decimals — John_Doe, May 29 '19 at 07:10

score 0 · Accepted Answer · answered May 29 '19 at 11:17

0

when loading the data, the first column needs to be converted from a string to a date.
place the value from php in quotes and inside a date constructor.

e.g.

[new Date('<?php echo $row['date'] ?>'),  <?php echo $row['col2'] ?> ],

if you still have problems with the squiggly line,
sort the data before drawing...

data.sort([{column: 0}]);
var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
chart.draw(data, options);

answered May 29 '19 at 11:17

WhiteHat

59,912
7
51
133

Can i please ask Another? If i in my mysql use GROUP BY YEARWEEK and then use this: new Date('') it´s not showing yearweek, it´s only showing yearmonth. Been trying but no success... – John_Doe May 31 '19 at 08:36
the [date constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#Syntax) in JavaScript does not have a signature for year-week, you should probably continue to create the normal date, then convert to week afterwards, see --> [get week of year in javascript like in php](https://stackoverflow.com/questions/6117814/get-week-of-year-in-javascript-like-in-php) – WhiteHat May 31 '19 at 11:17

Google-chart trendline not showing

1 Answers1