04.02.2021, 13:37
(16.11.2020, 08:31)admin Wrote: Here's an example that can be used as a starting point.
It should be modified to fetch the data remotely. It already converts CSV into correct data format for the graph library.
Code:$(function() {
var csv = `11-05-20 16:01:06;0,51
11-05-20 16:01:17;0,44
11-05-20 16:01:29;0,48
11-05-20 16:01:40;0,48
11-05-20 16:01:52;0,53
11-05-20 16:02:03;0,48
11-05-20 16:02:15;0,45
11-05-20 16:02:26;0,49
11-05-20 16:02:38;0,47
11-05-20 16:02:49;0,47`;
var data = [];
// convert CSV to correct data format
$.each(csv.split('\n'), function(_, line) {
var items = line.split(';')
, d = items[0].replace(/(\d+)\-(\d+)\-(\d+) (.*)/, '20$3-$2-$1 $4')
, n = items[1].replace(',', '.');
data.push([
new Date(d),
Number(n)
]);
});
// create element for graph display, add to plan #1
var el = $('<div></div>').css({
position: 'absolute',
width: 500,
height: 300,
left: 250,
top: 380
}).appendTo('#plan-1').get(0);
// create graph instance
var graph = new Dygraph(el, data, {
labels: [ '', 'My data' ],
xAxisLabelWidth: 60
});
});
graph should only be created once, to update it with new data use this:
Code:graph.updateOptions({ file: data });
Hello Admin
Is it possible to use this way to show values from object logs as trend/curve?
Best Regards,