визуализация данных

ledmax · Сообщение **ledmax** » Сб апр 22, 2017 6:59 pm

Такой график прикрутил, библы берёт на стороне. Зато можно увеличивать и выбирать интервалы

Вложение screen.png больше недоступно

Alex · Сообщение **Alex** » Сб апр 22, 2017 7:07 pm

Красота!

serghei · Сообщение **serghei** » Сб апр 22, 2017 7:11 pm

Я библиотеку воткнул в АМС , а вот привязать данные - уже полгода спрашиваю, сам не знаю как прикрутить. SteelSeries без проблем устанавливается на карточку. А вот дальше.... Не поделитесь кодом??

ledmax · Сообщение **ledmax** » Сб апр 22, 2017 7:42 pm

Велкоме

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<meta http-equiv="Pragma" content="no-cache">

<!-- Styles -->
<style>
#chartdiv {
    width   : 100%;
    height  : 500px;
}                                                   
</style>

<!-- Resources -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />


<script>

//var csv is the CSV file with headers
function csvJSON(csv){
  var lines=csv.split("\n");
  var result = [];

  for(var i=0;i<lines.length;i++){
    var obj = [];
    if (lines[i] == '') continue;
    if (i == 0) continue;
    var currentline=lines[i].split(",");
    var val = [];
    for(var j=0;j<currentline.length;j++){
      if (j == 0) {
        var myDate = new Date(currentline[j]);
      } else {
        val.push(Number(currentline[j]));
      }
    }

    result.push({
        date: myDate,
        x1: val[0],
        x2: val[1],
        x3: val[2],
        x4: val[3],
        x5: val[4],
        x6: val[5]
    });
  }
  
  return result; //JavaScript object
}


function zoomChart(){
    chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1);
}



jQuery.get('gotdata.css', function(data) {
    data = csvJSON(data);
    console.log(data);

    chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "none",
        "legend": {
            "useGraphSettings": true
        },
        "dataProvider": data,
        "synchronizeGrid":true,
        "valueAxes": [{
            "id":"v1",
            "axisColor": "#FF6600",
            "axisThickness": 2,
            "axisAlpha": 1,
            "position": "left"
        }, {
            "id":"v2",
            "axisColor": "#FCD202",
            "axisThickness": 2,
            "axisAlpha": 1,
            "position": "right"
        }, {
            "id":"v3",
            "axisColor": "#B0DE09",
            "axisThickness": 2,
            "gridAlpha": 0,
            "offset": 50,
            "axisAlpha": 1,
            "position": "left"
        }],
        "graphs": [{
            "valueAxis": "v1",
            "type": "smoothedLine",
            "lineColor": "#FF6600",
            "lineThickness": 2,
            "title": "Т На Улице",
            "valueField": "x1",
            "fillAlphas": 0
        }, {
            "valueAxis": "v1",
            "lineColor": "#FCD202",
            "type": "smoothedLine",
            "lineThickness": 2,
            "title": "Т До Испарителя",
            "valueField": "x2",
            "fillAlphas": 0
        }, {
            "valueAxis": "v1",
            "lineColor": "#B0DE09",
            "type": "smoothedLine",
            "lineThickness": 2,
            "title": "T После Испарителя",
            "valueField": "x3",
            "fillAlphas": 0
        }, {
            "valueAxis": "v1",
            "type": "smoothedLine",
            "lineThickness": 2,
            "title": "Т До Конденцатора",
            "valueField": "x4",
            "fillAlphas": 0
        }, {
            "valueAxis": "v1",
            "type": "smoothedLine",
            "lineThickness": 2,
            "title": "Т После Конденцатора",
            "valueField": "x5",
            "fillAlphas": 0
        }, {
            "valueAxis": "v1",
            "type": "smoothedLine",
            "lineThickness": 2,
            "title": "% Открытия ЭРВ",
            "valueField": "x6",
            "fillAlphas": 0
        }],
        "chartScrollbar": {},
        "chartCursor": {
            "cursorPosition": "mouse"
        },
        "categoryField": "date",
        "categoryAxis": {
            "parseDates": true,
            "axisColor": "#DADADA",
            "minPeriod": "ss"
        },
        "export": {
            "enabled": true,
            "position": "bottom-right"
         }
    });

    chart.addListener("dataUpdated", zoomChart);
    zoomChart();


});




  </script>

</head>
<body>


<!-- HTML -->
<div id="chartdiv"></div>

</body>
</html>

*** Сообщение запрещено. Сообщение похоже на спам. ***

ledmax · Сообщение **ledmax** » Сб апр 22, 2017 7:43 pm

