gpw_testci/GPW_Smart/WebUserControls/cmp_chart.ascx

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

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

<asp:HiddenField runat="server" ID="hfIdxDip" />
<asp:HiddenField runat="server" ID="hfData" />
<canvas id="myChartTS" width="300" height="120"></canvas>
<div class="row">
    <div class="col-6 text-right">Periodo</div>
    <div class="col-6">
        <asp:DropDownList runat="server" ID="ddlMaxNum" AutoPostBack="true">
            <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>
<canvas id="myChartHist" width="300" height="120"></canvas>

<script type="text/javascript">

    //var prm = Sys.WebForms.PageRequestManager.getInstance();
    //prm.add_pageLoaded(pageLoaded);

    //function pageLoaded(sender, args) {
    //    console.log('pageLoaded!');
    //    // chiamo recupero dati + plot della TS e dell'Histogram
    //    plotTS();
    //    plotHist();
    //}

    // 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
            },
        };

        // 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
        });

    }
    // 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
        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
        });

    }
    // errore in reload!
    function HistOnErrorCall_(repo) {
        alert("Errore recupero dati grafico HIST!");
    }
    // effettuo plotting grafico TimeSerie!
    function plotTS() {
        // caricamento pagina
        $.ajax({
            type: "GET",
            url: "api/TempRil/<%=hfIdxDip.Value %>?date=<%=hfData.Value%>&numRec=<%=ddlMaxNum.SelectedValue%>",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess_,
            error: OnErrorCall_
        });
    }
    // effettuo plotting grafico Hist!
    function plotHist() {
        // caricamento pagina
        $.ajax({
            type: "GET",
            url: "api/TempHist/<%=hfIdxDip.Value %>?date=<%=hfData.Value%>&numRec=<%=ddlMaxNum.SelectedValue%>",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: HistOnSuccess_,
            error: HistOnErrorCall_
        });
    }

    // funzione di drawing ad OGNI pageload!
    function pageLoad() {
        //console.log('pageLoad!');
        // chiamo recupero dati + plot della TS e dell'Histogram
        plotTS();
        plotHist();
    }

</script>