This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm that you accept these cookies being set.

chartist to display nice pie...
#21
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
Reply
#22
Not possible without an .lp script to find matching trend IDs to the provided group addresses.
Reply
#23
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
Reply
#24
I don't see any other solution but to use a .lp script.
Reply
#25
(14.03.2024, 07:31)admin Wrote: This function can be used to fetch trend data. Change ids array as needed.
Code:
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 ids = [ 1, 3, 5 ];

  var data = JSON.stringify({
    dates_curr: {
      start: getdate(0),
      end: getdate(1)
    },
    ids: ids,
  });
 
  $.post('/scada-vis/trends/fetch', { data }, function(trends) {
    var result = [];
   
    trends = JSON.parse(trends);
    $.each(trends, function(_, trend) {
      result.push(trend.data);
    });

    console.log(result);
  });
}

Hi,
Is it possible to get data timestamps using this code?
Reply
#26
Custom JS to fetch trend data from trends.lp:
Code:
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:
<?

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.
Reply
#27
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:
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:
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:
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:
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
Reply
#28
I need help.
Not so good with Javascript... Sleepy 


I have this code:

Code:
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... Rolleyes  and a length. I gess there is something with scope/timelaps but I try also in jquery, with map... all same.

Code:
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
Reply
#29
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.
Reply
#30
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 Dodgy

and so  the console.log(day[l]) never happen, I i log day.length it said zero.


I thing there is something with

Code:
$.ajaxSetup({async:false});  //execute synchronously



I add it and it works....
https://stackoverflow.com/questions/9269...ost-jquery
-----------
FRANCE SMARTHOME & SMARTBUILDING INTEGRATION
SE ECO EXPERT
Reply
#31
Hello, 

Does anyone know how to integrate the legend in the Chartist pie like this exemple ?

Pie Chart
Reply
#32
Click "Show code" under the example and it will show the relevant code.
Reply
#33
(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:
$(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);
});
Reply
#34
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:
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
Reply
#35
(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:
Code:
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

Thanks ADMIN you are a magician
Reply


Forum Jump: