Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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

1 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.

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

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.