CODEWITHSUNDEEP
javascriptjsonajaxgoogle-apigoogle-visualization
Evgeny Malkov
Evgeny Malkov

Reputation: 477

Google Charts API - how to turn my x-axis labels into Date Format and then group by month on some button click

My JSON array, which I'm getting by ajax response, looks like that:

[["\u041f\u0435\u0440\u0438\u043e\u0434","\u041a\u043b\u0438\u0435\u043d\u0442\u044b","\u0421\u0434\u0435\u043b\u043a\u0438","\u0421\u0443\u043c\u043c\u0430 \u0441\u0434\u0435\u043b\u043e\u043a","\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0435\u043b\u043a\u0438"],["2017-02-18",0,0,0,0],["2017-02-19",1,0,0,0],["2017-02-20",2,0,0,0],["2017-02-21",4,1,64000,0],["2017-02-22",0,0,0,0],["2017-02-23",3,0,0,0],["2017-02-24",1,0,0,0],["2017-02-25",0,0,0,0],["2017-02-26",2,0,0,0],["2017-02-27",1,1,50000,0],["2017-02-28",1,0,0,0]...etc

So, everythings works fine, my X-axis labels looks good, but I can't understand how can I: 1) make them in date format for Google Chart understand that this is date and 2) group them by month by clicking some button

All problems come from my way of Google Charts implementing. Here's the code.

        		function drawChart() {
            var obj ='[["\u041f\u0435\u0440\u0438\u043e\u0434","\u041a\u043b\u0438\u0435\u043d\u0442\u044b","\u0421\u0434\u0435\u043b\u043a\u0438","\u0421\u0443\u043c\u043c\u0430 \u0441\u0434\u0435\u043b\u043e\u043a","\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0435\u043b\u043a\u0438"],["2017-02-18",0,0,0,0],["2017-02-19",1,0,0,0],["2017-02-20",2,0,0,0],["2017-02-21",4,1,64000,0],["2017-02-22",0,0,0,0],["2017-02-23",3,0,0,0],["2017-02-24",1,0,0,0],["2017-02-25",0,0,0,0],["2017-02-26",2,0,0,0],["2017-02-27",1,1,50000,0],["2017-02-28",1,0,0,0],["2017-03-01",0,0,0,0],["2017-03-02",6,0,0,0],["2017-03-03",2,0,0,0],["2017-03-04",1,0,0,0],["2017-03-05",1,0,0,0],["2017-03-06",10,0,0,0],["2017-03-07",1,0,0,0],["2017-03-08",1,0,0,0],["2017-03-09",0,0,0,0],["2017-03-10",9,0,0,0],["2017-03-11",0,0,0,0],["2017-03-12",3,0,0,0],["2017-03-13",3,0,0,0],["2017-03-14",1,0,0,0],["2017-03-15",6,0,0,0],["2017-03-16",1,0,0,0],["2017-03-17",1,0,0,0],["2017-03-18",0,0,0,0],["2017-03-19",5,0,0,0],["2017-03-20",5,0,0,0]]';
data = google.visualization.arrayToDataTable($.parseJSON(obj));

var options = {
        				crosshair: {
        					trigger: 'both',
        					orientation: 'vertical'
        				},
        				focusTarget: 'category',
        				chartArea:{left:40,top:40,width:"85%"},
        				hAxis: {
						   format: 'MM'
						},
		                vAxes: {
		                	0: {},
		                  	1: {title: 'Cумма'},
		                  },
		                series: {0: {targetAxisIndex:0},
		                   1:{targetAxisIndex:0},
		                   2:{targetAxisIndex:1},
		                   3:{targetAxisIndex:1},
		                },
		                animation:{
					        duration: 750,
					        // easing: 'out',
					        startup: true
				      	},
				      	backgroundColor: 'aliceblue'
        			};

        			var chart = new google.visualization.LineChart(
        				document.getElementById('chart_div')
        			);

        			chart.draw(data, options);
        }
        
        google.charts.load('current', {'packages':['corechart']});
        		google.charts.setOnLoadCallback(drawChart);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 400px;"></div>

Upvotes: 3

Views: 515

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

1) for google to recognize the first column as a date, need to use the following format in the json... 

