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'],
    [newDate(1548266417060.704),100]
  ]);

  var oneDay = (24 * 60 * 60 * 1000);
  var dateRange = data.getColumnRange(0);
  if (data.getNumberOfRows() === 1) {
    dateRange.min = newDate(dateRange.min.getTime() - oneDay);
    dateRange.max = newDate(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);
});

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="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'],
    [newDate(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);
});

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="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'],
      [newDate(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