Displaying dynamic data using jQuery chart

Question

Here is my assignment:

Create a page that displays the values using a jquery chart, which can switch between day-wise view and month-wise view using AJAX

x-axis: days/ months

y-axis: a,b,c,d

I've got all the variable values ready and the drop down list to change the variables. I just don't know how I feed these values to the jquery chart. I'm using jqxchart.

How do I achieve this? Please explain with code. Also how do I feed date and month in the jqxchart?

Here is the html code :

    <div id="chartContainer" style="width:800px; height: 400px"></div>
        
        <div id="valueAxisDiv" class="form-group">
            <h3>Value Axis : </h3>
            <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>

        <div id="xAxisDiv" class="form-group">
            <h3>X-Axis : </h1>
                <select id="dayMonthSelector">
                    <option>Day-wise</option>
                    <option>Month-wise</option>
                </select>
        </div>

And the js code :

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){
    
    total_no_of_feedback_entries=data.length;
    
    $.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(dataobj,wise,isCategorySet){
           
    $.each(dataobj,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())
                    count++;
        })
        return count;
    }
        
    $.each(dataobj,function(i,x){
        $.each(dataobj,function(j,y){
            if(x.date<y.date){
                swap=dataobj[i];
                dataobj[i]=dataobj[j];
                dataobj[j]=swap;
            }
        })
    });
    
    console.log("Total : ")                                  
    $.each(dataobj,function(i,item){ 
        item.total=countValue(item.date,dataobj); 
        console.log(item.total);
    });
                                    
    for(i=0;i<dataobj.length;i+=dataobj[i].total){ 
        
        var score=0;
        var k=1;
        for(j=i;k<=dataobj[i].total;j++,k++){
            if(isCategorySet){
                if(dataobj[j].fbCat==$("#fbCategory").val())
                    score+=Number(dataobj[j].score);
            }
            else
                score+=Number(dataobj[j].score);     
        }
        
        avgScore=score/dataobj[i].total;
        
        if(maxAvgScore<avgScore)
            maxAvgScore=avgScore;
        console.log("Avg Score : ")
        for(j=i,k=0;k<dataobj[i].total;j++,k++){
            dataobj[j].avgScore=avgScore;
            console.log(avgScore);
        }
    }   
}
            $("#valueAxis,#dayMonthSelector,#fbCategory").on("change",function(){
        if($("#valueAxis").prop('selectedIndex')<2)
            $("#fbCategory").slideDown();
        else
            $("#fbCategory").slideUp();  
        
        var temp=new Array();
        for(i=0,j=0;i<data.length;i++){
            if(data[i].fbCat==$("#fbCategory").val()){
                if(temp[j]===undefined)
                    temp[j]=[];
                temp[j++]=data[i];  
            }
        }
        
        switch($("#valueAxis").prop('selectedIndex')){
            case 0:
                if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                    dayMonthWise(temp,'day',true);
                    baseUnit_xAxis='day'; 
                    interval=5;
                }
                else   if($("#dayMonthSelector").prop('selectedIndex')==1){
                    dayMonthWise(temp,'month',true);
                    baseUnit_xAxis='month';
                    interval=1;
                }
                maxValue_valueAxis=total_no_of_feedback_entries;
                seriesDataField='total';
            break;
                        
            case 1:
                if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                    dayMonthWise(temp,'day',true);
                    baseUnit_xAxis='day'; 
                    interval=5;
                }
                else if($("#dayMonthSelector").prop('selectedIndex')==1){
                    dayMonthWise(temp,'month',true);
                    baseUnit_xAxis='month';
                    interval=1;
                }
                maxValue_valueAxis=maxAvgScore;
                seriesDataField='avgScore';
            break;
                        
            case 2:
                if($("#dayMonthSelector").prop('selectedIndex')==0)                     {
                    dayMonthWise(data,'day',false);
                    baseUnit_xAxis='day';
                    interval=5;
                }
                else if($("#dayMonthSelector").prop('selectedIndex')==1){
                    dayMonthWise(data,'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(data,'day',false);
                    baseUnit_xAxis='day';
                    interval=5;
                }
                else if($("#dayMonthSelector").prop('selectedIndex')==1){
                    dayMonthWise(data,'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); 
        
    });  

});

The php code is simple.I just take the whole table in json format

Everything works fine except when some values are passed to the chart,the chart is printed but without any data.The values sent to the chart are correct though.

For average score by categories option,no data is displayed in the chart. The data sent is correct again.

Please post some code you use to trigger chart and the js variables you get. That will ease the understanding — Thanga
– Thanga, Commented Jan 18, 2016 at 6:36
ok i have reached somewhere but the chart is not displayed for certain data supplied.Can you help pls? — user1881473
– user1881473, Commented Jan 18, 2016 at 7:25
Have you examined the data coming back from the PHP script in your browser's network tools? Make sure this is correct. Then do some alert() debugging in the AJAX handler function. What sets of data are failing? Are you getting all the values you should in these circumstances? Is it the AJAX data or the JavaScript that is at fault? — halfer
– halfer, Commented Jan 18, 2016 at 8:27
THE DATA FROM PHP IS GOOD AND SO ALSO THE DATA BEING FED TO THE CHART. Its just the chart at fault — user1881473
– user1881473, Commented Jan 18, 2016 at 12:22

Thanga · Accepted Answer · 2016-01-18 07:50:12Z

1

I guess the problem is in the JSON structure you are sending to the chart. To debug, Just hard-code the below data before the line var setting = { and execute it. If this works, Change your data json to this format. That will fix the issue

var data = [{ x: 0.35, y: 14.5 }, { x: 1, y: 2.5 }, { x: 10, y: 0.2 }, { x: 100, y: 205 }, { x: 1, y: 100 }, { x: 5.11, y: 10.13 }, { x: 20.13, y: 10.13 }, { x: 600, y: 300}]

answered Jan 18, 2016 at 7:50

Thanga

8,2103 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1881473 Over a year ago

the data json variable is in that format.It is an array of objects and the object variables or properties are the column names.it is the same format as that /\

Collectives™ on Stack Overflow

Displaying dynamic data using jQuery chart

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related