Google chart displays data after i refresh the browser

Question

I have written a code to call data from a server and display data in the form of a chart using Google Charts. The problem I am facing is , the chart populates after i hit the refresh button but for the first time the chart structure is displayed but data is not visible.

I am using the following code UNITY //alert("here");

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

                    var optionsx = {packages: ['corechart'], callback : drawChart};
                    google.load('visualization', '1', optionsx);

            var queryObject="";
            var queryObjectLen="";

            var queryObject1="";
            var queryObjectLen1="";
            $.ajax({
               type : 'POST',
               url : 'chart.jsp',
               dataType:'json',


               //async : false

            success : function(data) {

                queryObject = eval('(' + JSON.stringify(data) + ')');
                queryObjectLen = queryObject.empdetails.length;
               // document.getElementById("demo").innerHTML = queryObject.empdetails[1].CI + " " + queryObject.empdetails[1].TR;


                //System.out.println(+queryObjectLen);
                console.log(+ queryObject); 
                console.log('lenth :' +queryObjectLen);
                alert('success')
            },
                error : function(xhr, type) {
                alert('server error occured')
            }
        }); 


            function drawChart() {

       var data = new google.visualization.DataTable();

            data.addColumn('string', 'CI');
            data.addColumn('number', 'Tickets Raised');
            for(var i=0;i<queryObjectLen;i++)
            {

                var name = queryObject.empdetails[i].CI;
                var NOR = queryObject.empdetails[i].TR;
                data.addRows([
                    [name,parseInt(NOR)]
                ]);
            }
            var options = {
                title: 'Number Of Unity Tickets in a week',
                'width' : 500,
                'height' : 300
            };

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

chart.draw(data,options);

    </script>
    </head>
    <body>
          <div id="chart_div" ></div>
           <div class = "center" id="chart_div1" ></div>
           <div class = "right" id="chart_div2" ></div>
          <p id="demo"></p>
     </body>
    </html>

bbeckford bbeckford · Accepted Answer · 2016-01-05T11:40:39

Are you including an external Google Charts javascript library for this?

If so that script has likely not loaded before you do your ajax request on the first load, subsequent refreshes will work as this script would already be cached.

To solve this you should load the Google Charts library with javascript first, and do your ajax call once it has loaded.

Seeing as it looks like you're already using jQuery, you could use jQuery.getScript():

$.getScript("http://www.google.com/path_to_the_charts_script.js", function(){
    //put your ajax call in here
});

Google chart displays data after i refresh the browser

1 Answers