发表新帖
发表新帖

Google Charts API shows blank screen with $(document).ready method

前端 未结
关注
9 973
清酒与你
清酒与你 2021-02-05 03:36

I\'ve got several functions that instantiate various charts using Google Charts API.

When I call them without jQuery\'s $(document).ready method, everything

相关标签:
9条回答
  • 灰色年华
    2021-02-05 04:01

    For an alternate solution you can use 'autoloading' to include the packages you want in the script tag. This negates the need for "google.setOnLoadCallback".

    see https://developers.google.com/loader/#AutoLoading for details.

    So, you can do everything as you would normally from as jquery document ready event.

    There is also a wizard that can set up a URL for you, but currently the link is broken. Here it is anyway: http://code.google.com/apis/loader/autoloader-wizard.html

    0 讨论(0)
  • 梦谈多话
    2021-02-05 04:03 
                <!DOCTYPE html>
            <html>
            <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            <script type="text/javascript" src="https://www.google.com/jsapi"></script>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
            <script type="text/javascript">

            google.load("visualization", "1", {packages:["corechart"]});
            function drawChart(gtitle,glabel,gwidth,gheight,gtype,gstart,gend,gid) {

                $.ajax({
                        url: "http://localhost/reporte/response.php",
                                type: "GET",
                                dataType: "JSON",
                                cache: false,
                                async: false,
                                data: {start:gstart,end:gend,id:gid},
                                success: function(data) {
                                    var len = 0;
                                    if (data.length)
                                    {
                                    len = data.length;
                                    }

                                    if(len > 0)
                                    {
                                    dataarray = [[gtitle,glabel]];
                                        for (var i = 0; i< len; i++) {
                                            dataarray.push([data[i].label,data[i].value]);
                                        }
                                    }
                                    else if(len==0)
                                    {

                                    }
                                },
                                error:function(data) 
                                {


                                }
                        });

                    var values = new google.visualization.arrayToDataTable(dataarray);
                    var options = {title: gtitle,width:gwidth,height:gheight};

                            switch(gtype){
                                case 'PieChart':
                                    var chart = new google.visualization.PieChart(document.getElementById('chart'));
                                    break;
                                case 'LineChart':
                                    var chart = new google.visualization.LineChart(document.getElementById('chart'));
                                    break;
                                case 'ColumnChart':
                                    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
                                    break;
                                case 'AreaChart':
                                    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
                                    break;
                            }

                    chart.draw(values, options);


            }






            $(document).ready(function(){
            //drawChart('Titulo del Grafico','Tickets',800,800,'PieChart',20141001,20141010,'procedure1');
            //drawChart('Titulo del Grafico','Tickets',400,400,'ColumnChart',20141001,20141010,'procedure2');
            //drawChart('Titulo del Grafico','Tickets',400,400,'LineChart',20141001,20141010,'procedure3');
            drawChart('Titulo del Grafico','Tickets',600,400,'AreaChart',20141001,20141010,'procedure4');
            });

            </script>
            </head>
            <body>

            <div id="chart"></div>

            </body>
            </html>
    0 讨论(0)
  • 天涯浪人
    2021-02-05 04:05

    you hav to call https://www.google.com/jsapi instead of http://www.google.com/jsapi

    good luck

    0 讨论(0)
 看不清?
提交回复
热议问题