How To Display A Single Data Point On Google Area OR Line Chart

I've tried every configuration possible to get a Google Area Chart to display a single point but nothing has worked. I'm also totally open to any solutions using the Google Line Ch

Solution 1:

there is a bug with the most recent version of google charts,
when the x-axis is a continuous axis (date, number, not string, etc.),
and only one row exists in the data table,
you must set an explicit view window on the axis --> hAxis.viewWindow

to use a date type with only one row,
first, use data table method --> getColumnRange
this will return an object with min & max properties for the x-axis

then we can increase the max and decrease the min by one day,
and use that for our view window.

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Updated', 'Amount'],
    [new Date(1548266417060.704),100]
  ]);

  var oneDay = (24 * 60 * 60 * 1000);
  var dateRange = data.getColumnRange(0);
  if (data.getNumberOfRows() === 1) {
    dateRange.min = new Date(dateRange.min.getTime() - oneDay);
    dateRange.max = new Date(dateRange.max.getTime() + oneDay);
  }

  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {color: '#333'},
      viewWindow: dateRange
    },
    pointSize: 5
  };

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

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

---

you'll notice if we go back to an old version ('45'),
a single date row displays without issue...

google.charts.load('45', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Updated', 'Amount'],
    [new Date(1548266417060.704),100]
  ]);

  var options = {
    title: 'Company Performance',
    hAxis: {
      title: 'Year',
      titleTextStyle: {color: '#333'},
    },
    pointSize: 5
  };

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

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

Solution 2:

I dont know if you understod but the date format you are passing is wrong, so when you write Date() it return the current date formatted as string.

now if we understand that much then the currect way of writing the date array should be

   var data = google.visualization.arrayToDataTable([
      ['Updated', 'Amount'],
      [new Date(1548266417060.704).toString(),100],
    ]);

This will return the date formatted as string. and the library will accept it.

if you are still want to pass on an object then you need to specify the dataTable column as Date.

read here for more information

https://developers.google.com/chart/interactive/docs/datesandtimes