javascript - How to Seperate Dates by Year in Google Line Chart -

javascript - How to Seperate Dates by Year in Google Line Chart -

i've got list of dates/values display in google charts: line chart.

data.addrows([ [new date("2011-02-01t15:18:21+00:00"), 21.77], [new date("2011-03-01t15:18:59+00:00"), 20.96], //[...], [new date("2011-12-01t07:54:15+00:00"), 17.04], [new date("2012-01-01t10:29:00+00:00"), 20.43], [new date("2012-02-01t08:03:00+00:00"), 22.51], [new date("2012-03-01t08:07:00+00:00"), 26.75], //[...], [new date("2013-01-02t16:16:00+00:00"), 20.7], [new date("2013-02-03t13:51:00+00:00"), 24.41], [new date("2013-03-01t08:06:00+00:00"), 25.44], //[...], [new date("2014-01-01t10:19:00+00:00"), 16.24], [new date("2014-02-01t10:16:00+00:00"), 19.13], [new date("2014-03-01t08:05:00+00:00"), 17.68], [new date("2014-04-01t08:11:00+00:00"), 10.97] //[...],

this works fine, seperate values year e.g. 1 line per year compare them. how can set x-axis range without year?

this result achieve, works if false years same.

i believe want discrete axis. each date unique result each info point discrete point on axis. trick forcefulness continuous axis , prepare formatting. creating view first column beingness numeric month. prepare format translating 0-11 months tick values , forcing every 1 tick. can preserve dates in original value.

and way, how of charts: 1) utilize info table sort rows 2) utilize info view filter on rows , columns , generate derivative values. 3) utilize options finish and/or abstract presentation of information.

working illustration on jsfiddle

<div> <div id='testchart'></div> <script type="text/javascript"> function drawchart() { var info = new google.visualization.datatable(); data.addcolumn('date', 'date'); data.addcolumn('number', '2011'); data.addcolumn('number', '2012'); data.addcolumn('number', '2013'); data.addcolumn('number', '2014'); data.addrows([ [new date("2011-02-01t15:18:21+00:00"), 21.77, null, null, null], [new date("2011-03-01t15:18:59+00:00"), 20.96, null, null, null], [new date("2011-04-01t15:19:22+00:00"), 15.75, null, null, null], [new date("2011-05-01t15:19:44+00:00"), 6.92, null, null, null], [new date("2011-06-01t08:12:00+00:00"), 4.46, null, null, null], [new date("2011-07-06t07:54:00+00:00"), 2.54, null, null, null], [new date("2011-08-01t15:30:21+00:00"), 2.96, null, null, null], [new date("2011-09-01t15:30:35+00:00"), 2.94, null, null, null], [new date("2011-10-01t15:30:58+00:00"), 3.3, null, null, null], [new date("2011-11-01t15:31:37+00:00"), 10.72, null, null, null], [new date("2011-12-01t07:54:15+00:00"), 17.04, null, null, null], [new date("2012-01-01t10:29:00+00:00"), null, 20.43, null, null], [new date("2012-02-01t08:03:00+00:00"), null, 22.51, null, null], [new date("2012-03-01t08:07:00+00:00"), null, 26.75, null, null], [new date("2012-04-01t12:58:04+00:00"), null, 13.09, null, null], [new date("2012-05-01t12:58:59+00:00"), null, 13.52, null, null], [new date("2012-06-01t08:09:00+00:00"), null, 4.71, null, null], [new date("2012-07-01t13:00:06+00:00"), null, 3.92, null, null], [new date("2012-08-01t08:02:00+00:00"), null, 2.85, null, null], [new date("2012-09-01t09:52:18+00:00"), null, 3.05, null, null], [new date("2012-10-01t17:13:00+00:00"), null, 4.2, null, null], [new date("2012-11-01t10:03:00+00:00"), null, 10.79, null, null], [new date("2012-12-01t10:52:00+00:00"), null, 16.68, null, null], [new date("2013-01-02t16:16:00+00:00"), null, null, 20.7, null], [new date("2013-02-03t13:51:00+00:00"), null, null, 24.41, null], [new date("2013-03-01t08:06:00+00:00"), null, null, 25.44, null], [new date("2013-04-01t09:58:00+00:00"), null, null, 23.15, null], [new date("2013-05-01t20:26:00+00:00"), null, null, 12.13, null], [new date("2013-06-01t13:19:00+00:00"), null, null, 6.77, null], [new date("2013-07-01t18:09:00+00:00"), null, null, 4.26, null], [new date("2013-08-23t14:32:00+00:00"), null, null, 2.67, null], [new date("2013-09-01t09:41:00+00:00"), null, null, 3.25, null], [new date("2013-10-01t12:42:14+00:00"), null, null, 5.2, null], [new date("2013-11-01t12:43:17+00:00"), null, null, 8.95, null], [new date("2013-12-01t12:43:38+00:00"), null, null, 17.02, null], [new date("2014-01-01t10:19:00+00:00"), null, null, null, 16.24], [new date("2014-02-01t10:16:00+00:00"), null, null, null, 19.13], [new date("2014-03-01t08:05:00+00:00"), null, null, null, 17.68], [new date("2014-04-01t08:11:00+00:00"), null, null, null, 10.97], [new date("2014-05-01t09:06:00+00:00"), null, null, null, 6.57], [new date("2014-07-01t07:57:00+00:00"), null, null, null, 4.25], [new date("2014-08-03t11:26:00+00:00"), null, null, null, 2.14], [new date("2014-09-02t08:04:00+00:00"), null, null, null, 2.95], [new date("2014-10-01t07:18:00+00:00"), null, null, null, 3.75] ]); var dview = new google.visualization.dataview(data); dview.setcolumns([ {calc:getmon, type:'number', label:"month"} ,1 ,2 ,3 ,4]); function getmon(datatable, rownum){ var rd = datatable.getvalue(rownum, 0); var rm = rd.getmonth(); homecoming {v:rm}; } var options = { haxis: { title: 'month' ,showtextevery: 1 ,ticks: [{v:0, f:'jan'}, {v:1, f:'feb'}, {v:2, f:'mar'}, {v:3, f:'apr'}, {v:4, f:'may'}, {v:5, f:'jun'}, {v:6, f:'jul'}, {v:7, f:'aug'}, {v:8, f:'sep'}, {v:9, f:'oct'}, {v:10, f:'nov'}, {v:11, f:'dec'}] } } var chart = new google.visualization.linechart(document.getelementbyid('testchart')); chart.draw(dview, options); } drawchart(); </script>

javascript api charts