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.
