Samuele Locatelli
99 lines
3.1 KiB
Plaintext
99 lines
3.1 KiB
Plaintext
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="cmp_BatchStatsPlot.ascx.cs" Inherits="NKC_WF.WebUserControls.cmp_BatchStatsPlot" %>
|
|
|
|
<%--https://www.chartjs.org/--%>
|
|
|
|
<div class="row">
|
|
<div class="col-12 px-2">
|
|
<h4>Batch Stats Plot</h4>
|
|
</div>
|
|
<div class="col-12 px-2">
|
|
<asp:HiddenField runat="server" ID="hfShowLast" Value="10" />
|
|
<asp:HiddenField runat="server" ID="hfPlotType" Value="" />
|
|
<asp:HiddenField runat="server" ID="hfLegend" Value="" />
|
|
<canvas id="myChartTS" height="200"></canvas>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
// funzione eseguita se successo al caricamento
|
|
function OnSuccess_(reponse) {
|
|
// recupero dati restituiti
|
|
var dataTS = reponse;
|
|
//console.log('Received data', dataTS);
|
|
|
|
// preparo etichette
|
|
var labelsTS = dataTS.map(function (item) {
|
|
return item['x'];
|
|
});
|
|
//console.log('labels data', labelsTS);
|
|
|
|
var myOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
yAxes: [{
|
|
ticks: {
|
|
beginAtZero: true,
|
|
},
|
|
}],
|
|
},
|
|
animation: {
|
|
duration: 150
|
|
},
|
|
};
|
|
|
|
// recupero obj chart
|
|
//console.log('ctx ID: ', document.getElementById('myChartTS'));
|
|
var ctx = document.getElementById('myChartTS').getContext('2d');
|
|
|
|
var sLeg = document.getElementById('<%=hfLegend.ClientID %>').value;
|
|
var chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labelsTS,
|
|
|
|
datasets: [{
|
|
label: sLeg,
|
|
borderColor: 'rgb(7, 173, 236)',
|
|
lineTension: 0,
|
|
//steppedLine: false,
|
|
data: dataTS
|
|
}]
|
|
},
|
|
options: myOptions
|
|
});
|
|
}
|
|
// errore in reload!
|
|
function OnErrorCall_(repo) {
|
|
alert("Errore recupero dati grafico!");
|
|
}
|
|
// effettuo plotting grafico TimeSerie!
|
|
function plotTS() {
|
|
var hfSL = document.getElementById('<%=hfShowLast.ClientID %>');
|
|
if (hfSL != null) {
|
|
var lastNum = document.getElementById('<%=hfShowLast.ClientID %>').value ?? "";
|
|
var plotType = document.getElementById('<%=hfPlotType.ClientID %>').value ?? "";
|
|
//console.log("../api/BatchStats/"+lastNum+"?PlotType="+plotType);
|
|
// caricamento pagina
|
|
$.ajax({
|
|
type: "GET",
|
|
url: "../api/BatchStats/" + lastNum + "?PlotType=" + plotType,
|
|
contentType: "application/json; charset=utf-8",
|
|
dataType: "json",
|
|
success: OnSuccess_,
|
|
error: OnErrorCall_
|
|
});
|
|
}
|
|
}
|
|
|
|
// funzione di drawing ad OGNI pageload!
|
|
function pageLoad() {
|
|
try {
|
|
console.log('pageLoad BatchStats! | ID: <%= this.ID %> ');
|
|
plotTS();
|
|
}
|
|
catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
</script>
|