NKC/NKC_WF/WebUserControls/cmp_DailyStatsPlot.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="cmp_DailyStatsPlot.ascx.cs" Inherits="NKC_WF.WebUserControls.cmp_DailyStatsPlot" %>

<%--https://www.chartjs.org/--%>

<div class="row">
    <div class="col-12 px-2">
        <h4>Daily Stats Plot</h4>
    </div>
    <div class="col-12 px-2">
        <div id="divLoading" class="alert alert-primary text-center">
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
            </div>
        </div>
    </div>
    <div class="col-12 px-2">
        <asp:HiddenField runat="server" ID="hfPlaceCod" Value="*" />
        <asp:HiddenField runat="server" ID="hfPlotType" Value="" />
        <asp:HiddenField runat="server" ID="hfDateStart" Value="" />
        <asp:HiddenField runat="server" ID="hfDateEnd" 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', labels);

        var dataNE01 = dataTS.filter(record => record.label == "NE01");
        var dataNE02 = dataTS.filter(record => record.label == "NE02");
        var dataNE03 = dataTS.filter(record => record.label == "NE03");
        //console.log('dataNE01 data', dataNE01);
        //console.log('dataNE02 data', dataNE02);
        //console.log('dataNE03 data', dataNE03);

        var myOptions = {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                    },
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'day'
                    },
                }],
            },
            animation: {
                duration: 150
            },
        };

        // recupero obj chart
        //console.log('ctx ID: ', document.getElementById('myChartTS'));
        var ctx = document.getElementById('myChartTS').getContext('2d');
        //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: 'NE01: ' + sLeg,
                        borderColor: 'rgb(7, 173, 236)',
                        lineTension: 0,
                        //steppedLine: false,
                        data: dataNE01
                    },
                    {
                        label: 'NE02: ' + sLeg,
                        borderColor: 'rgb(7, 173, 26)',
                        lineTension: 0,
                        //steppedLine: false,
                        data: dataNE02
                    },
                    {
                        label: 'NE03: ' + sLeg,
                        borderColor: 'rgb(7, 203, 126)',
                        lineTension: 0,
                        //steppedLine: false,
                        data: dataNE03
                    }
                ]
            },
            options: myOptions
        });

        try {
            // nascondo panel loading
            var currDiv = document.getElementById('divLoading');
            currDiv.style.display = "none";
            console.log("style: " + currDiv.style.display);
        }
        catch (error) {
            console.log(error);
        }
    }
    // errore in reload!
    function OnErrorCall_(repo) {
        alert("Errore recupero dati grafico!");
    }
    // effettuo plotting grafico TimeSerie!
    function plotTS() {
        //console.log("Start plotTS");
        var placeCod = document.getElementById('<%=hfPlaceCod.ClientID %>').value;
        //console.log("placeCod: " + placeCod);
        var dtStart = document.getElementById('<%=hfDateStart.ClientID %>').value;
        //console.log("dtStart: " + dtStart);
        var dtEnd = document.getElementById('<%=hfDateEnd.ClientID %>').value;
        //console.log("dtEnd: " + dtEnd);
        var plotType = document.getElementById('<%=hfPlotType.ClientID %>').value;
        //console.log("plotType: " + plotType);
        //console.log("../api/DayStats/" + placeCod + "?StartDate=" + dtStart + "&EndDate=" + dtEnd + "&PlotType=" + plotType);
        // caricamento pagina
        $.ajax({
            type: "GET",
            url: "../api/DayStats/" + placeCod + "?StartDate=" + dtStart + "&EndDate=" + dtEnd + "&PlotType=" + plotType,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess_,
            error: OnErrorCall_
        });
    }

    // funzione di drawing ad OGNI pageload!
    function pageLoad() {
        //console.log('pageLoad DailyStats! | ID: <%= this.ID %>   ');
        try {
            try {
                // mostro panel loading
                var currDiv = document.getElementById('divLoading');
                currDiv.style.display = "block";
            }
            catch (error) {
                console.log(error);
            }

            // chiamo recupero dati + plot della TS
            plotTS();
        }
        catch (error) {
            console.log(error);
        }
    }
</script>