score:0

so i found the solution by myself. in the 'animation' variable passed to the oncomplete callback is an array 'animation.chart.active' which can be looped to find the active dataset indexes. the active array is only populated when hovering over the bars of the graph, thats why the sum of points are only displayed when hovering over the bars.

the whole code looks now like this:

 function success_(data) {
    var ctx = document.getelementbyid('canvas').getcontext('2d');
    window.mybar = new chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            title: {
                display: true,
                text: 'square meters done per day'
            },
            tooltips: {
                mode: 'index',
                intersect: false
            },
            maintainaspectratio: false,
            responsive: true,
            scales: {
                xaxes: [{
                    stacked: true
                }],
                yaxes: [{
                    stacked: true
                }]
            },
            animation: {
                oncomplete: function(animation) {
                    //alert('onanimationcomplete');

                    if (typeof animation.chart !== 'undefined' && typeof animation.chart.active !== 'undefined') {
                        var active_datasets = new array();
                        //loop through active dataset to get the dataset indexes 
                        //which are visible to the user
                        animation.chart.active.foreach(function(active_ds) {
                            active_datasets.push(active_ds._datasetindex);
                        })

                        //loop through datasets to get the points for active datasets
                        var sqm = 0;
                        var i = 0;
                        this.data.datasets.foreach(function (dataset) {
                            if (active_datasets.indexof(i) != -1) {
                                dataset.data.foreach(function (points) {
                                    sqm = sqm + points;
                                })
                            }
                            i = i + 1;
                        })
                        $("#squaremetersurface").val(parsefloat(sqm).tofixed(1) + ' m2');
                    }
                }
            },
        }
    });
};

and the ajax call to invoce a .net core mvc action is like this:

$.ajax({
    url: '/yourcontroller/youractionforgraph/',
    type: 'get',
    data: {
        'param1': $('#param1').val(),
        'param2': $('#param2').val()
    },
    datatype: 'json',
    success: success_,
    error: function (request, error) {
        alert("request: " + json.stringify(request));
    }
});

Related Query

More Query from same tag