chartist to display nice pie...

chartist to display nice pie... - Printable Version

+- LogicMachine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: General (https://forum.logicmachine.net/forumdisplay.php?fid=2)
+--- Thread: chartist to display nice pie... (/showthread.php?tid=3789)

Pages: 1 2 3

RE: chartist to display nice pie... - domotiqa - 25.03.2024

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

RE: chartist to display nice pie... - admin - 25.03.2024

Not possible without an .lp script to find matching trend IDs to the provided group addresses.

RE: chartist to display nice pie... - domotiqa - 25.03.2024

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

RE: chartist to display nice pie... - admin - 25.03.2024

I don't see any other solution but to use a .lp script.

RE: chartist to display nice pie... - jmir - 25.03.2024

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

RE: chartist to display nice pie... - admin - 27.03.2024

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.

RE: chartist to display nice pie... - domotiqa - 27.03.2024

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

RE: chartist to display nice pie... - domotiqa - 08.04.2024

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.

RE: chartist to display nice pie... - admin - 08.04.2024

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.

RE: chartist to display nice pie... - domotiqa - 08.04.2024

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/9269296/store-data-in-variable-from-post-jquery

RE: chartist to display nice pie... - hocine - 02.05.2024

Hello,

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

Pie Chart

RE: chartist to display nice pie... - admin - 02.05.2024

Click "Show code" under the example and it will show the relevant code.

RE: chartist to display nice pie... - hocine - 03.05.2024

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

RE: chartist to display nice pie... - admin - 03.05.2024

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

RE: chartist to display nice pie... - busta - 03.05.2024

(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

RE: chartist to display nice pie... - bvanden - 15.02.2025

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

RE: chartist to display nice pie... - admin - 15.02.2025

Use different classes for each chart.

RE: chartist to display nice pie... - stianj - 23.10.2025

Is it too soon to ask for chartist examples for new Visu..? ?

RE: chartist to display nice pie... - admin - 30.10.2025

What exactly do you want to display in this chart? Maybe making a new widget for this is a better solution.

RE: chartist to display nice pie... - stianj - 31.10.2025

I'm using it for several things, but like here: https://forum.logicmachine.net/showthread.php?tid=5918&pid=38530#pid38530 - I haven't tried to recreate the graphs using the Trends widget - but maybe I should try that before complaining.

But it's also this horizontal bar-graph that you can see in that link that I would like to recreate... But the customization options (especially for axis labels etc) I don't think I have in Trends widget.

And I was planning to take advantage of more of the Chartist functions eventually, both gauge charts and bar charts are useful...

I read your answer as this is probably not going to work in Visu ever?