Created
January 23, 2014 15:44
-
-
Save jesslilly/8580813 to your computer and use it in GitHub Desktop.
Convert data used for an ngGrid (Array of same-key objects) to something that will work for a google-chart focusing on the data attribute. It would be good to refactor this code to simply take an input array and convert to google-chart format. Call groupBy externally instead.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var ngGridObj = [ { | |
"entity" : { | |
'date' : '2013-09-23 23:23:23', | |
'amt' : 4.5, | |
'name' : 'Mike' | |
} | |
}, { | |
"entity" : { | |
'date' : '2013-09-26 23:23:23', | |
'amt' : 6.5, | |
'name' : 'Mike' | |
} | |
}, { | |
"entity" : { | |
'date' : '2013-09-26 23:27:27', | |
'amt' : 3, | |
'name' : 'Maven' | |
} | |
} ]; | |
var ngGridX = 'date'; | |
var ngGridY = 'amt'; | |
var googleChartData = { | |
"cols" : [ { | |
"id" : "date", | |
"label" : "date", | |
"type" : "string" | |
}, { | |
"id" : "amt", | |
"label" : "amt", | |
"type" : "number" | |
} ], | |
"rows" : [ { | |
"c" : [ { | |
"v" : "2013-09-23 23:23:23" | |
}, { | |
"v" : 4.5 | |
} ] | |
}, { | |
"c" : [ { | |
"v" : "2013-09-26 23:23:23" | |
}, { | |
"v" : 6.5 | |
} ] | |
}, { | |
"c" : [ { | |
"v" : "2013-09-26 23:27:27" | |
}, { | |
"v" : 3, | |
} ] | |
}, ] | |
}; | |
var googleChartData2 = { | |
"cols" : [ { | |
"id" : "date", | |
"label" : "date", | |
"type" : "string" | |
}, { | |
"id" : "amt", | |
"label" : "amt", | |
"type" : "number" | |
} ], | |
"rows" : [ { | |
"c" : [ { | |
"v" : "2013-09-23" | |
}, { | |
"v" : 4.5 | |
} ] | |
}, { | |
"c" : [ { | |
"v" : "2013-09-24" | |
}, { | |
"v" : 0 | |
} ] | |
}, { | |
"c" : [ { | |
"v" : "2013-09-25" | |
}, { | |
"v" : 0 | |
} ] | |
}, { | |
"c" : [ { | |
"v" : "2013-09-26" | |
}, { | |
"v" : 9.5 | |
} ] | |
}, ] | |
}; | |
var googleChartData3 = { | |
"cols" : [ { | |
"id" : "date", | |
"label" : "date", | |
"type" : "string" | |
}, { | |
"id" : "amt", | |
"label" : "amt", | |
"type" : "number" | |
} ], | |
"rows" : [ { | |
"c" : [ { | |
"v" : "2013-09-01" | |
}, { | |
"v" : 4.666666666666667 | |
} ] | |
}, ] | |
}; | |
var googleChartData4 = { | |
"cols" : [ { | |
"id" : "name", | |
"label" : "name", | |
"type" : "string" | |
}, { | |
"id" : "amt", | |
"label" : "amt", | |
"type" : "number" | |
} ], | |
"rows" : [ { | |
"c" : [ { | |
"v" : "Mike" | |
}, { | |
"v" : 5.5 | |
} ] | |
}, { | |
"c" : [ { | |
"v" : "Maven" | |
}, { | |
"v" : 3 | |
} ] | |
}, ] | |
}; | |
it('should create a google chart obj given a ng-grid data source', function() { | |
expect(ngGrid2GoogleChartData(ngGridObj, ngGridX, ngGridX, ngGridY, ngGridY, "none", "sum", "transactions > 2013-01-01").data).toEqual(googleChartData); | |
}); | |
it('should create a google chart obj grouping by day and summing the group. Missing days will fill in.', function() { | |
expect(ngGrid2GoogleChartData(ngGridObj, ngGridX, ngGridX, ngGridY, ngGridY, "day", "sum", "transactions > 2013-01-01").data).toEqual(googleChartData2); | |
}); | |
it('should create a google chart obj grouping by month and avg the group. Missing months will fill in.', function() { | |
expect(ngGrid2GoogleChartData(ngGridObj, ngGridX, ngGridX, ngGridY, ngGridY, "month", "avg", "transactions > 2013-01-01").data).toEqual(googleChartData3); | |
}); | |
it('should create a google chart obj grouping by x value and avg the group.', function() { | |
expect(ngGrid2GoogleChartData(ngGridObj, 'name', 'name', 'amt', 'amt', "x", "avg", "transactions > 2013-01-01").data).toEqual(googleChartData4); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div google-chart chart="chart" style="{{chart.cssStyle}}"/> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* @method | |
* @public | |
* @description Convert data used for an ngGrid (Array of same-key objects) to | |
* something that will work for a google-chart focusing on the data | |
* attribute. It would be good to refactor this code to simply take | |
* an input array and convert to google-chart format. Call groupBy | |
* externally instead. | |
* @param {array} | |
* gridRows - array of x/y values. Can include extra fields. | |
* @param {string} | |
* xCol - name of x attribute. | |
* @param {string} | |
* xLbl - Human readable version of xCol. | |
* @param {string} | |
* yCol - name of y attribute. | |
* @param {string} | |
* yLbl - Human readable version of yCol. | |
* @param {string} | |
* chartGroup - day, month, x, none. Call grouping function if !none. | |
* @param {string} | |
* chartAgg - max, sum, avg | |
* @param {string} | |
* showing - used to build the title of the chart. (What data is | |
* showing?) | |
* @return {object} chart - full google-chart data. | |
*/ | |
function ngGrid2GoogleChartData(gridRows, xCol, xLbl, yCol, yLbl, chartGroup, chartAgg, showing) { | |
var start = new Date(); | |
var MAX_ROWS = 500; | |
var groupInput = []; | |
var groupOutput = []; | |
var chart = chartTemplate(); | |
var data = chart.data; | |
data.cols = []; | |
data.rows = []; | |
var title = (chartGroup === "none") ? "" : chartAgg; | |
title += " " + yLbl + " over " + xLbl + " for " + showing; | |
chart.options.title = title; | |
chart.options.vAxis.title = yLbl; | |
chart.options.hAxis.title = xLbl; | |
// No grouping: Push the ngGrid rows array into the google chart. | |
if (chartGroup === "none") { | |
for ( var idx = 0; idx < gridRows.length; idx++) { | |
var gridRow = gridRows[idx]; | |
data.rows.push({ | |
"c" : [ { | |
"v" : gridRow.entity[xCol] | |
}, { | |
"v" : gridRow.entity[yCol] | |
}, ] | |
}); | |
// Now that we are grouping, we need to count the output # of rows. | |
if (data.rows.length >= MAX_ROWS) { | |
break; | |
} | |
} | |
} else { | |
// Grouped! Push the grouped object into the google chart. | |
groupInput = _.map(gridRows, function(row) { | |
return row.entity; | |
}); | |
groupOutput = groupBy(groupInput, xCol, yCol, chartGroup, chartAgg); | |
_.each(groupOutput, function(row) { | |
data.rows.push({ | |
"c" : [ { | |
"v" : row[xCol] | |
}, { | |
"v" : row[yCol] | |
}, ] | |
}); | |
}); | |
} | |
data.cols = [ { | |
"id" : xCol, | |
"label" : xCol, | |
"type" : "string" | |
}, { | |
"id" : yCol, | |
"label" : yCol, | |
"type" : "number" | |
}, ]; | |
var end = new Date(); | |
console.log("ngGrid2GoogleChartData processed " + gridRows.length + " rows in " + (end - start) + "ms."); | |
return chart; | |
} | |
function chartTemplate() { | |
var chartModel = {}; | |
chartModel = { | |
"type" : "ColumnChart", | |
"displayed" : true, | |
"cssStyle" : "height:400px; width:100%;", | |
"data" : { | |
"cols" : [ { | |
"id" : "date", | |
"label" : "date", | |
"type" : "string" | |
}, { | |
"id" : "amt", | |
"label" : "amt", | |
"type" : "number" | |
} ], | |
"rows" : [ { | |
"c" : [ { | |
"v" : "2013-09-25 23:23:23" | |
}, { | |
"v" : 4.5 | |
} ] | |
}, { | |
"c" : [ { | |
"v" : "2013-09-26 23:23:23" | |
}, { | |
"v" : 6.5 | |
} ] | |
}, { | |
"c" : [ { | |
"v" : "2013-09-27 23:23:23" | |
}, { | |
"v" : 3, | |
} ] | |
}, ] | |
}, | |
"options" : { | |
"title" : "Updating...", | |
"isStacked" : "true", | |
"fill" : 20, | |
"displayExactValues" : true, | |
"vAxis" : { | |
"title" : "" | |
}, | |
"hAxis" : { | |
"title" : "" | |
} | |
}, | |
"formatters" : {} | |
}; | |
return chartModel; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment