$(function () {
$('.performance-container').each(function () {
var container = $(this);
var updateForm = $('.performance-form', container);
var chartCanvas = $('.performance-canvas', container)[0];
var chart = null;
$('.performance-datetimepicker', container).datetimepicker({
widgetPositioning: {
horizontal: "auto",
vertical: "bottom"
}
});
updateForm.submit(function (event) {
window.classiDocs.showLoadingOverlay(container.parents('.x_panel'));
$.post(window.classiDocs.reporting.routes.classificationPerformance, updateForm.serialize(),
function (data) {
var chartData = data.Items.map(function (historyItem) {
return { x: historyItem.Timestamp, y: historyItem.Value };
});
if (!chart) {
initialize(chartData);
} else {
chart.data.datasets[0].data = chartData;
chart.update();
}
})
.always(function () {
window.classiDocs.hideLoadingOverlay(container.parents('.x_panel'));
});
event.preventDefault();
});
$(updateForm).submit();
function initialize(data) {
console.log(data);
chart = new Chart(chartCanvas.getContext("2d"), {
type: "line",
data: {
datasets: [
{
backgroundColor: "rgba(38, 185, 154, 0.31)",
borderColor: "rgba(38, 185, 154, 0.7)",
pointBorderColor: "rgba(38, 185, 154, 0.7)",
pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointBorderWidth: 1,
lineTension: 0,
tension: 0,
data: data
}
]
},
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
title: function (items) {
return new Date(items[0].xLabel).toLocaleString();
},
label: function (item) {
return item.y.toLocaleString();
},
footer: function () {
return null;
}
}
},
scales: {
xAxes: [
{
type: "time",
scaleLabel: {
display: true,
labelString: 'Time Span',
fontSize: 20,
fontColor: "#555555"
}
}
],
yAxes: [
{
scaleLabel: {
display: true,
labelString: 'Number Of Classifications',
fontSize: 20,
fontColor: "#555555"
},
ticks: {
beginAtZero: true
}
}
]
}
}
});
}
});
});
Hi all. I am still new to development so excuse any incorrect use of terminology. My goal here is to add a popup if the sum of the values on the y axis are equal to 0. The console.log(data); in this code returns two object arrays. The data in these arrays are returned in the console as follows:
0: {x: "2020-10-01T00:00:00", y: 0}
1: {x: "2020-10-01T00:30:00", y: 0}
2: {x: "2020-10-01T01:00:00", y: 0}
3: {x: "2020-10-01T01:30:00", y: 0}
4: {x: "2020-10-01T02:00:00", y: 0}
5: {x: "2020-10-01T02:30:00", y: 0}
This chart is being used dynamically so this one script produces two graphs. How could i loop through both arrays and find the sum of "y" for each? Thanks in advance.
You can use Array.prototype.reduce , here is the complete code
if (data.reduce((a, v) => a + v.y, 0) === 0) {
alert('The sum of data.y is zero!');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.