• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Google ColumnChart gezoomed zusammenzählen

unique24

Mitglied
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:
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);
            }
 
Zurück
Oben