GWT Highcharts / Discussion / General Discussion: Random Render Issues

trying to dynamically call struts action that in turn calls a web-service to fetch data from database .

problem:

randomly the charts are not being rendered nor the action calls are made

i am uploading the jsp where the action selection and rendering of charts is done ,if any one has the same issues or any 1 has the solution ,i will appreciate comments

++++++++++++++++++++++++++++++++++++++++++++

<%@taglib uri="/struts-tags" prefix="s"%> <%@taglib uri="/struts-jquery-tags" prefix="sj"%> <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>

    <title>Highcharts Example</title>
    <script type="text/javascript" src="/js/EdsaasBirtFunctions.js"></script>
    <script type="text/javascript">

    $(window).load(function() {

        barChartForFeeCollection();
    });

    $('#studentLable').load('loadViewFeeDetailsList.action', function() {
    });

    $('#studentbranchLable').load('loadViewFeeDetailsBranchWiseList.action', function() {
    });

    function getData(url) {
      var callingback = url;
      var datagetting = "No data";
      var final = "Get Data";
            $.ajaxSetup( { "async": false } );
              $.get(url, function(data) {
                datagetting = data;
                final = data;
                while(data.length-datagetting.length>0);
              })  
        if(datagetting.length == final.length){
            return datagetting;
        }else{
            alert("callback");
            getData(callingback);
        }

    }

function barChartForFeeCollection(){
var s=document.getElementById("studentLable")
s.style.display = "none";
var s1=document.getElementById("pie_chart_div")
s1.style.display = "block";
var s2=document.getElementById("studentbranchLable")
s2.style.display = "none";
var url;
var options ;
var chart;
var load = 'false';
var str = document.getElementById("branchId").value;
if(str == '0'){
url='xmlFromServiceForBarFeeChartAllBranchWise';
}
else{
url='xmlFromServiceForBarFeeChartSelectedBranchWise';
}

        options = {
                chart: {
            renderTo: 'container23',
            defaultSeriesType: 'column',
            events: {
                                                             load: function(event) {
                                                                    load = 'true';
                                                                     }
                                                                 }    
            },
        title: {
        text: ''
        },
        credits: {
         enabled: false
        },
        legend: {
         floating: false,
        },
        xAxis: {
                    categories: []
            },
                                                                legend: {
                                                                layout: 'vertical',
                                                                align: 'bottom',
                                                                verticalAlign: 'bottom',
                                                                x: -3,
                                                                y: 4,
                                                                borderWidth: 0
                                                            },
                                                                plotOptions: {
                                                                    column: {
                                                                        pointPadding: 0.2,
                                                                        borderWidth: 0
                                                                    }
    },
    tooltip: {
        formatter: function() {
        return ''+
        this.x +': '+ indianCurrency(this.y) +'';
        }
        },
        yAxis: {
        min: 0,
    title: {
                                                text: 'Amount '
        }
        },
            series: []
    };
    var $xml = getData(url);
    $.ajaxSetup( { "async": true } );
        //alert($xml);
        $xml = $($xml);
        $xml.find('categories item').each(function(i, category) {

                                    options.xAxis.categories.push($(category).text());

            });

                                $xml.find('series').each(function(i, series) {
        var seriesOptions = {

                                        name: $(series).find('name').text(),
                                        events: {
                                        legendItemClick: function(event) {
                                        return false;
                                                }
                                        },
                                        data: []

                };
                                $(series).find('data point').each(function(i, point) {

                                        seriesOptions.data.push(

                                            parseInt($(point).text())

                                        );
            });
                                    options.series.push(seriesOptions);

                });

            chart = new Highcharts.Chart(options); 
    }