serghei писал(а):Я библиотеку воткнул в АМС , а вот привязать данные - уже полгода спрашиваю, сам не знаю как прикрутить. SteelSeries без проблем устанавливается на карточку. А вот дальше.... Не поделитесь кодом??

Велкоме

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<meta http-equiv="Pragma" content="no-cache">

<!-- Styles -->
<style>
#chartdiv {
    width   : 100%;
    height  : 500px;
}                                                   
</style>

<!-- Resources -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />


<script>

//var csv is the CSV file with headers
function csvJSON(csv){
  var lines=csv.split("\n");
  var result = [];

  for(var i=0;i<lines.length;i++){
    var obj = [];
    if (lines[i] == '') continue;
    if (i == 0) continue;
    var currentline=lines[i].split(",");
    var val = [];
    for(var j=0;j<currentline.length;j++){
      if (j == 0) {
        var myDate = new Date(currentline[j]);
      } else {
        val.push(Number(currentline[j]));
      }
    }

    result.push({
        date: myDate,
        x1: val[0],
        x2: val[1],
        x3: val[2],
        x4: val[3],
        x5: val[4],
        x6: val[5]
    });
  }
  
  return result; //JavaScript object
}


function zoomChart(){
    chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1);
}



jQuery.get('gotdata.css', function(data) {
    data = csvJSON(data);
    console.log(data);

    chart = AmCharts.makeChart("chartdiv", {
        "type": "serial",
        "theme": "none",
        "legend": {
            "useGraphSettings": true
        },
        "dataProvider": data,
        "synchronizeGrid":true,
        "valueAxes": [{
            "id":"v1",
            "axisColor": "#FF6600",
            "axisThickness": 2,
            "axisAlpha": 1,
            "position": "left"
        }, {
            "id":"v2",
            "axisColor": "#FCD202",
            "axisThickness": 2,
            "axisAlpha": 1,
            "position": "right"
        }, {
            "id":"v3",
            "axisColor": "#B0DE09",
            "axisThickness": 2,
            "gridAlpha": 0,
            "offset": 50,
            "axisAlpha": 1,
            "position": "left"
        }],
        "graphs": [{
            "valueAxis": "v1",
            "type": "smoothedLine",
            "lineColor": "#FF6600",
            "lineThickness": 2,
            "title": "Т На Улице",
            "valueField": "x1",
            "fillAlphas": 0
        }, {
            "valueAxis": "v1",
            "lineColor": "#FCD202",
            "type": "smoothedLine",
            "lineThickness": 2,
            "title": "Т До Испарителя",
            "valueField": "x2",
            "fillAlphas": 0
        }, {
            "valueAxis": "v1",
            "lineColor": "#B0DE09",
            "type": "smoothedLine",
            "lineThickness": 2,
            "title": "T После Испарителя",
            "valueField": "x3",
            "fillAlphas": 0
        }, {
            "valueAxis": "v1",
            "type": "smoothedLine",
            "lineThickness": 2,
            "title": "Т До Конденцатора",
            "valueField": "x4",
            "fillAlphas": 0
        }, {
            "valueAxis": "v1",
            "type": "smoothedLine",
            "lineThickness": 2,
            "title": "Т После Конденцатора",
            "valueField": "x5",
            "fillAlphas": 0
        }, {
            "valueAxis": "v1",
            "type": "smoothedLine",
            "lineThickness": 2,
            "title": "% Открытия ЭРВ",
            "valueField": "x6",
            "fillAlphas": 0
        }],
        "chartScrollbar": {},
        "chartCursor": {
            "cursorPosition": "mouse"
        },
        "categoryField": "date",
        "categoryAxis": {
            "parseDates": true,
            "axisColor": "#DADADA",
            "minPeriod": "ss"
        },
        "export": {
            "enabled": true,
            "position": "bottom-right"
         }
    });

    chart.addListener("dataUpdated", zoomChart);
    zoomChart();


});




  </script>

</head>
<body>


<!-- HTML -->
<div id="chartdiv"></div>

</body>
</html>

*** Сообщение запрещено. Сообщение похоже на спам. ***

ledmax · Сообщение **ledmax** » Сб апр 22, 2017 7:43 pm

[quote="serghei"]Я библиотеку воткнул в АМС , а вот привязать данные - уже полгода спрашиваю, сам не знаю как прикрутить. SteelSeries без проблем устанавливается на карточку. А вот дальше.... Не поделитесь кодом??[/quote]
Велкоме
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<meta http-equiv="Pragma" content="no-cache">


<style>
#chartdiv {
width : 100%;
height : 500px;
}
</style>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/none.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/ ... "></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/ ... export.css" type="text/css" media="all" />

