gpw_testci/GPW_Commesse/WebUserControls/cmp_chart.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="cmp_chart.ascx.cs" Inherits="GPW_Commesse.WebUserControls.cmp_chart" %>
<%--https://www.chartjs.org/--%>

<script type="text/javascript">

    //Sys.Application.add_init(appl_init);

    //function appl_init() {
    //    var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
    //    pgRegMgr.add_endRequest(EndHandler);
    //}
    //function EndHandler() {
    //    redrawAll();
    //    console.log('EndHandler!');
    //}

    //var prm = Sys.WebForms.PageRequestManager.getInstance();
    //prm.add_pageLoaded(function () {
    //    redrawAll();
    //    console.log('add_pageLoaded!');
    //});
    //prm.add_endRequest(function () {
    //    redrawAll();
    //    console.log('add_endRequest!');
    //});

    // funzione eseguita se successo al caricamento
    function OnSuccess_(reponse) {

        // recupero dati restituiti
        var dataTS = reponse;
        //console.log('Recieved our data', dataTS);

        var myOptions = {
            scales: {
                yAxes: [{
                    //type: 'linear',
                    display: true,
                    ticks: {
                        maxTicksLimit: 10,
                    }
                }],
                xAxes: [{
                    type: 'time',
                    distribution: 'linear',
                }]
            }
            , animation: {
                duration: 100
            },
        };

        try {
            // recupero obj chart
            var ctx = document.getElementById('myChartTS').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'line',
                data: {
                    datasets: [{
                        borderColor: 'rgb(7, 173, 236)',
                        lineTension: 0,
                        steppedLine: true,
                        label: 'Temperatura Rilevata',
                        data: dataTS
                    }]
                },
                options: myOptions
            });

            //console.log('TS draw!');
        }
        catch
        { }
    }
    // errore in reload!
    function OnErrorCall_(repo) {
        alert("Errore recupero dati grafico!");
    }
    // funzione eseguita se successo al caricamento
    function HistOnSuccess_(reponse) {
        // recupero dati restituiti
        var dataHist = reponse;
        //console.log('Recieved our data', dataHist);

        // opzioni
        var myOptions = {
            scales: {
                yAxes: [{
                    //type: 'linear',
                    display: true,
                    ticks: {
                        beginAtZero: true,
                        maxTicksLimit: 10,
                    }
                }]
            },
            animation: {
                duration: 300
            },
        };

        // converto i valori etichette/freq
        var barVal = [], barLabels = [];
        dataHist.forEach(function (entry) {
            barVal.push(entry.y);
            barLabels.push(entry.x);
        });
        //console.log('labels: ', barLabels);
        //console.log('bars: ', barVal);

        // recupero obj chart
        try {
            var ctx = document.getElementById('myChartHist').getContext('2d');
            var chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: barLabels,
                    datasets: [{
                        label: 'Freq. Osservate',
                        backgroundColor: 'rgb(7, 173, 236)',
                        data: barVal
                    }]
                },
                options: myOptions
            });

            //console.log('Hist draw!');
        }
        catch
        { }
    }
    // errore in reload!
    function HistOnErrorCall_(repo) {
        alert("Errore recupero dati grafico HIST!");
    }
    // effettuo plotting grafico TimeSerie!
    function plotTS(idxDip, dataReq, numReq) {
        // caricamento pagina
        $.ajax({
            type: "GET",
            url: "api/TempRil/" + idxDip + "?date=" + dataReq + "&numRec=" + numReq,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess_,
            error: OnErrorCall_
        });
    }
    // effettuo plotting grafico Hist!
    function plotHist(idxDip, dataReq, numReq) {
        // caricamento pagina
        $.ajax({
            type: "GET",
            url: "api/TempHist/" + idxDip + "?date=" + dataReq + "&numRec=" + numReq,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: HistOnSuccess_,
            error: HistOnErrorCall_
        });
    }

<%--    function redrawAll() {
        var idxDip =<%=hfIdxDip.Value %>;
        var dataReq ="<%=hfData.Value %>";
        var numReq = <%=ddlMaxNum.SelectedValue%>;
        plotTS(idxDip, dataReq, numReq);
        plotHist(idxDip, dataReq, numReq);
        //console.log('R idxDip: ' + idxDip);
        //console.log('R dataReq: ' + dataReq);
        //console.log('R numReq: ' + numReq);
    }--%>

    function forceRedrawAll(numReq) {
        var idxDip =<%=hfIdxDip.Value %>;
        var dataReq ="<%=hfData.Value %>";
        plotTS(idxDip, dataReq, numReq);
        plotHist(idxDip, dataReq, numReq);
        //console.log('FR idxDip: ' + idxDip);
        //console.log('FR dataReq: ' + dataReq);
        //console.log('FR numReq: ' + numReq);
    }
</script>

<asp:HiddenField runat="server" ID="hfIdxDip" />
<asp:HiddenField runat="server" ID="hfData" />
<div class="row">
    <div class="col-6 text-right">
        Periodo
    </div>
    <div class="col-6">
        <asp:DropDownList runat="server" ID="ddlMaxNum" AutoPostBack="true" OnSelectedIndexChanged="ddlMaxNum_SelectedIndexChanged">
            <asp:ListItem Text="1 mese" Value="30"></asp:ListItem>
            <asp:ListItem Text="2 mesi" Value="60"></asp:ListItem>
            <asp:ListItem Text="3 mesi" Value="90"></asp:ListItem>
            <asp:ListItem Text="6 mesi" Value="180"></asp:ListItem>
            <asp:ListItem Text="1 anno" Value="366"></asp:ListItem>
            <asp:ListItem Text="Tutto" Value="0"></asp:ListItem>
        </asp:DropDownList>
    </div>
</div>
<div class="row" runat="server" id="divGraphs">
    <div class="col-12 col-md-6">
        <canvas id="myChartTS" width="300" height="120"></canvas>
    </div>
    <div class="col-12 col-md-6">
        <canvas id="myChartHist" width="300" height="120"></canvas>
    </div>
</div>