Google charts disappear on refresh/F5 of a browser
<p>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.</p>

<ol>
<li><p>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.</p></li>
<li><p>I again refresh, and once the alert pop up comes I immediately click OK. Graph does not appear.</p></li>
</ol>

<p>I suspect that might be the issue with the ajax call that is getting the data.</p>

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

<p>Code : </p>

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

        $.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 &lt; 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'},

}

);
     //  }
    }&lt;/script&gt;&lt;div align="center" id="chart1_div"&gt;&amp;#160;&lt;/div&gt;
</code></pre>

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