Logic Machine Forum
PVPC trend graph in visu - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: PVPC trend graph in visu (/showthread.php?tid=4202)

Pages: 1 2 3

RE: PVPC trend graph in visu - admin - 23.09.2022

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:
for (var i = 0; i < data.length; i++) {
  data[ i ] = data[ i ].value / 1000;
}


RE: PVPC trend graph in visu - JRP - 23.09.2022

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.

RE: PVPC trend graph in visu - JRP - 24.09.2022

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

RE: PVPC trend graph in visu - JRP - 03.10.2022

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

RE: PVPC trend graph in visu - Daniel - 03.10.2022

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.

RE: PVPC trend graph in visu - JRP - 03.10.2022

Hello

Thanks, then I would have to go back to the original idea of post Nº2

https://forum.logicmachine.net/showthread.php?tid=4202&pid=27275#pid27275

Could you help me implement it?

Thank you

RE: PVPC trend graph in visu - admin - 03.10.2022

Try this:
Code:
$(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);
  });
});


RE: PVPC trend graph in visu - JRP - 06.10.2022

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

RE: PVPC trend graph in visu - admin - 07.10.2022

It should work on Umotion, just make sure that is has gateway/DNS set to load the chart externally.

RE: PVPC trend graph in visu - JRP - 16.10.2022

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

RE: PVPC trend graph in visu - JRP - 18.10.2022

Any suggestion? Thank you

RE: PVPC trend graph in visu - admin - 18.10.2022

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:
<?

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)


RE: PVPC trend graph in visu - JRP - 18.10.2022

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:
<?

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

RE: PVPC trend graph in visu - JRP - 19.10.2022

Hello
I keep trying and nothing.
Any suggestion?
Thank you

RE: PVPC trend graph in visu - admin - 19.10.2022

Add require('apps') before calling storage functions.

RE: PVPC trend graph in visu - JRP - 20.10.2022

hello
It works perfectly.
Thank you very much for your help.
Greeting

RE: PVPC trend graph in visu - icuzz - 14.02.2024

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.


RE: PVPC trend graph in visu - admin - 15.02.2024

Which solution are you using? chartist.js library or quickchart.io service?

RE: PVPC trend graph in visu - icuzz - 16.02.2024

(15.02.2024, 08:05)admin Wrote: Which solution are you using? chartist.js library or quickchart.io service?

quickchart.io

RE: PVPC trend graph in visu - admin - 16.02.2024

There's an option to use gradient fill: https://quickchart.io/documentation/reference/colors-and-backgrounds/#gradient-fills