Как перерисовать Google Chart с помощью Ajax

Question

У меня проблема на моем сайте. Когда он был загружен, они установили две даты: «Первый день горы» и «Последний день» в форме ввода, затем вызвали ajax JSON, чтобы показать график. Эта часть работает нормально, но я должен создать опциональный способ, пользователь даст мне еще две даты и получит другой график.

Вот что я сделал до сих пор ...

google.load («визуализация», «1», {packages: [«corechart»], «callback»: drawChart}); google.setOnLoadCallback (drawChart);

        var chart;

        $(document).ready(function(){
            //On button click, load new data
            $("#btnPesquisar").click(function() {

                var Dados = {};
                Dados.data1 = $('#Data1').val();
                Dados.data2 = $('#Data2').val();

                alert($('#Data1').val());

                $.ajax({
                    type: "POST",
                    url: "Report.aspx/GetChartData",
                    data: JSON.stringify(Dados),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        //alert("Funcionou");
                        data = google.visualization.arrayToDataTable(r.d);

                        console.log(data);

                        var view = new google.visualization.DataView(data);


                        view.setColumns([0, 1, 2, 3, 4, 5,  

                            {
                                calc: function (dt, row) {
                                    return 0;
                                },
                                label: "Total",
                                type: "number",
                            },
                            {
                                calc: function (dt, row) {
                                    return dt.getValue(row, 1) + dt.getValue(row, 2) + dt.getValue(row, 3) + dt.getValue(row, 4) + dt.getValue(row, 5);
                                },
                                type: "number",
                                role: "annotation"
                            }
                        ]);

                        var myHeight = 800;
                        var options = {
                            animation:{
                                duration: 1000,
                                easing: 'out',
                                startup: true
                            },
                            forceIFrame: 'false',
                            title: 'Registros',
                            backgroundColor: 'transparent',
                            height: myHeight,
                            legend: {
                                position: 'top',
                                maxLines: 3
                            },
                            bar: { groupWidth: '75%' },
                            isStacked: true,
                            series: {
                                6: {
                                    annotations: {
                                        stem: {
                                            color: "transparent",
                                            length: 28
                                        },
                                        textStyle: {
                                            color: "#000000",
                                        }
                                    },
                                    enableInteractivity: false,
                                    tooltip: "none",
                                    visibleInLegend: false
                                }
                            }
                        };                  

                        chart = new google.visualization.BarChart(document.getElementById('chart'));
                        chart.draw(view, options);

                    },
                    failure: function (r) {
                        alert(r.d);
                    },
                    error: function (r) {
                        alert(r.d);
                    }
                });

            });
        });


        function drawChart() {

            //alert("Entrou 2");

            if ($('#Data1').is(':empty')){

                var data = new Date();
                var mes = ("0" + (data.getMonth() + 1)).slice(-2);
                var ano = data.getFullYear();


                var data1 = "01/"+mes+"/"+ano;

                $('#Data1').val(data1);


            }


            if ($('#Data2').is(':empty'))
            {
                var lastDay = new Date(ano, mes, 0);
                var data2 = lastDay.getDate()+"/"+("0" + (lastDay.getMonth() + 1)).slice(-2)+"/"+lastDay.getFullYear()
                //alert(data2);
                $('#Data2').val(data2);
            }


            var Dados = {};
            Dados.data1 = $('#Data1').val();
            Dados.data2 = $('#Data2').val();

            $.ajax({
                type: "POST",
                url: "Report.aspx/GetChartData",
                data: JSON.stringify(Dados),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {
                    //alert("Funcionou");
                    data = google.visualization.arrayToDataTable(r.d);

                    console.log(data);

                    var view = new google.visualization.DataView(data);


                    view.setColumns([0, 1, 2, 3, 4, 5,  

                        {
                            calc: function (dt, row) {
                                return 0;
                            },
                            label: "Total",
                            type: "number",
                        },
                        {
                            calc: function (dt, row) {
                                return dt.getValue(row, 1) + dt.getValue(row, 2) + dt.getValue(row, 3) + dt.getValue(row, 4) + dt.getValue(row, 5);
                            },
                            type: "number",
                            role: "annotation"
                        }
                    ]);

                    var myHeight = 800;
                    var options = {
                        animation:{
                            duration: 1000,
                            easing: 'out',
                            startup: true
                        },
                        forceIFrame: 'false',
                        title: 'Registros',
                        backgroundColor: 'transparent',
                        height: myHeight,
                        legend: {
                            position: 'top',
                            maxLines: 3
                        },
                        bar: { groupWidth: '75%' },
                        isStacked: true,
                        series: {
                            6: {
                                annotations: {
                                    stem: {
                                        color: "transparent",
                                        length: 28
                                    },
                                    textStyle: {
                                        color: "#000000",
                                    }
                                },
                                enableInteractivity: false,
                                tooltip: "none",
                                visibleInLegend: false
                            }
                        }
                    };                  

                    chart = new google.visualization.BarChart(document.getElementById('chart'));
                    chart.draw(view, options);

                },
                failure: function (r) {
                    alert(r.d);
                },
                error: function (r) {
                    alert(r.d);
                }
            });
        }

