SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
    
Sometimes it happens that the code does not reach upto chart.draw function.. Really don't know what to do. Appreciate if someone can really look into this. Thanks... – Almnac Jun 13 '12 at 11:05

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.

share|improve this answer
    
Hi webdes03.. Yes u r righ.. I am seeing this behaviour in al the browsers.. Also i have commented the document.ready() functon and google.setOnLoadCallback(drawChart); and doing the coding without it in a simple fashion. So is there no solution to the problem i am facing right now. If possible can you please help me in the code you would have written. It would be really helpful. Thanks again.. – Almnac Jun 14 '12 at 7:54
    
I don't think there's anything wrong with the script you have written... it just needs to be reordered. Drop the google.setOnLoadCallback(drawChart); and call drawChart() from within processResult(). That alone will ensure that the chart isn't drawn before the data is received/processed. I'd also say that whatever data analysis/logic you're doing should also be contained within processResult(). Web services run asynchronously, so you can't assume that by the time the script gets to drawChart() the data's ready. You have to structure your script to handle it. – webdes03 Jun 14 '12 at 13:33
    
Hi Webdes03. Thanks for your quick response. Well i am sorry but i didn't understand that. My bad.!! :( I have dropped google.setOnLoadCallback(drawchart) and also the drawchart() function and writing the script in serial manner.. Do you want me to put everything after var data = new google.visualization.DataTable(); to be put under processresult () function.. Right.. ?? It would be really helpful if u can help me in restructuring my code. M sorry but that would be really helpful. Thanks again for your kind help.. – Almnac Jun 15 '12 at 6:49
    
No replies since then... well i couldn't get to the final answer but just put a work around is to include a customized refresh button that do a post back again on user click and chart appears to be fine. but still looking for the answer if anyone can help me out.. Thanks a lot again :) – Almnac Jun 25 '12 at 11:24

This is an old question but if you are still wondering, webdes03's answer was right. I had the exact same problem and fixed it in a similar fashion. I will write the code here for your reference.

By the way, I usually use CAML to retrieve data and I use ExecuteOrDelayUntilScriptLoaded to make sure that that JSOM is only executed after sp.js is loaded. I load google api right at the beginning. See if this works for you.

$(document).ready(function () {
      //Do not execute jsom until sp.js file has loaded.
      ExecuteOrDelayUntilScriptLoaded(getData, "sp.js");
});
function getData() {
    google.load("visualization", "1", { packages: ["corechart"] });

    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\""

    //Use call backs or jQuery promise to call your data processing function    within getData() function. Otherwise there's no guarantee that getData function will return on time for processResult.
        processResult(xData, status);
}
function processResult(xData, status) {
      //Add your custom logic here.
      //Now call the drawchart function directly without a callback.
      drawChart()
}
function drawChart() {
      //drawChart function definition.
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.