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));
}
});
Source: stackoverflow.com
Related Query
- Sum of visible Points in ChartJs Bar Chart
- Chartjs Bar Chart showing old data when hovering
- Chartjs v2.0: stacked bar chart
- Changing fontFamily on ChartJS bar chart
- chartjs : how to set custom scale in bar chart
- Chartjs 2 - Stacked bar and unstacked line on same chart with same y axis
- Chartjs Bar Chart Legend
- Click event on stacked bar chart - ChartJs
- ChartJS add tooltip to a grouped bar chart
- ChartJS bar chart with legend which corresponds to each bar
- ChartJs bar chart - keep bars left instead of equally spread across the width
- Border radius for the bar chart in ChartJS
- Chartjs - data format for bar chart with multi-level x-axes
- Chartjs - show elements in all datasets on hover using bar chart
- Line chart is showing under bar in combochart in chartjs
- ChartJS bar not showing up for simple data points
- ChartJs line chart - display permanent icon above some data points with text on hover
- How to draw Horizontal line on Bar Chart Chartjs
- Grouping the object by key for Chartjs bar chart
- Multiple stacked bar chart using ChartJs
- ChartJS - handling of overlapping points in line chart
- ChartJS bar chart fixed width for dynamic data sets
- Stacked bar chart starting from 0 - ChartJS React
- Negative bar chart of highcharts in chartjs
- Chartjs - Donut Chart label for small values not visible
- annotation line not visible in scatter chart in chartjs
- Remove padding from chartJs horizontal bar chart
- Grouped Bar Chart from mySQL database using ChartJS and PHP
- Minimum value for x Axis doesn't work for horizontal bar chart | ChartJS
- Chartjs - Set start and end value into a Bar Chart
More Query from same tag
- Angular2 and ng2-charts does not display any graph
- Change background color of all charts beside the one hovered
- In a Stacked Line Chart, is there a way to stack multiple Y-Axes to match each graphed line?
- Add Gridlines using ChartKick in Rails
- chartjs update() not updating
- How to disable canvas elements from hijacking mouse wheel when scrolling through a page?
- Define new position for tooltip in ng2-charts
- Chart JS date-hour AxesX
- How to dynamically call function with a for loop within Chart.js (JS)
- Parsing error: Unexpected token, expected ";" line 54 in .map function
- Resize chart.js canvas for printing
- How to add the value for each label to pie legend
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- Update Chart vue3-chart with new data
- Using chartjs-plugin-annotation with ng2-charts
- ng-charts not updating labels when chart data is updated at same time
- How to use generated HTML legends to enable or disable datasets in Chart.js
- Want to show small part of js Bar Chart when value is zero
- Disable chartJS tool tip on one dataset only
- chartjs creating data array dynamically
- Python to chart.js
- Chart.js showing only last data value
- Chartjs is disappearing in Ionic tabs when keyboard dismiss
- charts disappear if rendered in hidden divs
- chart.js random weird problems
- creating a chart.js scatter graph with variables for data
- Background color of the graph affects the other graphs too
- Importing and using Echarts results in [object error] in Internet Explorer
- How to hide radar chart index labels (chart.js)
- Checkboxes unchecked after cart.js end of update animation