Google charts disappear on refresh/F5 of a browser

Question

I have a Sharpeoint list which gets updated everyday. From that list I made dymanic Bar graph to display the data. Graph is working fine but I am encountring issue on Refresh or F5 of a browser. Once a user Refreshes the browser chart disappears. Don't know what is happening. Simple Ajax call is there which consumes the list web service and gets the data. Data is coming fine. But it's not rendering. I have put an alert to check what is happening so there are 2 cases after putting an alert.

1. Once page refreshes an alert pop up comes. I wait till the entire page to load and then click OK. Graph appears to be fine.

2. I again refresh, and once the alert pop up comes I immediately click OK. Graph does not appear.

I suspect that might be the issue with the ajax call that is getting the data.

Can someone help me how can I can make my google charts visible even after browser refresh?

Code :

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script><script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
  //  $(document).ready(function () {
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>List Name</listName> \
                        <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='List Column Name 1' /> \
                               <FieldRef Name='List Column Name 2' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";

        $.ajax({
            url: "_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
 //   });

    var strstatus = "", strtitle = "";

    function processResult(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function () {
            strtitle += $(this).attr("ows_List Column Name 1") + "#";
            strstatus += $(this).attr("ows_List Column Name 2") + "#";

        });
///Custom Logic Statrts

---
---
--- Working Fine No issues in this part so that's why omitted this.
---
---


///Custom Logic Ends


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

//Stacked bar Graph : Functional Area on Y axis vs Open/Close state on X axis.

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'funarea');
            data.addColumn('number', 'Open');
            data.addColumn('number', 'Closed');
            data.addRows(arrunique.length-1);
            for (var i = 0; i < arrunique.length-1; i++) {
                data.setValue(i, 0, arrunique[i]); /// Parameter for Y axis
                data.setValue(i, 1, parseInt(opencounter[i])); /// Parameter for X axis
                data.setValue(i, 2, parseInt(closecounter[i])); /// parameter for X axis
            }

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

            chart.draw(data,

{

    title: 'Total Count',
    width: 600,
    height: 350,
    is3D: false,
    isStacked: true,
    chartArea:{left:200,top:50,width:"50%",height:"75%"},
    hAxis: { title: "Status",titleTextStyle: {color: '#000033'},fontName: 'arial'},
    vAxis: { title: "Functional Area",titleTextStyle: {color: '#000033'}, textPosition: 'out', fontName: 'arial'},

}

);
     //  }
    }</script><div align="center" id="chart1_div">&#160;</div>

Also whatever lines are commented is fine. Code is working. Only problem is Refresh of a browser.

Answer 1

Do you see the same behavior in all SharePoint browsers (IE, FF, Safari)? My assumption is that it's a caching issue; when the browser renders on a refresh it is looking to cache so things load quicker or out of order. It's entirely possible that your google.setOnLoadCallback(drawChart); is firing before or asynchronously with your $(document).ready() on a cached load. Typically I wrap these in my own functions and call them manually, rather than relying on Google's setOnLoadCallback so I can specify and manage what order they fire in. That drawChart function shouldn't be called until the web service data has been returned and parsed... I don't see (unless it's in the part you omitted), where that takes place. It looks like it's just running in a linear fashion, but web services are processed asynchronously, so the way you have it doesn't guarantee there's data there when it tries to draw the chart.