<script>

//var csv is the CSV file with headers
function csvJSON(csv){
var lines=csv.split("\n");
var result = [];

for(var i=0;i<lines.length;i++){
var obj = [];
if (lines[i] == '') continue;
if (i == 0) continue;
var currentline=lines[i].split(",");
var val = [];
for(var j=0;j<currentline.length;j++){
if (j == 0) {
var myDate = new Date(currentline[j]);
} else {
val.push(Number(currentline[j]));
}
}

result.push({
date: myDate,
x1: val[0],
x2: val[1],
x3: val[2],
x4: val[3],
x5: val[4],
x6: val[5]
});
}

return result; //JavaScript object
}

function zoomChart(){
chart.zoomToIndexes(chart.dataProvider.length - 20, chart.dataProvider.length - 1);
}

jQuery.get('gotdata.css', function(data) {
data = csvJSON(data);
console.log(data);

chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"legend": {
"useGraphSettings": true
},
"dataProvider": data,
"synchronizeGrid":true,
"valueAxes": [{
"id":"v1",
"axisColor": "#FF6600",
"axisThickness": 2,
"axisAlpha": 1,
"position": "left"
}, {
"id":"v2",
"axisColor": "#FCD202",
"axisThickness": 2,
"axisAlpha": 1,
"position": "right"
}, {
"id":"v3",
"axisColor": "#B0DE09",
"axisThickness": 2,
"gridAlpha": 0,
"offset": 50,
"axisAlpha": 1,
"position": "left"
}],
"graphs": [{
"valueAxis": "v1",
"type": "smoothedLine",
"lineColor": "#FF6600",
"lineThickness": 2,
"title": "Т На Улице",
"valueField": "x1",
"fillAlphas": 0
}, {
"valueAxis": "v1",
"lineColor": "#FCD202",
"type": "smoothedLine",
"lineThickness": 2,
"title": "Т До Испарителя",
"valueField": "x2",
"fillAlphas": 0
}, {
"valueAxis": "v1",
"lineColor": "#B0DE09",
"type": "smoothedLine",
"lineThickness": 2,
"title": "T После Испарителя",
"valueField": "x3",
"fillAlphas": 0
}, {
"valueAxis": "v1",
"type": "smoothedLine",
"lineThickness": 2,
"title": "Т До Конденцатора",
"valueField": "x4",
"fillAlphas": 0
}, {
"valueAxis": "v1",
"type": "smoothedLine",
"lineThickness": 2,
"title": "Т После Конденцатора",
"valueField": "x5",
"fillAlphas": 0
}, {
"valueAxis": "v1",
"type": "smoothedLine",
"lineThickness": 2,
"title": "% Открытия ЭРВ",
"valueField": "x6",
"fillAlphas": 0
}],
"chartScrollbar": {},
"chartCursor": {
"cursorPosition": "mouse"
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"minPeriod": "ss"
},
"export": {
"enabled": true,
"position": "bottom-right"
}
});

chart.addListener("dataUpdated", zoomChart);
zoomChart();

});

</script>

</head>
<body>


<div id="chartdiv"></div>

</body>
</html>[/code]

serghei · Сообщение **serghei** » Сб апр 22, 2017 8:28 pm

" Скелет" страницы появился, но куча ошибок и вопросов.

СпойлерПоказать

Код: Выделить всё


serial.js:6 Uncaught TypeError: Cannot read property 'length' of undefined
    at b.getClosestIndex (serial.js:6)
    at Object.xToIndex (serial.js:11)
    at b.handleCursorMove (serial.js:7)
    at Object.a.inherits.b.fire (amcharts.js:1)
    at Object.dispatchMovedEvent (amcharts.js:28)
    at Object.handleMouseDown (amcharts.js:27)
    at b.handleMouseDown (serial.js:1)
    at HTMLDivElement.<anonymous> (amcharts.js:21)

У меня еще одна глобальная проблема - нет синхронизации с сервером времени. Библиотеки можно засунуть внутрь АМС, но сначала хочется получить картинку. И пока не понял, какой градусник к какой линии привязан.

ledmax · Сообщение **ledmax** » Сб апр 22, 2017 8:51 pm

gotdata.css выглядит так

Date ,TOut,TdoIspar,TpoIspar,TdoKonden,TpoKonden,ERVPos%

Попробуйте создать файл и кинуть на сервер. Через запятую напишите какие нибудь числа.. Должно работать.

Код из скетча (есп)

