javascript - Column chart in Google Chart displays bar below min -
ok, i've been looking similar i'm experiencing online can't decided ask around here advise solve issue.
i'm using angular google chart , trying create column chart display historical values portfolio totals.
code create chart
$scope.createportfoliobalancechart = function(){ var data = json.parse($scope.portfoliochartdata.rows.tojson()); console.log(json.stringify($scope.portfoliochartdata).replace(/\\/g,'')); var minvalue = _.reduce(data.rows, function(memo, bal){ var value = bal.c[1].v; return (value !== null && value < memo) ? value : memo; }, number.max_safe_integer); var maxvalue = _.reduce(data.rows, function(memo, bal){ var value = bal.c[1].v; return value > memo ? value : memo; }, number.min_safe_integer); var rangebleed = (maxvalue - minvalue) * portfoliobalancechartconfig.rangebleedpadding; var chart = {}; chart.type = 'columnchart'; chart.data = data; chart.options = { 'height': 300, 'fill': 20, isstacked: false, 'vaxis':{ 'baselinecolor': 'none', 'gridlinecolor': 'none', 'format': '$#,###', 'position': 'right', 'viewwindow' : { 'min': rangebleed > 0 ? minvalue - rangebleed : 0, // if range 0 start graph 0 'max': maxvalue + rangebleed } }, 'displayexactvalues': true, 'tooltip' : { 'trigger': true }, 'legend': { 'position': 'none' }, 'bar': { 'groupwidth': 30 }, 'colors': ['#33b4e6', '#0675c2'], }; chart.formatters = { number : [{ columnnum: 1, pattern: '$ #,##0.00' }, { columnnum: 2, pattern: '$ #,##0.00' }] }; $scope.portfoliobalancechart = chart; };$scope.portfoliochartdata
{ "rows": { "cols": [ { "label": "period", "type": "string" }, { "label": "balance", "type": "number" }, { "role": "style", "type": "string", "p": { "role": "style" } } ], "rows": [ { "c": [ { "v": "mar 2015" }, { "v": 68484.43 }, { "v": "" } ] }, { "c": [ { "v": "apr 2015" }, { "v": 68484.43 }, { "v": "" } ] }, { "c": [ { "v": "may 2015" }, { "v": 68484.43 }, { "v": "" } ] }, { "c": [ { "v": "jun 2015" }, { "v": 68484.43 }, { "v": "" } ] }, { "c": [ { "v": "jul 2015" }, { "v": 68484.43 }, { "v": "" } ] }, { "c": [ { "v": "today" }, { "v": 600000 }, { "v": "" } ] } ] }, "cols": [ { "label": "axis", "type": "string" }, { "label": "portfolio", "type": "number" } ] }stackoverflow preventing me post image here's sample image of chart constructed above:
ok, i've solved issue @ last. there seems property hiding in google chart docs enables set should baseline. different viewwindow.min is. added below viewwindow property.
$scope.createportfoliobalancechart = function(){ var data = json.parse($scope.portfoliochartdata.rows.tojson()); var minvalue = _.reduce(data.rows, function(memo, bal){ var value = bal.c[1].v; return (value !== null && value < memo) ? value : memo; }, number.max_safe_integer); var maxvalue = _.reduce(data.rows, function(memo, bal){ var value = bal.c[1].v; return value > memo ? value : memo; }, number.min_safe_integer); var rangebleed = (maxvalue - minvalue) * portfoliobalancechartconfig.rangebleedpadding; var chart = {}; chart.type = 'columnchart'; chart.data = data; chart.options = { 'height': 300, 'fill': 20, isstacked: false, 'vaxis':{ 'baselinecolor': 'none', 'gridlinecolor': 'none', 'format': '$#,###', 'position': 'right', 'viewwindow' : { 'min': rangebleed > 0 ? minvalue - rangebleed : 0, // if range 0 start graph 0 'max': maxvalue + rangebleed }, 'baseline': rangebleed > 0 ? minvalue - rangebleed : 0 // set same min prevent bar overlapping label below }, 'displayexactvalues': true, 'tooltip' : { 'trigger': true }, 'legend': { 'position': 'none' }, 'bar': { 'groupwidth': 30 }, 'colors': ['#33b4e6', '#0675c2'], }; chart.formatters = { number : [{ columnnum: 1, pattern: '$ #,##0.00' }, { columnnum: 2, pattern: '$ #,##0.00' }] }; $scope.portfoliobalancechart = chart; };
Comments
Post a Comment