Answer 1

Наконец я нашел проблему. Я использую веб-сайт aspx и помещаю кнопку в форму, чтобы каждый раз, когда я нажимал, весь сайт обновлялся, пропуская всю информацию. В конце концов это было решение, которое я основал.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Report.aspx.cs" Inherits="Report" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Report by Date</title>       
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    </head>
    <body >
        <div id="header"></div>
        <div class="container" style="margin-top: 10px;">
            <div class="row text-center">
                <div class="col-sm-12 text-center">
                    <h3 class="text-center">Registros</h3>
                </div>
            </div>
            <div class="row" style="margin-top: 10px;">
                <div class="col-sm-3"></div>
                <div class="col-sm-9">
                    <form id="form1" runat="server">
                        <div>  
                            <table class="auto-style1">  
                                <tr>  
                                    <td><h5>First Date :</h5></td>  
                                    <td style="padding-left: 10px;">  
                                        <!-- <asp:TextBox ID="Data1" runat="server"></asp:TextBox> -->
                                        <input name="Data1" type="text" id="Data1">
                                    </td>  

                                </tr>  
                                <tr>  
                                    <td><h5>Last Date:</h5></td>  
                                    <td style="padding-left: 10px;"> 
                                        <!-- <asp:TextBox ID="Data2" runat="server"></asp:TextBox> -->
                                        <input name="Data2" type="text" id="Data2">
                                    </td>  
                                </tr>     
                            </table>  
                        </div>
                    </form>
                </div>

            </div>
            <div class="row">
                <div class="col-sm-3"></div>
                <div class="col-sm-9">
                    <input type="submit" name="btnPesquisar" value="Enviar" id="btnPesquisar">
                </div>
            </div>
            <div class="row">               
                <div class="col-sm-12">
                    <div id="chart" style="width: 1250px; height: 380px; "></div>
                </div>
            </div>
        </div>
        <script>


            var teste = false;

            google.load("visualization", "1", {packages:["corechart"], "callback": drawChart});
            google.setOnLoadCallback(drawChart);

            function drawChart() {

                //alert(teste);

                if ($('#Data1').is(':empty')){

                    var data = new Date();
                    var mes = ("0" + (data.getMonth() + 1)).slice(-2);
                    var ano = data.getFullYear();                   

                    var data1 = "01/"+mes+"/"+ano;

                    $('#Data1').val(data1);                 

                }               

                if ($('#Data2').is(':empty'))
                {
                    var lastDay = new Date(ano, mes, 0);
                    var data2 = lastDay.getDate()+"/"+("0" + (lastDay.getMonth() + 1)).slice(-2)+"/"+lastDay.getFullYear()
                    //alert(data2);
                    $('#Data2').val(data2);
                }               

                var Dados = {};
                Dados.data1 = $('#Data1').val();
                Dados.data2 = $('#Data2').val();

                $.ajax({
                    type: "POST",
                    url: "Report.aspx/GetChartData",
                    data: JSON.stringify(Dados),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    success: function (r) {
                        data = google.visualization.arrayToDataTable(r.d);

                        console.log(data);

                        var view = new google.visualization.DataView(data);


                        view.setColumns([0, 1, 2, 3, 4, 5,  

                            {
                                calc: function (dt, row) {
                                    return 0;
                                },
                                label: "Total",
                                type: "number",
                            },
                            {
                                calc: function (dt, row) {
                                    return dt.getValue(row, 1) + dt.getValue(row, 2) + dt.getValue(row, 3) + dt.getValue(row, 4) + dt.getValue(row, 5);
                                },
                                type: "number",
                                role: "annotation"
                            }
                        ]);

                        var myHeight = 800;
                        var options = {
                            animation:{
                                duration: 1000,
                                easing: 'out',
                                startup: true
                            },
                            forceIFrame: 'false',
                            title: 'Registros',
                            backgroundColor: 'transparent',
                            height: myHeight,
                            legend: {
                                position: 'top',
                                maxLines: 3
                            },
                            bar: { groupWidth: '75%' },
                            isStacked: true,
                            series: {
                                6: {
                                    annotations: {
                                        stem: {
                                            color: "transparent",
                                            length: 28
                                        },
                                        textStyle: {
                                            color: "#000000",
                                        }
                                    },
                                    enableInteractivity: false,
                                    tooltip: "none",
                                    visibleInLegend: false
                                }
                            }
                        };                  

                        chart = new google.visualization.BarChart(document.getElementById('chart'));
                        chart.draw(view, options);

                    },
                    failure: function (r) {
                        alert(r.d);
                    },
                    error: function (r) {
                        alert(r.d);
                    }
                });

                //teste = true;
            }




            //On button click, load new data
            $("#btnPesquisar").click(function() {



                var Dados = {};
                Dados.data1 = $('#Data1').val();
                Dados.data2 = $('#Data2').val();

                alert($('#Data1').val());

                $.ajax({
                    type: "POST",
                    url: "Report.aspx/GetChartData",
                    data: JSON.stringify(Dados),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    'async': true,
                    success: function (r) {
                        //alert("Funcionou");
                        data = google.visualization.arrayToDataTable(r.d);

                        console.log(data);

                        var view = new google.visualization.DataView(data);


                        view.setColumns([0, 1, 2, 3, 4, 5,  

                            {
                                calc: function (dt, row) {
                                    return 0;
                                },
                                label: "Total",
                                type: "number",
                            },
                            {
                                calc: function (dt, row) {
                                    return dt.getValue(row, 1) + dt.getValue(row, 2) + dt.getValue(row, 3) + dt.getValue(row, 4) + dt.getValue(row, 5);
                                },
                                type: "number",
                                role: "annotation"
                            }
                        ]);

                        var myHeight = 800;
                        var options = {
                            animation:{
                                duration: 1000,
                                easing: 'out',
                                startup: true
                            },
                            forceIFrame: 'false',
                            title: 'Registros',
                            backgroundColor: 'transparent',
                            height: myHeight,
                            legend: {
                                position: 'top',
                                maxLines: 3
                            },
                            bar: { groupWidth: '75%' },
                            isStacked: true,
                            series: {
                                6: {
                                    annotations: {
                                        stem: {
                                            color: "transparent",
                                            length: 28
                                        },
                                        textStyle: {
                                            color: "#000000",
                                        }
                                    },
                                    enableInteractivity: false,
                                    tooltip: "none",
                                    visibleInLegend: false
                                }
                            }
                        };                  

                        //chart = new google.visualization.BarChart(document.getElementById('chart'));
                        chart.draw(view, options);

                        alert(teste);

                    },
                    failure: function (r) {
                        alert(r.d);
                    },
                    error: function (r) {
                        alert(r.d);
                    }
                });

            });


        </script>

    </body>
</html>