User616263
User616263

Reputation: 467

How to set the last day of the month on haxis line chart google visualization

I want to show the end of month and not the begin of month. example: March 2014 ==> feb, 28, 2014 example2: Apr 2014 ==> Mar, 31, 2014

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([  
       ['Date', 'Data'],    
       //January
  [new Date(2014, 1 ,1),0.7],
  [new Date(2014, 1 ,2),0.5],
  [new Date(2014, 1 ,3),0.7],
  [new Date(2014, 1 ,4),0.5],
  [new Date(2014, 1 ,5),0.7],
  [new Date(2014, 1 ,6),0.5],
  [new Date(2014, 1 ,7),0.7],
  [new Date(2014, 1 ,8),0.5],
  [new Date(2014, 1 ,9),0.7],
  [new Date(2014, 1 ,10),0.5],
  [new Date(2014, 1 ,11),0.7],
  [new Date(2014, 1 ,12),0.5],
  [new Date(2014, 1 ,13),0.7],
  [new Date(2014, 1 ,14),0.5],
  [new Date(2014, 1 ,15),0.7],
  [new Date(2014, 1 ,16),0.5],
  [new Date(2014, 1 ,17),0.7],
  [new Date(2014, 1 ,18),0.5],
  [new Date(2014, 1 ,19),0.7],
  [new Date(2014, 1 ,20),0.5],
  [new Date(2014, 1 ,21),0.7],
  [new Date(2014, 1 ,22),0.5],
  [new Date(2014, 1 ,23),0.7],
  [new Date(2014, 1 ,24),0.5],
  [new Date(2014, 1 ,25),0.7],
  [new Date(2014, 1 ,26),0.5],
  [new Date(2014, 1 ,27),0.7],
  [new Date(2014, 1 ,28),0.5],
  [new Date(2014, 1 ,29),0.7],
  [new Date(2014, 1 ,30),0.5],
  [new Date(2014, 1 ,31),0.5],

  // Feb
  [new Date(2014, 2 ,1),0.7],
  [new Date(2014, 2 ,2),0.5],
  [new Date(2014, 2 ,3),0.7],
  [new Date(2014, 2 ,4),0.5],
  [new Date(2014, 2 ,5),0.7],
  [new Date(2014, 2 ,6),0.5],
  [new Date(2014, 2 ,7),0.7],
  [new Date(2014, 2 ,8),0.5],
  [new Date(2014, 2 ,9),0.7],
  [new Date(2014, 2 ,10),0.5],
  [new Date(2014, 2 ,11),0.7],
  [new Date(2014, 2 ,12),0.5],
  [new Date(2014, 2 ,13),0.7],
  [new Date(2014, 2 ,14),0.5],
  [new Date(2014, 2 ,15),0.7],
  [new Date(2014, 2 ,16),0.5],
  [new Date(2014, 2 ,17),0.7],
  [new Date(2014, 2 ,18),0.5],
  [new Date(2014, 2 ,19),0.7],
  [new Date(2014, 2 ,20),0.5],
  [new Date(2014, 2 ,21),0.7],
  [new Date(2014, 2 ,22),0.5],
  [new Date(2014, 2 ,23),0.7],
  [new Date(2014, 2 ,24),0.5],
  [new Date(2014, 2 ,25),0.7],
  [new Date(2014, 2 ,26),0.5],
  [new Date(2014, 2 ,27),0.7],
  [new Date(2014, 2 ,28),0.5],


  //March
  [new Date(2014, 3 ,1),0.7],
  [new Date(2014, 3 ,2),0.5],
  [new Date(2014, 3 ,3),0.7],
  [new Date(2014, 3 ,4),0.5],
  [new Date(2014, 3 ,5),0.7],
  [new Date(2014, 3 ,6),0.5],
  [new Date(2014, 3 ,7),0.7],
  [new Date(2014, 3 ,8),0.5],
  [new Date(2014, 3 ,9),0.7],
  [new Date(2014, 3 ,10),0.5],
  [new Date(2014, 3 ,11),0.7],
  [new Date(2014, 3 ,12),0.5],
  [new Date(2014, 3 ,13),0.7],
  [new Date(2014, 3 ,14),0.5],
  [new Date(2014, 3 ,15),0.7],
  [new Date(2014, 3 ,16),0.5],
  [new Date(2014, 3 ,17),0.7],
  [new Date(2014, 3 ,18),0.5],
  [new Date(2014, 3 ,19),0.7],
  [new Date(2014, 3 ,20),0.5],
  [new Date(2014, 3 ,21),0.7],
  [new Date(2014, 3 ,22),0.5],
  [new Date(2014, 3 ,23),0.7],
  [new Date(2014, 3 ,24),0.5],
  [new Date(2014, 3 ,25),0.7],
  [new Date(2014, 3 ,26),0.5],
  [new Date(2014, 3 ,27),0.7],
  [new Date(2014, 3 ,28),0.5],
  [new Date(2014, 3 ,29),0.7],
  [new Date(2014, 3 ,30),0.5],
  [new Date(2014, 3 ,31),0.5],
  ]);

    var options = {
      title: '',
      colors:['#193763','#004411'],
      lineWidth: 4 ,
      width:'900',
      height:'320',
      aggregationTarget: 'Date',
     };

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

enter image description here

Upvotes: 0

Views: 158

Answers (1)

asgallant
asgallant

Reputation: 26340

You can specify which values to use for the x-axis labels by setting the hAxis.ticks option. As an example:

hAxis: {
    // set the tick values to "Dec 31, 2013", "Jan 31, 2014", and "Feb 28, 2014"
    ticks: [new Date(2013, 11, 31), new Date(2014, 0, 31), new Date(2014, 1, 28)]
}

You still need to fix the months in your data, as I pointed out in my comment on your question.

Upvotes: 1

Related Questions