Страница возврата Ajax с обновленными значениями, но график не обновляется - PullRequest
0 голосов
/ 27 декабря 2018

Попытка реализовать динамическую диаграмму из данных в базе данных и невозможность перехода на другую библиотеку из-за ограничения по времени и большого количества кодов форматирования для вывода из-за того, что вход датчика находится в другом формате.

Сторона сервера:

    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"
                        }
                    ]
                }
            }
        });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...