PVPC trend graph in visu

[admin]

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;
}

[JRP]

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.

[JRP]

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

[JRP]

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

[Daniel]

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.

[JRP]

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

[admin]

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);
  });
});

[JRP]

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

[admin]

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

[JRP]

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

[JRP]

Any suggestion? Thank you

[admin]

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)

[JRP]

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

[JRP]

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

[admin]

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

[JRP]

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

[icuzz]

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.

---

[admin]

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

[icuzz]

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

quickchart.io

[admin]

There's an option to use gradient fill: https://quickchart.io/documentation/refe...ient-fills