jQWidgets Forums

jQuery UI Widgets › Forums › Chart › jqxchart freezes along with the webpage

Tagged: , , , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  Hristo 9 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    jqxchart freezes along with the webpage Posts
  • January 16, 2016 at 9:01 pm jqxchart freezes along with the webpage #80452

    rayern
    Participant

    I’m using dynamic data to populate the chart.The data to be fed to the chart is decided by the user in runtime through a drop down list in html.
    But the chart freezes and the webpage hangs when two particular options on the drop down list is selected.ie.When the category is set and isCategorySet is true.Here’s the code

    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title id="Description">jqxChart Column Series Example</title>
    <link rel="stylesheet" href="jqx.base.css" type="text/css">
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqxcore.js"></script>
    <script type="text/javascript" src="jqxchart.core.js"></script>
    <script type="text/javascript" src="jqxdraw.js"></script>
    <script type="text/javascript" src="jqxdata.js"></script>
    <script type="text/javascript">
        
$(document).ready(function () {
    var fbCat=new Array();
    var total=new Array();
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var baseUnit_xAxis;
    var maxValue_valueAxis;
    var seriesDataField;
    var maxAvgScore=0;
    var interval;
    
    
    
            
    $.getJSON("admin_php.php",function(data){ 
        $.each(data,function(i,item){
            fbCat[i]=item.fbCat;
        })
     
        $.unique(fbCat);
                                             
        $.each(fbCat,function(i,item){
            $('#fbCategory').append($('<option>', { 
                value: item,
                text : item
            }));
        });
        
        function dayMonthWise(wise,isCategorySet){
        $.each(data,function(i,item){
            if(wise=='day'){
                item.date=item.dateTime.substring(0,10);
                item.date=new Date(item.date);
            }
            else if(wise=='month'){
                item.date=item.dateTime.substring(0,7);
                item.date=new Date(item.date);
            }
        });
        
        function countValue(item,array){
            var count=0;
            $.each(array,function(i,v){
                if(v.date.toDateString()==item.toDateString()){
                    if(isCategorySet){
                        if(v.fbCat==$("#fbCategory").val())
                            count++;
                    }
                    else
                        count++;
                }
            })
            return count;
        }
            
        total_no_of_feedback_entries=data.length;
            
        $.each(data,function(i,x){
            $.each(data,function(j,y){
                if(x.date<y.date){
                    swap=data[i];
                    data[i]=data[j];
                    data[j]=swap;
                }
            })
        });
                                            
        $.each(data,function(i,item){ 
            item.total=countValue(item.date,data); 
        });
                                        
        for(i=0;i<data.length;i+=data[i].total){ 
            
            var score=0;
            var k=1;
            for(j=i;k<=data[i].total;j++,k++){
                if(isCategorySet){
                    if(data[j].fbCat==$("#fbCategory").val())
                        score+=Number(data[j].score);
                }
                else
                    score+=Number(data[j].score);     
            }
            
            avgScore=score/data[i].total;
            
            if(maxAvgScore<avgScore)
                maxAvgScore=avgScore;
            
            for(j=i,k=0;k<data[i].total;j++,k++){
                data[j].avgScore=avgScore;
            }
        }
                                             
        
        }
        $("#valueAxis,#dayMonthSelector").on("change",function(){
            if($("#valueAxis").prop('selectedIndex')<2)
                $("#fbCategory").slideDown();
            else
                $("#fbCategory").slideUp();  
                 
            switch($("#valueAxis").prop('selectedIndex')){
                case 0:
                    if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                        dayMonthWise('day',true);
                        baseUnit_xAxis='day'; 
                        interval=5;
                    }
                    else if($("#dayMonthSelector").prop('selectedIndex')==1){
                        dayMonthWise('month',true);
                        baseUnit_xAxis='month';
                        interval=1;
                    }
                break;
                            
                case 1:
                    if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                        dayMonthWise('day',true);
                        baseUnit_xAxis='day'; 
                        interval=5;
                    }
                    else if($("#dayMonthSelector").prop('selectedIndex')==1){
                        dayMonthWise('month',true);
                        baseUnit_xAxis='month';
                        interval=1;
                    }
                break;
                            
                case 2:
                    if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                        dayMonthWise('day',false);
                        baseUnit_xAxis='day';
                        interval=5;
                    }
                    else if($("#dayMonthSelector").prop('selectedIndex')==1){
                        dayMonthWise('month',false);
                        baseUnit_xAxis='month';
                        interval=1;
                    }
                    maxValue_valueAxis=total_no_of_feedback_entries;
                    seriesDataField='total';
                break;
                    
                case 3:
                    if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                        dayMonthWise('day',false);
                        baseUnit_xAxis='day';
                        interval=5;
                    }
                    else if($("#dayMonthSelector").prop('selectedIndex')==1){
                        dayMonthWise('month',false);
                        baseUnit_xAxis='month';
                        interval=1;
                    }
                    maxValue_valueAxis=maxAvgScore;
                    seriesDataField='avgScore';
                break;
            }
                    
            var settings = {
                title: "Feedback Analysis",
                description: "Details of feedback entries",
                padding: { left: 5, top: 5, right: 50, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: data,
                xAxis:{
                    dataField: 'date',
                    formatFunction: function (value) {
                        return value.getDate() + '-' +   months[value.getMonth()] + '-' + value.getFullYear();
                    },
                    type: 'date',
                    baseUnit: baseUnit_xAxis,
                    valuesOnTicks: true,
                    minValue: data[0].date,
                    maxValue: data[data.length-1].date,
                    tickMarks: {
                        visible: true,
                        interval: 1,
                        color: '#BCBCBC'
                    },
                    unitInterval: interval,
                    gridLines: {
                        visible: true,
                        interval: 3,
                        color: '#BCBCBC'
                    },
                    labels: {
                        angle: -45,
                        rotationPoint: 'topright',
                        offset: { x: 0, y: -25 }
                    }
                },
                valueAxis:{
                    minValue: 0,
                    maxValue: maxValue_valueAxis,
                    unitInterval: 1,
                    title: {text: $("#valueAxis").val()}
                },
                colorScheme: 'scheme01',
                seriesGroups:
                [{
                    type: 'line',
                    series: [{dataField: seriesDataField, displayText:$("#valueAxis").val()}]
                }]
            };
            
            $('#chartContainer').jqxChart(settings); 
            
        });  
    
    });
});
    </script>
    <style>
    #chartContainer,#valueAxis,#fbCategory{
        display: inline-block;
    }
    </style>