function pieChartForFeeCollection(){
var s=document.getElementById("studentLable")
s.style.display = "none";
var s1=document.getElementById("pie_chart_div")
s1.style.display = "block";
var s2=document.getElementById("studentbranchLable")
s2.style.display = "none";
var url;
var str = document.getElementById("branchId").value;
if(str == '0'){
url='xmlFromServiceForPieFeeChartAllBranch';
}
else{
url='xmlFromServiceForPieChartSelectedBranchWise'
}

      var options = {
           chart: {
              renderTo: 'container23',
              type: 'pie',
              height:200,
              width:320,
              wrap:'hard', 
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false

           },

           title: {
              text: ''
           },
           plotOptions: {

                pie: {

                    allowPointSelect: true,
                    cursor: 'pointer',

                    dataLabels: {
                enabled: true,
                    style: {                                               
                    wrap:'soft'                                
                        },
                formatter: function() {
                    //return  this.point.name ;
                    var words = this.point.name.split(/[\s]+/);
                    var numWordsPerLine=2;
                    var str = [];
                    for (var word in words) {
                        if (word > 0 && word % numWordsPerLine == 0)
                            str.push('<br>');
                        str.push(words[word]);
                    }
                    return str.join(' ');

                },

            },

point: {
events: {
    legendItemClick: function () {
        return false; // <== returning false will cancel the default action
    }
}

                    showInLegend: true
                    }

            },
           credits: {
                     enabled: false
            },
          tooltip: {

                formatter: function() {
                    return '<b>'+ this.point.name +'</b>: '+ indianCurrency(this.y) +'';

                },
            },
          legend: {
                layout: 'vertical',
                align: 'bottom',
                verticalAlign: 'bottom',
                x: -3,
                y: 4,
                borderWidth: 0
            },
           series: [{data: []}]
        };

                if (window.XMLHttpRequest)
                     {// code for IE7+, Firefox, Chrome, Opera, Safari
                     xmlhttp=new XMLHttpRequest();
                  }
                else
                     {// code for IE6, IE5
                     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                      }
                    xmlhttp.open("GET",url,false);
                    xmlhttp.send();
                    parser=new DOMParser()
                    xmlDoc = parser.parseFromString(xmlhttp.responseText,"text/xml");

                    //xmlDoc=xmlhttp.responseXML;

     var x=xmlDoc.getElementsByTagName("branchData");
     var seriesData = {
        name : 'hai',
        data : [],
            dataLabels: {
                        color: 'black',
                        distance:3}
     };

     for (i=0;i<x.length;i++)
     { 
        var seriesName =x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
        seriesName.toString();
        var seriesDataXML =x[i].getElementsByTagName("data")[0].childNodes[0].nodeValue;
        seriesData.data.push([seriesName,parseInt(seriesDataXML)]);
     }

     options.series.push(seriesData);
     var chart = new Highcharts.Chart(options);

}

    </script>

    <s:hidden name="branchId" id="branchId" value="%{#session.branchId}"></s:hidden>
    <div  id="pie_chart_div" style="word-wrap:breakword;">

                <table border="1">
                <tr>
                <td><div id="container23"  style="  width: 270px; height: 240px; margin: 0px 4px 0 0 left; word-wrap:breakword; "></td>
                </tr>
                </table>

</div>
<div style="display: none" id='studentLable'>
</div>
<div style="display: none" id='studentbranchLable'>
</div>
<table border="1" align="right">
                <td><img src="images/default/db_bar.png"  width="20" height="20"  onclick="return barChartForFeeCollection()" /></td>
                <td>&nbsp &nbsp</td>
                <td><img src="images/default/db_pie.png"  width="17" height="17"  onclick="return pieChartForFeeCollection()" /></td>
                <td>&nbsp &nbsp</td>
                <td><img src="images/default/db_grid.png"  width="17" height="17"  onclick="return table()" /></td>
                </tr>
</table>

Random Render Issues

Forums

Help

Random Render Issues

Random Render Issues

Forums

Help

Random Render Issues document.SUBSCRIPTION_OPTIONS = { "thing": "topic", "subscribed": false, "url": "subscribe", "icon": { "css": "fa fa-envelope-o" } };

Random Render Issues