Попытка реализовать динамическую диаграмму из данных в базе данных и невозможность перехода на другую библиотеку из-за ограничения по времени и большого количества кодов форматирования для вывода из-за того, что вход датчика находится в другом формате.
Сторона сервера:
public List<String> sensorNameList = new List<String>();
public List<Sensor> r1Low = new List<Sensor>();
public List<Sensor> r1Med = new List<Sensor>();
public List<Sensor> r1High = new List<Sensor>();
public List<Sensor> r2Low = new List<Sensor>();
public List<Sensor> r2Med = new List<Sensor>();
public List<Sensor> r2High = new List<Sensor>();
public List<Sensor> roomTemp = new List<Sensor>();
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public object RefreshData()
{
// query the data...
// return as an anonymous object, which ASP.NET converts to JSON
getDb();
Debug.WriteLine("Refresh : "+ JsonConvert.SerializeObject(new { r1Low, r1Med, r1High, r2Low, r2Med, r2High, roomTemp }));
return JsonConvert.SerializeObject(new { r1Low, r1Med, r1High, r2Low, r2Med, r2High, roomTemp });
}
Сторона клиента:
<% var serializer = new System.Web.Script.Serialization.JavaScriptSerializer(); %>
var roomList = <%= serializer.Serialize(roomTemp)%>;
var r1LowList = <%= serializer.Serialize(r1Low)%>;
var r1MedList = <%= serializer.Serialize(r1Med)%>;
var r1HighList = <%= serializer.Serialize(r1High)%>;
var r2LowList = <%= serializer.Serialize(r2Low)%>;
var r2MedList = <%= serializer.Serialize(r2Med)%>;
var r2HighList = <%= serializer.Serialize(r2High)%>;
RetrieveData();
setInterval(function() {
$.ajax({
url: "/Reading/getDB",
method: "POST", // post is safer, but could also be GET
async: "true",
cache: "false",
//contentType: 'application/json',
data: {},
success: function(data) {
console.log(data);
console.log("D: "+data.d);
RetrieveData(data.d);
},
error: function (xhr, status, error) {
alert(error);
}
});
}, 1000)
RetrieveData () использует массивы room, r1lowlist и т. Д. Для создания графа C3.JS.
ФрагментRetrieveData ()
function RetrieveData(data) {
// setInterval(function() {
// SerializeData();
// console.log(data);
var i;
var roomArray = [];
var room = [];
var roomDateArray = ['Date'];
var roomDate = [];
var r1LowArray = [];
var r1Low = [];
var r1LowDateArray = ['Date'];
var r1LowDate = [];
var r1MedArray = [];
var r1Med = [];
var r1MedDateArray = ['Date'];
var r1MedDate = [];
var r1HighArray = [];
var r1High = [];
var r1HighDateArray = ['Date'];
var r1HighDate = [];
var r2LowArray = [];
var r2Low = [];
var r2LowDateArray = ['Date'];
var r2LowDate = [];
var r2MedArray = [];
var r2Med = [];
var r2MedDateArray = ['Date'];
var r2MedDate = [];
var r2HighArray = [];
var r2High = [];
var r2HighDateArray = ['Date'];
var r2HighDate = [];
//room-temp graph
roomArray.push(roomList[0].sensorName);
// roomDateArray.push(roomList[0].sensorName);
for (i = 0; i < roomList[0].sensorData.length; i++) {
roomArray.push(roomList[0].sensorData[i]);
roomDateArray.push(roomList[0].sensorDate[i]);
}
//console.log('Room Temp Array: ', roomDateArray);
room.push(roomArray);
roomDate.push(roomDateArray);
//console.log('Room: ', room);
//console.log('Typeof Room: ', typeof room);
//console.log('Room Date: ', roomDate);
//console.log('Typeof Room Date: ', typeof roomDate);
var roomMin = <%= rmMin %>;
var roomMax = <%= rmMax %>;
//console.log(roomDate + "\n" + room);
var roomTempGraph = c3.generate({
bindto: '#roomGraph',
data: {
// unload:true,
x: 'Date',
xFormat: '%Y-%m-%d %I:%M:%S %p',
columns: [
roomDate[0],
room[0]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%d-%m-%Y \n %I:%M:%S %p',
// rotate: -90
}
}
},
zoom: {
enabled: true
},
point: {
show: false
},
grid: {
y: {
lines: [{
value: roomMin,
text: "Min Threshold",
position: "middle"
},
{
value: roomMax,
text: "Max Threshold",
position: "middle"
}
]
}
}
});