CODEWITHSUNDEEP
angularjschartsgoogle-visualization
sisimh
sisimh

Reputation: 1337

Google charts vAxis timespans

Hi Guys according to the documentation of google charts a row type can either be :

The type can be one of the following: 'string', 'number', 'boolean', 'date', 'datetime', and 'timeofday'.

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

I need to have timespan type, so I can have vAxis with values 0 hour, 1 hour, 2 hours, ....up to any number. Which will mean between each two is 60 degrees like a timespan, but not 100 degree like numbers.

Is there a way to acheive this? timeofday will not work also when reaching 24 hours it turns it into 00:00

Upvotes: 1

Views: 168

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

using the option --> hAxis.ticks

combined with object notation for values --> {v: value, f: formattedValue}

you could probably use just about any type (other than 'string')

see the following working snippet for a basic example...

a custom set of hAxis.ticks is built, one tick for each hour, in a 48 hour timespan 

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'Timespan');
  dataTable.addColumn('number', 'Y');

  var oneHour = (1000 * 60 * 60);
  var startDate = new Date();
  var endDate = new Date(startDate.getTime() + (oneHour * 24 * 2));
  var ticksAxisH = [];
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneHour) {
    var tickValue = new Date(i);
    var tickFormat = (tickValue.getTime() - startDate.getTime()) / oneHour;
    var tick = {
      v: tickValue,
      f: tickFormat + 'h'
    };
    ticksAxisH.push(tick);
    dataTable.addRow([tick, (2 * tickFormat) - 8]);
  }

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(dataTable, {
    hAxis: {
      ticks: ticksAxisH
    }
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions