Displaying dynamic data using jQuery chart -
here assignment:
create page displays values using jquery chart, can switch between day-wise view , month-wise view using ajax
x-axis: days/ months
y-axis: a,b,c,d
i've got variable values ready , drop down list change variables. don't know how feed these values jquery chart. i'm using jqxchart.
how achieve this? please explain code. how feed date , month in jqxchart?
here 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 category</option> <option>average score 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 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 simple.i take whole table in json format
everything works fine except when values passed chart,the chart printed without data.the values sent chart correct though.
for average score categories option,no data displayed in chart. data sent correct again.
i guess problem in json structure sending chart. debug, hard-code below data before line var setting = { , execute it. if works, change data json format. fix 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}]
Comments
Post a Comment