chartist to display nice pie...

[domotiqa]

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

[admin]

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

[domotiqa]

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

[admin]

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

[jmir]

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?

[admin]

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.

[domotiqa]

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

[domotiqa]

I need help.
Not so good with Javascript...  


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...   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.

[admin]

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.

[domotiqa]

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

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

[hocine]

Hello, 

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

Pie Chart

[admin]

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

[hocine]

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

[admin]

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

[busta]

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

[bvanden]

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

[admin]

Use different classes for each chart.

[stianj]

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

[admin]

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