"Date(year, month, day, hours, minutes, days, seconds, milliseconds)"

e.g. 

["Date(2017, 1, 18)",0,0,0,0],["Date(2017, 1, 19)",1,0,0,0],

month is zero-based --> 1 = Feb

or, you can use a view and a calculated column to convert, see snippet...

2) use the group() method to group by month

see following working snippet... 

function drawChart() {
  var obj ='[["\u041f\u0435\u0440\u0438\u043e\u0434","\u041a\u043b\u0438\u0435\u043d\u0442\u044b","\u0421\u0434\u0435\u043b\u043a\u0438","\u0421\u0443\u043c\u043c\u0430 \u0441\u0434\u0435\u043b\u043e\u043a","\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0435\u043b\u043a\u0438"],["2017-02-18",0,0,0,0],["2017-02-19",1,0,0,0],["2017-02-20",2,0,0,0],["2017-02-21",4,1,64000,0],["2017-02-22",0,0,0,0],["2017-02-23",3,0,0,0],["2017-02-24",1,0,0,0],["2017-02-25",0,0,0,0],["2017-02-26",2,0,0,0],["2017-02-27",1,1,50000,0],["2017-02-28",1,0,0,0],["2017-03-01",0,0,0,0],["2017-03-02",6,0,0,0],["2017-03-03",2,0,0,0],["2017-03-04",1,0,0,0],["2017-03-05",1,0,0,0],["2017-03-06",10,0,0,0],["2017-03-07",1,0,0,0],["2017-03-08",1,0,0,0],["2017-03-09",0,0,0,0],["2017-03-10",9,0,0,0],["2017-03-11",0,0,0,0],["2017-03-12",3,0,0,0],["2017-03-13",3,0,0,0],["2017-03-14",1,0,0,0],["2017-03-15",6,0,0,0],["2017-03-16",1,0,0,0],["2017-03-17",1,0,0,0],["2017-03-18",0,0,0,0],["2017-03-19",5,0,0,0],["2017-03-20",5,0,0,0]]';
  var data = google.visualization.arrayToDataTable($.parseJSON(obj));

  // create date formatter
  var formatDate = new google.visualization.DateFormat({
    pattern: 'MM'
  });

  // create view with calculated column
  var view = new google.visualization.DataView(data);
  view.setColumns([
    // col 0 - x
    {
      label: 'date',
      type: 'date',
      calc: function (dt, row) {
        return new Date(dt.getValue(row, 0))
      }
    },
    // col 1 - y
    1
  ]);

  // group by month
  var groupData = google.visualization.data.group(
    // data table
    view,
    // group by fields
    [{column: 0, type: 'string', modifier: function (xValue) {
      return formatDate.formatValue(new Date(xValue));
    }}],
    // aggregate fields
    [
      {
        aggregation: google.visualization.data.sum,
        column: 1,
        label: 'Total',
        type: 'number'
      }
    ]
  );

  var options = {
    crosshair: {
      trigger: 'both',
      orientation: 'vertical'
    },
    focusTarget: 'category',
    chartArea:{left:40,top:40,width:"85%"},
    hAxis: {
      format: 'MM'
    },
    vAxes: {
      0: {},
        1: {title: 'C????'},
      },
    series: {0: {targetAxisIndex:0},
       1:{targetAxisIndex:0},
       2:{targetAxisIndex:1},
       3:{targetAxisIndex:1},
    },
    animation:{
      duration: 750,
      easing: 'inAndOut',
      startup: true
    },
    backgroundColor: 'aliceblue'
  };

  var chart = new google.visualization.LineChart(
    document.getElementById('chart_div')
  );

  // draw grouped data
  chart.draw(groupData, options);
}

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>

Upvotes: 1

Related Questions