CODEWITHSUNDEEP
javascriptchartsgoogle-visualizationaxis
Ludo
Ludo

Reputation: 121

Google chart - Different format on hAxis

I have a problem with my hAxis format on a simple google chart. In my option var: 

'hAxis': {
  baseline: minDate, 
  format: 'dd/MM'
},

I fill my values array:

var dataTable = new google.visualization.DataTable();
dataTable.addColumn('date', 'X');
dataTable.addColumn('number', 'Value'));
var values = [];
values.push([new Date(date), 10]);

I get this google chart hAxis.

I want to display each monday on my chart like "Monday 06/02". Other days are display like now : 

17/01 ---- 21/01 ----- 25/01 ----- 29/01 --- 02/02 ---- Monday 06/02

Is it possible to get this?

Upvotes: 1

Views: 1250

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

use hAxis.ticks to provide custom axis labels

the following working snippet adds a label every 7 days, starting on a Monday... 

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

function drawChart() {
  var formatDate = new google.visualization.DateFormat({
    pattern: 'dd/MM'
  });

  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('date', 'X');
  dataTable.addColumn('number', 'Value');

  var oneDay = (1000 * 60 * 60 * 24);
  var startDate = new Date(2017, 0, 16);
  var endDate = new Date();
  var ticksAxisH = [];
  for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) {
    // set x value
    var rowDate = new Date(i);
    var xValue = {
      v: rowDate,
      f: formatDate.formatValue(rowDate)
    };

    // set y value (y = 2x + 8)
    var yValue = (2 * ((i - startDate.getTime()) / oneDay) + 8);

    // add data row
    dataTable.addRow([
      xValue,
      yValue
    ]);

    // add tick every 7 days
    if (((i - startDate.getTime()) % 7) === 0) {
      ticksAxisH.push(xValue);
    }
  }

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

Upvotes: 1

Related Questions