</head>
<body style="background:white;">
	<select id="valueAxis">
        <option>Total number of Feedback entries by Category</option>
        <option>Average Score by Category</option>
        <option>Total number of Feedback entries</option>
        <option>Average Score</option>
    </select>
    <select id="fbCategory"></select>
    <div id="chartContainer" style="width:800px; height: 400px"></div>
    <select id="dayMonthSelector">
        <option>Day-wise</option>
        <option>Month-wise</option>
    </select>
    
    </body></html>
    January 16, 2016 at 9:02 pm jqxchart freezes along with the webpage #80453

    rayern
    Participant

    Any help will do guys because I have to Submit this in 4 hours.

    January 18, 2016 at 8:54 am jqxchart freezes along with the webpage #80476

    Hristo
    Participant

    Hello rayern,

    In the above code isCategorySet is not set anywhere.
    We have demo with dynamic data in combination with DropDownList: http://jsfiddle.net/jqwidgets/P6q29/
    This article could be helpful: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

    January 19, 2016 at 3:10 pm jqxchart freezes along with the webpage #80524

    rayern
    Participant

    isCategorySet value is passed as an argument when the function “dayMonthWise(‘month’,false)” is called.Here false is the value of isCategorySet

    We have demo with dynamic data in combination with DropDownList: http://jsfiddle.net/jqwidgets/P6q29/ –> This is an example of the chart design changing.Not the DATA.

    January 20, 2016 at 8:37 am jqxchart freezes along with the webpage #80549

    Hristo
    Participant

    Hello rayern,

    Please take a look this example: http://jsfiddle.net/txhi/5kLhe7ty/2/

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.