Hallo,
ich stelle ein ColumnChart mit einigen Werten dar.
Ich möchte gerne die Summe aller dargestellten werte darstellen.
Mein Problem ist wenn ich mit der Maus reinzoome ... dann soll er ja nur den dargestellten bereich zusammen zählen:
Zoom Event abfangen klappt:
Aber das zusammenzählen auf den gezoomten Bereich schaffe ich nicht. Ich erhalte so alle Werte:
ich stelle ein ColumnChart mit einigen Werten dar.
Ich möchte gerne die Summe aller dargestellten werte darstellen.
Mein Problem ist wenn ich mit der Maus reinzoome ... dann soll er ja nur den dargestellten bereich zusammen zählen:
Zoom Event abfangen klappt:
Javascript:
google.visualization.events.addListener(chartBar, 'ready', function () {
var zoomLast = getCoords();
var observer = new MutationObserver(function () {
var zoomCurrent = getCoords();
if (JSON.stringify(zoomLast) !== JSON.stringify(zoomCurrent)) {
zoomLast = getCoords();
console.log('zoom event');
calcTotal();
}
});
observer.observe(container, {
childList: true,
subtree: true
});
});
function getCoords() {
var chartLayout = chartBar.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
return {
x: {
min: chartLayout.getHAxisValue(chartBounds.left),
max: chartLayout.getHAxisValue(chartBounds.width + chartBounds.left)
},
y: {
min: chartLayout.getVAxisValue(chartBounds.top),
max: chartLayout.getVAxisValue(chartBounds.height + chartBounds.top)
}
};
}
Aber das zusammenzählen auf den gezoomten Bereich schaffe ich nicht. Ich erhalte so alle Werte:
Javascript:
function calcTotal() {
var data = new google.visualization.DataTable(jsonData);
// group data
var group = google.visualization.data.group(
data, // data table
[1], // group data by ManagerName
[
// agg columns
{'column': 2, 'aggregation': google.visualization.data.sum, 'type': 'number'},
{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}
]
);
document.getElementById('avg').innerHTML = group.getValue(0, 1);
}