Stepped Area Google charts wrong visualization

Question

I'm using Google charts Stepped Area in my project, I have 2 data columns (datetime,state).

The problem is when the change in time is dynamic and not fixed the chart gets abnormal like this example, however when the data points are in fixed time change, the chart is drawn correctly for example in this code the points are one every 100 milliseconds.

Example 1 data

      ['Date',  'State'],
      [new Date(1534078983500), 3],
      [new Date(1534078983880), 1],
      [new Date(1534080441460), 3],
      [new Date(1534080441840), 1],
      [new Date(1534080533960), 3],
      [new Date(1534080534330), 1]

Example 2 data

      ['Date',  'State'],
      [new Date(1534078983100), 3],
      [new Date(1534078983200), 1],
      [new Date(1534078983300), 3],
      [new Date(1534078983400), 1],
      [new Date(1534078983500), 3],
      [new Date(1534078983600), 1]

Answer 1

according to the Data Format for the SteppedAreaChart,

the Data Type for the x-axis should be --> 'string'

although it may work with dates, the results may be inconsistent

instead, use the DateFormat class to convert the date to a timestamp string

see following working snippet...

here, a DataView is used to create a calculated column for the timestamp...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date',  'State'],
    [new Date(1534078983500), 3],
    [new Date(1534078983880), 1],
    [new Date(1534080441460), 3],
    [new Date(1534080441840), 1],
    [new Date(1534080533960), 3],
    [new Date(1534080534330), 1]
  ]);

  var formatTime = new google.visualization.DateFormat({
    pattern: 'HH:ss.SSSS a'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      return formatTime.formatValue(dt.getValue(row, 0));
    },
    label: data.getColumnLabel(0),
    type: 'string'
  }, 1]);

  var options = {
    title: 'The decline of \'The 39 Steps\'',
    vAxis: {
      title: 'Accumulated Rating',
      ticks: [{ v: 0, f: '' }, { v: 1, f: 'Close' }, { v: 2, f: 'CLG/OPG' }, { v: 3, f: 'Open' }, { v: 4, f: '' }]
    }
  };

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

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

---

EDIT

if you need to use the explorer option,
you can use a number instead of a string

use the formatted value to display the actual dates,
and build custom ticks for the x-axis using the same approach...

see following working snippet...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Date',  'State'],
    [new Date(1534078983500), 3],
    [new Date(1534078983880), 1],
    [new Date(1534080441460), 3],
    [new Date(1534080441840), 1],
    [new Date(1534080533960), 3],
    [new Date(1534080534330), 1]
  ]);

  var formatTime = new google.visualization.DateFormat({
    pattern: 'HH:ss.SSSS a'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([{
    calc: function (dt, row) {
      return {
        v: row,
        f: formatTime.formatValue(dt.getValue(row, 0))
      };
    },
    label: data.getColumnLabel(0),
    type: 'number'
  }, 1]);

  var xTicks = [];
  for (var i = 0; i < view.getNumberOfRows(); i++) {
    addTick(i);
  }
  function addTick(i) {
    xTicks.push({
      v: view.getValue(i, 0),
      f: view.getFormattedValue(i, 0)
    });
  }

  var options = {
    explorer: {},
    hAxis: {
      ticks: xTicks
    },
    title: 'The decline of \'The 39 Steps\'',
    vAxis: {
      title: 'Accumulated Rating',
      ticks: [{ v: 0, f: '' }, { v: 1, f: 'Close' }, { v: 2, f: 'CLG/OPG' }, { v: 3, f: 'Open' }, { v: 4, f: '' }]
    }
  };

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

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