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>Batch Stats Plot</h4>
    </div>
    <div class="col-12 px-2">
        <div id="divLoading" class="alert alert-primary text-center">
            <%--<i class="fa fa-5x fa-circle-o-notch fa-spin" aria-hidden="true"></i>--%>
            <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
        var ctx = document.getElementById('myChartTS').getContext('2d');

        var chart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: labelsTS,

                datasets: [
                    {
                        label: 'NE01: <%=hfLegend.Value %>',
                        borderColor: 'rgb(7, 173, 236)',
                        lineTension: 0,
                        //steppedLine: false,
                        data: dataNE01
                    },
                    {
                        label: 'NE02: <%=hfLegend.Value %>',
                        borderColor: 'rgb(7, 173, 26)',
                        lineTension: 0,
                        //steppedLine: false,
                        data: dataNE02
                    },
                    {
                        label: 'NE03: <%=hfLegend.Value %>',
                        borderColor: 'rgb(7, 203, 126)',
                        lineTension: 0,
                        //steppedLine: false,
                        data: dataNE03
                    }
                ]
            },
            options: myOptions
        });

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

    // funzione di drawing ad OGNI pageload!
    function pageLoad() {
        // mostro panel loading
        var currDiv = document.getElementById("divLoading");
        currDiv.style.display = "block";
        // chiamo recupero dati + plot della TS
        plotTS();
        //console.log('pageLoad!');
    }
</script>