how approach column chart when having month , year.
my data in format
['group','count','month','year'], ['a',10,'february',2015], ['b',8,'february',2015], ['c',15,'february',2016] aim create column chart has x-axis month , y-axis count. x-axis should have count years grouped month. - 
i tried pass above data see can get, error.
any way assign axis values based on year grouped month ?
just need 3 columns, this...
['month', '2015', '2016'], ['jan', 10, 15], ['feb', 12, 18], ['mar', 14, 21], ['apr', 16, 24] then can use dataview add annotations, via calculated columns...
var view = new google.visualization.dataview(data); view.setcolumns([0, 1, { calc: 'stringify', sourcecolumn: 1, type: 'string', role: 'annotation' }, 2, { calc: 'stringify', sourcecolumn: 2, type: 'string', role: 'annotation' }]); see following working snippet...
google.charts.load('current', { callback: function () { var data = google.visualization.arraytodatatable([ ['month', '2015', '2016'], ['jan', 10, 15], ['feb', 12, 18], ['mar', 14, 21], ['apr', 16, 24] ]); var view = new google.visualization.dataview(data); view.setcolumns([0, 1, { calc: 'stringify', sourcecolumn: 1, type: 'string', role: 'annotation' }, 2, { calc: 'stringify', sourcecolumn: 2, type: 'string', role: 'annotation' }]); var chart = new google.visualization.columnchart(document.getelementbyid('chart_div')); chart.draw(view, {}); }, packages: ['corechart'] });<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>edit
all google charts require specific dataformat
meaning, manipulation required if data not exist in format
the visualization library offer data manipulation methods, such group()
which used transform data required format
1) group data month , year
2) create new datatable month column
3) add column each year grouped table
4) add rows each month
see following working snippet, using data question...
google.charts.load('current', { callback: function () { var data = google.visualization.arraytodatatable([ ['group', 'count', 'month', 'year'], ['a', 10, 'february', 2015], ['b', 8, 'february', 2015], ['c' , 15, 'february', 2016] ]); // group month / year var datagroup = google.visualization.data.group( data, [2, 3], [{column: 1, aggregation: google.visualization.data.sum, type: 'number', label: 'count'}] ); datagroup.sort([{column: 0},{column: 1}]); // build final data table var yeardata = new google.visualization.datatable({ cols: [ {label: 'month', type: 'string'} ] }); // add column each year var years = datagroup.getdistinctvalues(1); (var = 0; < years.length; i++) { yeardata.addcolumn( {label: years[i], type: 'number'} ); } // add row each month var rowmonth = null; var rowindex = null; (var = 0; < datagroup.getnumberofrows(); i++) { if (rowmonth !== datagroup.getvalue(i, 0)) { rowmonth = datagroup.getvalue(i, 0); rowindex = yeardata.addrow(); yeardata.setvalue(rowindex, 0, rowmonth); } (var x = 1; x < yeardata.getnumberofcolumns(); x++) { if (yeardata.getcolumnlabel(x) === datagroup.getvalue(i, 1).tostring()) { yeardata.setvalue(rowindex, x, datagroup.getvalue(i, 2)); } } } var view = new google.visualization.dataview(yeardata); view.setcolumns([0, 1, { calc: 'stringify', sourcecolumn: 1, type: 'string', role: 'annotation' }, 2, { calc: 'stringify', sourcecolumn: 2, type: 'string', role: 'annotation' }]); var container = document.getelementbyid('chart_div'); var chart = new google.visualization.columnchart(container); chart.draw(view); }, packages: ['corechart'] });<script src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div"></div>
Comments
Post a Comment