0
Вот мое назначение:Отображение динамических данных с помощью JQuery диаграммы
Создать страницу, которая отображает значения с помощью Jquery диаграмму, которая может переключаться между дневным мудр зрения и месяц-накрест зрения с помощью AJAX
ось х: дни/месяцы
оси у: а, б, в, г
Я получил все значения переменных готов и выпадающий список, чтобы изменить переменные. Я просто не знаю, как я передаю эти значения в диаграмму jquery. Я использую jqxchart.
Как это достичь? Пожалуйста, объясните с помощью кода. Также, как я могу комбинировать дату и месяц в jqxchart?
Вот HTML код:
<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>
И код JS:
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);
});
});
Код РНР simple.I просто взять всю таблицу в формате JSON
все работает штраф, за исключением случаев, когда некоторые значения передаются на график, график печатается, но без каких-либо данных. Однако значения, отправленные на график, являются правильными.
Для оценки среднего показателя по категориям данные не отображаются на графике. Снова отправленные данные.
Пожалуйста, разместите код, который вы используете для запуска диаграммы и переменных js, которые вы получаете. Это облегчит понимание – Thanga
ОК, я достиг где-то, но диаграмма не отображается для определенных данных. Может, вы поможете PLS? – user1881473
thnks для ответа в btw. Вы очень помогли – user1881473