#ifdef DATALOG_FEATURE
void DataLogInit() {

SPIFFS.remove("/gotdata.css");
String dataLog = "Date" " " "," "TOut" "," "TdoIspar" "," "TpoIspar" "," "TdoKonden" "," "TpoKonden" "," "ERVPos%" ;
File logfile = SPIFFS.open("/gotdata.css", "a");
logfile.println(dataLog);
logfile.close();
}

void DataLogWorks() {

if((timeStatus() == timeSet) && cycle30s){

String dataLog = String (year()) + "-" + String (month())+ "-" + String (day()) + " " + String (hour()) + ":" + String (minute()) + ":" + String (second())+ " " + ","
+ String (current_temp[0]) + "," + String (current_temp[1]) + "," + String (current_temp[2]) + "," + String (current_temp[3]) + "," + String (current_temp[4]) + "," + String (ervPosition);
File logfile = SPIFFS.open("/gotdata.css", "a");
logfile.println(dataLog);

logfile.close();

}
}
#ifdef DATALOG_DEBUG
//Serial.print(objSens[n]);
// Serial.print(": ");
// Serial.println(current_temp[n]);
#endif

#endif // DATALOG_FEATURE

У меня на дуе тоже время не синхронизирует. Чё только не делал - не знаю в чём проблема(

serghei · Сообщение **serghei** » Сб апр 22, 2017 9:09 pm

С ЕСП проблем с синхронизацией времени нет , но сейчас сервер с SD картой. То есть насколько я понял сначала надо температуру логировать? А потом уже подставлять данные.
Круто получается. А полную версию АМС можете выложить ТУТ ?

serghei · Сообщение **serghei** » Сб апр 22, 2017 9:17 pm

ЖЕСТЬ !!! РАБОТАЕТ !! ( В смысле картинка появилась!!!) Про полную версию актуально.
Дело осталось за логгированием. Графики получил. Очень круто!!

СпойлерПоказать

: Chart_AMS.jpg (131.04 КБ) 6982 просмотра

Придется разгребать место на WeMos-ке и умудриться прикрутить модуль логгирования. А потом воткнуть библиотеки локально. Но это уже только на SD карте. Линии графиков очень плавные.
И еще раз громадное спасибо!

UPD Вот это угар!! Наконец то свершилось реальное чудо - логгирование температуры.

СпойлерПоказать

Код: Выделить всё

Date ,TOut,TdoIspar,TpoIspar,TdoKonden,TpoKonden,ERVPos%
2017-4-23 0:15:3 ,0.00,0.00,0.00
2017-4-23 0:15:34 ,37.88,26.81,0.00
2017-4-23 0:16:3 ,37.88,26.81,0.00
2017-4-23 0:16:34 ,37.88,26.81,0.00
2017-4-23 0:17:3 ,37.88,26.81,0.00
2017-4-23 0:17:34 ,37.88,26.87,0.00
2017-4-23 0:18:3 ,37.88,26.87,0.00
2017-4-23 0:18:34 ,37.88,26.87,0.00
2017-4-23 0:19:10 ,37.88,26.87,0.00
2017-4-23 0:19:38 ,37.88,26.87,0.00
2017-4-23 0:20:8 ,37.88,26.87,0.00
2017-4-23 0:20:41 ,37.88,26.87,0.00
2017-4-23 0:21:8 ,37.88,26.87,0.00
2017-4-23 0:21:39 ,37.88,26.94,0.00
2017-4-23 0:22:8 ,37.88,26.94,0.00

Осталось отполировать код и вывести на красивую картинку. Оставлю на ночь - посмотрю когда закончится память))))
В таблицу влезло 830 записей за 8 часов. Похоже память закончилась. (( Надо переходить на SD карту. И если скачивать график стандартными средствами Charts не пишет время обновления температуры - только дату и значения.

Прицепил фоновую картинку. Только надо найти соответствующую теме.

СпойлерПоказать

Код: Выделить всё

<style>

  .concept2 {
    color: #333;
    background: #BCC7B7 url(//%!/concept2.jpg) no-repeat;
    background-size: 100% 100%;
  }


#chartdiv {
width : 100%;
height : 500px;
} 
</style>
------------
<body class="concept2">


<!-- HTML -->
<div id="chartdiv"></div>

</body>

Вывести можно любую переменную в коде.
Вот только не вижу старта модуля логгирования в сериале. Ну и не подсвечивается индикатор модуля в Даш-панели ((

СпойлерПоказать

: Chart_AMS1.jpg (96.73 КБ) 6920 просмотров

визуализация данных

Re: визуализация данных

Re: визуализация данных

Re: визуализация данных

Re: визуализация данных

Re: визуализация данных

Re: визуализация данных

Re: визуализация данных

Re: визуализация данных

Re: визуализация данных

Re: визуализация данных