|
PVPC trend graph in visu
|
23.09.2022, 12:12
This means that your data is not a plain array of numbers. If each array item is an object containing value field then the data conversion should be like this:
Code: 123 for (var i = 0; i < data.length; i++) {
data[ i ] = data[ i ].value / 1000;
}
23.09.2022, 12:52
Now it works.
I tried something similar but using data.value/1000, but of course it didn't work. Thank you very much. PS. I will put a summary in the thread that I opened from the PVPC.
24.09.2022, 11:24
Hello
Now I would like to play a bit with the aspect of the graph. For example, changing the background color, leaving only the line of data points and removing the lower red area of the curve, the color of the labels, etc. How can I do it? Thank you
03.10.2022, 09:53
Hello
I have a Umotion MTN6260-0310 screen, the Wiser visu passes, the problem is that the graph does not work with this chartist method. Any suggestion? Greeting 
03.10.2022, 10:07
As far I know this is not supported(by SE) screen with some old Chromium on it. Don't think we can do anything here.
------------------------------
Ctrl+F5
03.10.2022, 10:35
Hello
Thanks, then I would have to go back to the original idea of post Nº2 https://forum.logicmachine.net/showthrea...5#pid27275 Could you help me implement it? Thank you
03.10.2022, 13:10
Try this:
Code: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 $(function() {
$.getJSON('/user/data.lp', function(data) {
var labels = [];
for (var i = 0; i < 24; i++) {
var label = i.toString();
if (label.length == 1) {
label = '0' + label;
}
labels.push(label);
}
for (var i = 0; i < data.length; i++) {
data[ i ] = data[ i ].value / 1000;
}
var width = 600;
var height = 400;
var params = {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'Prices',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: data,
fill: false,
},
]
},
options: {
title: {
display: true,
text: 'Title',
},
},
};
var cdata = encodeURIComponent(JSON.stringify(params));
var src = 'https://quickchart.io/chart?w=' + width + '&h=' + height + '&c=' + cdata;
$('<img>').css({
position: 'absolute',
width: width + 'px',
height: height + 'px',
left: '10px',
top: '50px',
zIndex: 999
}).appendTo('#plan-8').attr('src', src);
});
});
06.10.2022, 17:16
Hello
I've tested it on my test Wiser and it works perfectly, thanks. For now I can't test it on the client's Wiser and Umotion, what worries me is that Umotion being Javascript won't be able to execute it either. Alternative in Lua? Greeting
07.10.2022, 05:36
It should work on Umotion, just make sure that is has gateway/DNS set to load the chart externally.
16.10.2022, 17:25
Hello
It does not work, the graph is not displayed. Umotion has gateway and DNS configured correctly. Relevant is the Umotion client MTN6260-0310. Would an alternative be possible in Lua? Greeting
18.10.2022, 09:31
This .lp example will generate the chart. Modify it to use storage values instead of random values. Upload it as chart.lp, then use image element with remote source url set to /user/chart.lp
Code: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 <?
math.randomseed(os.time())
local data = {}
for i = 1, 24 do
data[ i ] = {
value = math.random(100, 300)
}
end
local labels = {}
for i = 0, 23 do
local label = tostring(i)
if #label == 1 then
label = '0' .. label
end
labels[ #labels + 1 ] = label
end
for i, item in ipairs(data) do
data[ i ] = item.value / 1000
end
local width = 600
local height = 400
local params = {
type = 'line',
data = {
labels = labels,
datasets = {
{
label = 'Prices',
backgroundColor = 'rgb(255, 99, 132)',
borderColor = 'rgb(255, 99, 132)',
data = data,
fill = false,
}
}
},
options = {
title = {
display = true,
text = 'Title',
}
}
}
local cdata = ngx.escape_uri(require('json').encode(params))
local url = 'https://quickchart.io/chart?w=' .. width .. '&h=' .. height .. '&c=' .. cdata
local data = require('socket.http').request(url)
header('content-type', 'image/png')
write(data)
18.10.2022, 17:30
Thanks for the help.
With random data it works and with the image the graph is loaded on the visualization. I have the data in the data.lp file. How do I collect it? I have tried with this Code: 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758 <?
data_pvpc = storage.get('pvpc')
local data = {}
for i = 1, 24 do
data[ i ] = {
value = data_pvpc
}
end
local labels = {}
for i = 0, 23 do
local label = tostring(i)
if #label == 1 then
label = '0' .. label
end
labels[ #labels + 1 ] = label
end
for i, item in ipairs(data) do
data[ i ] = item.value / 1000
end
local width = 600
local height = 400
local params = {
type = 'line',
data = {
labels = labels,
datasets = {
{
label = 'Prices',
backgroundColor = 'rgb(255, 99, 132)',
borderColor = 'rgb(255, 99, 132)',
data = data,
fill = false,
}
}
},
options = {
title = {
display = true,
text = 'Title',
}
}
}
local cdata = ngx.escape_uri(require('json').encode(params))
local url = 'https://quickchart.io/chart?w=' .. width .. '&h=' .. height .. '&c=' .. cdata
local data = require('socket.http').request(url)
header('content-type', 'image/png')
write(data)I returned Error in /www/user/chart.lp at line 3: attempt to index global 'storage' (a nil value) I have also tried with local data_pvpc = storage.get('pvpc') Greeting
20.10.2022, 18:11
hello
It works perfectly. Thank you very much for your help. Greeting
14.02.2024, 16:43
I'm using bar chart, would it be possible to get different bars in different colors when bars are over and under limits? Lets say under 7 is blue, 7-8 is green, 8-9 is yellow, over 9 is red etc.
15.02.2024, 08:05
Which solution are you using? chartist.js library or quickchart.io service?
16.02.2024, 05:20
16.02.2024, 07:21
There's an option to use gradient fill: https://quickchart.io/documentation/refe...ient-fills
|
|
« Next Oldest | Next Newest »
|
