|
chartist to display nice pie...
|
25.03.2024, 07:20
Hi admin, any idea how to have GA from grp.tag for example:
var ids = [ '20/4/1','20/4/2' , '20/4/3' ]; instead of trend ID var ids = [ 1, 3, 5 ];
-----------
FRANCE SMARTHOME & SMARTBUILDING INTEGRATION SE ECO EXPERT 
25.03.2024, 08:48
Not possible without an .lp script to find matching trend IDs to the provided group addresses.
ouch... that was what I was thinking.
I will maybe try to add script that put in comment of an object his trend id there is no way in javacript to do sql query
-----------
FRANCE SMARTHOME & SMARTBUILDING INTEGRATION SE ECO EXPERT 
25.03.2024, 14:49
(14.03.2024, 07:31)admin Wrote: This function can be used to fetch trend data. Change ids array as needed. Hi, Is it possible to get data timestamps using this code?
27.03.2024, 08:22
Custom JS to fetch trend data from trends.lp:
Code: 123456789101112131415161718192021222324252627282930313233 function getdate(offset) {
var date = new Date();
date.setDate(date.getDate() + offset);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return { year, month, day };
}
function getdata() {
var trends = [
1,
'Temperature',
'Humidity',
];
var data = JSON.stringify({
trends: trends,
dates: {
start: getdate(0),
end: getdate(1),
},
// resolution: 86400,
// timestamps: true,
});
$.post('/user/trends.lp', data, function(resp) {
console.log(resp);
});
}Both trend ID and name can be specified. Set resolution to 86400 to fetch daily data. Set timestamps to true to fetch both data and timestamps. trends.lp Code: 12345678910111213141516171819202122232425262728 <?
require('json')
require('trends')
trends.NaN = json.null
ngx.header.content_type = 'application/json'
local req = ngx.req.get_body_data()
req = json.pdecode(req)
local res = {}
local dates = req.dates
local resolution = tonumber(req.resolution)
local timestamps = toboolean(req.timestamps)
for i, idname in ipairs(req.trends) do
local id = tonumber(idname)
if id then
res[ i ] = trends.fetchrangebyid(id, dates, resolution, timestamps)
else
res[ i ] = trends.fetch(idname, dates, resolution, timestamps)
end
end
json.write(res)Note that there is no input data validation so the script can end with 500 Internal Server Error if the input data is incorrect.
Thanks for your lp file.
I tried to do sum of the value, but can't get length value, still 0 for result. however I can see the result value as array type in console... I tried lots of solution with each, for... without success. Any idea ? Code: 12345678910111213141516171819202122232425 function readTrend( listeId, dayBefore, dayBase )
{
var data = JSON.stringify({
dates_curr: {
start: getdate(dayBefore),
end: getdate(dayBase)
},
ids: listeId,
});
var result = [];
var totVal=[];
$.post('/scada-vis/trends/fetch', { data }, function(trends) {
trends = JSON.parse(trends);
$.each(trends, function(_, trend) {
result.push(trend.data);
});
});
return sum(result);
}Code: 12345678910111213141516171819202122232425 function sum(array) {
//test each
let totVal = 0
console.log(array[1]);
let newArray=new Array();
newArray=array;
$.each(newArray, function(_, lined) {
console.log(lined.data);
});
// test for
for (let l = 0; l < array.length; l++) {
console.log('hello');
var sum = 0;
for (let k = 0; k < array[l].length; k++) {
sum += array[l][k];
}
//console.log(sum);
totVal.push(sum);
}
return sum(result);
}result array in console log. Also result[0] or result[1] or result[0][0]...don't work. Code: 123456789101112 Array []
0: Array(24) [ 112, 112, 114, … ]
1: Array(24) [ 291, 173, 666, … ]
2: Array(24) [ 13, 14, 13, … ]
length: 3
<prototype>: Array []
scada-vis:771:11---------- only solution I found is using inside the function Code: 12345678910111213141516171819202122232425262728293031323334 function readTrend( listeId, dayBefore, dayBase, total )
{
var data = JSON.stringify({
dates_curr: {
start: getdate(dayBefore),
end: getdate(dayBase)
},
ids: listeId,
});
var result = [];
var totVal=[];
$.post('/scada-vis/trends/fetch', { data }, function(trends) {
trends = JSON.parse(trends);
$.each(trends, function(_, trend) {
if (total>0) {
let totVal = 0
for (let l = 0; l < trend.data.length; l++) {
totVal += trend.data[l];
}
result.push(totVal);
} else {
result.push(trend.data);
}
});
});
return result;
}However I can't understand why in the other solution the lenght and [x] don't work
-----------
FRANCE SMARTHOME & SMARTBUILDING INTEGRATION SE ECO EXPERT
08.04.2024, 13:16
I need help.
Not so good with Javascript...  I have this code: Code: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 function getdate(offset) {
var date = new Date();
date.setDate(date.getDate() + offset+1);
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
return { year, month, day };
}
function getdata(nom, dayBefore, dayBase,total) {
var result = [];
var trendsName = [];
var trendsAddress = [];
var myJsonString='';
//FIND GA NAME AND ADDRESS
$.each(grp.tag(nom), function(id, object) {
trendsName.push(object.name);
trendsAddress.push(Scada.encodeGroupAddress(object.address));
});
// CREATE ARGUMENT
var data = JSON.stringify({
trends: trendsAddress,
dates: {
start: getdate(dayBefore),
end: getdate(dayBase),
},
// resolution: 86400,
// timestamps: true,
});
// TRENDS.LP POST
$.post('/user/trends.lp', data, function(resp) {
$.each(resp, function(id, object) {
// SUM TO TOTAL
if (total>0) {
let totVal = 0;
for (let l = 0; l < object.length; l++) {
totVal += object[l];
}
result.push(trendsName[id],totVal);
// NO TOTAL
} else {
result.push(trendsName[id],object);
}
});
});
return result;
}My problem I can't iterate on the array on the function: for example with //last day let day=getdata(classImage,-1,0,1); this don't work. Lentgth return 0... for (let i = 0; i < day .length; i++) { console.log(day[i]) } however a console.log of day show all result...  and a length. I gess there is something with scope/timelaps but I try also in jquery, with map... all same.Code: 12345678910111213 Array []
0: "PV - Active Energy No reset"
1: 16854
2: "General- Active Energy No reset"
3: 19329
length: 4
<prototype>: Array []If our so nice admin could help me a bit, greatly appreciated.
-----------
FRANCE SMARTHOME & SMARTBUILDING INTEGRATION SE ECO EXPERT
08.04.2024, 14:06
Does the request to trends.lp return anything?
I suppose you need two arrays if you want to display the data in the chart - one with labels (trend names) another with the actual data.
yes the right value.
It s just I can't iterate here for example: let day=getdata(classImage,-1,0,1); console.log(day) for (let l = 0; l < day.length; l++) { console.log(day[l]) } the console.log(day) return right value array with value, length... if I console.log( day.length ) it say zero  and so the console.log(day[l]) never happen, I i log day.length it said zero. I thing there is something with Code: 1 $.ajaxSetup({async:false}); //execute synchronouslyI add it and it works.... https://stackoverflow.com/questions/9269...ost-jquery
-----------
FRANCE SMARTHOME & SMARTBUILDING INTEGRATION SE ECO EXPERT
02.05.2024, 09:47
Hello,
Does anyone know how to integrate the legend in the Chartist pie like this exemple ? Pie Chart
02.05.2024, 10:39
Click "Show code" under the example and it will show the relevant code.
03.05.2024, 06:37
(02.05.2024, 10:39)admin Wrote: Click "Show code" under the example and it will show the relevant code. I tried like that, but I don't have the color in front of the legend like in the example Code: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 $(function() {
var chart;
grp.listen('32/1/22', function(obj, type) {
var planid = 12;
var groups = ['32/2/19','32/2/21', '32/2/23','32/2/25','32/2/27','32/2/29','32/2/31','32/2/33','32/2/35','32/2/37','32/2/39','32/2/41'];
var labels = [];
var series = [];
for (var group of groups) {
var obj = grp.find(group);
console.log(group, obj);
labels.push(obj.name);
series.push(obj.value);
}
var data = {
labels: labels,
series: series
};
var options = {
width: '300px',
height: '300px',
donut: true,
donutWidth: 50,
donutSolid: true,
startAngle: 270,
showLabel: false
};
if (chart) {
chart.update(data);
} else {
var el = $('<div class="chart"></div>').css({
position: 'absolute',
top: '750px',
left: '1210px'
}).appendTo('#plan-' + planid);
chart = new Chartist.Pie('.chart', data, options);
// Ajout des légendes
var legendContainer = $('<div class="legend"></div>'); // Création du conteneur de légende
data.labels.forEach(function(label, index) {
legendContainer.append('<div><span class="dot" style="background-color: ' + chart.data.series[index].meta + '"></span>' + label + '</div>'); // Ajout de chaque élément de légende avec la couleur associée
});
el.append(legendContainer); // Ajout du conteneur de légende au graphique
}
}, true);
});
03.05.2024, 08:31
A work-around trick is to use SVG with the same classes as the chart to display a color box next to the legend text:
Code: 12345678 var legendContainer = $('<div class="legend"></div>'); // Création du conteneur de légende
var code = ('a').charCodeAt(0)
data.labels.forEach(function(label, index) {
var letter = String.fromCharCode(index + code)
var svg = '<svg width="16" height="16" class="ct-series-' + letter + '"><rect width="16" height="16" class="ct-slice-pie" /></svg>'
legendContainer.append('<div>' + svg + ' ' + label +' </div>'); // Ajout de chaque élément de légende avec la couleur associée
});
el.append(legendContainer); // Ajout du conteneur de légende au graphique
03.05.2024, 11:36
(03.05.2024, 08:31)admin Wrote: A work-around trick is to use SVG with the same classes as the chart to display a color box next to the legend text: Thanks ADMIN you are a magician
15.02.2025, 10:15
I successfuly managed to display a pie chart. However, when trying to display a second one in the same page and position is 100px,100px instead of 100px,600px, I failed. I get the second one, and not the first one. Any idea ?
Code: 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586 $(function() {
var chart1, chart2;
grp.listen('8/0/0', function(obj, type) {
var planid = 4;
// Premier graphique
var groups1 = [ '0/1/11', '0/1/12', '0/1/13' ];
var labels1 = [ 'ECL', 'PC', 'BECS' ];
var series1 = [];
for (var group of groups1) {
var obj = grp.find(group);
console.log(group, obj);
labels1.push(obj.name);
series1.push(obj.value);
}
var data1 = {
labels: labels1,
series: series1
};
var options1 = {
width: '300px',
height: '300px',
donut: true,
donutWidth: 50,
donutSolid: true,
startAngle: 270,
total: series1.reduce((sum, value) => sum + value, 0),
showLabel: true
};
if (chart1) {
chart.update(data1);
} else {
var el1 = $('<div class="chart"></div>').css({
position: 'absolute',
top: '100px',
left: '100px'
}).appendTo('#plan-' + planid);
chart1 = new Chartist.Pie('.chart', data1, options1);
}
// Deuxième graphique
var groups2 = [ '0/1/1', '0/1/2' ];
var labels2 = [ 'ECL', 'PC' ];
var series2 = [];
for (var group of groups2) {
var obj = grp.find(group);
console.log(group, obj);
series2.push(obj.value);
}
var data2 = {
labels: labels2,
series: series2
};
var options2 = {
width: '300px',
height: '300px',
donut: true,
donutWidth: 50,
donutSolid: true,
startAngle: 270,
total: series2.reduce((sum, value) => sum + value, 0),
showLabel: true
};
if (chart2) {
chart2.update(data2);
} else {
var el2 = $('<div class="chart"></div>').css({
position: 'absolute',
top: '100px',
left: '600px' // Position différente pour le second graphique
}).appendTo('#plan-' + planid);
chart2 = new Chartist.Pie('.chart', data2, options2);
}
}, true);
}); |
|
« Next Oldest | Next Newest »
|
