Multi Series in Visual Editor

[punu1103]

Hi Congratulation for making nice plugin. i am trying to work on multi series data from ( influx db flux query ) data frame json is attached. i am trying to make line charts . Could please guide me how to map data for echart . Query can return multiple series(frames) too. so i want to make it dynamic . I tried to use visual editor and it is showing only first frame . data set has same field in all frames . one more question with visual editor how to handle if query return different number of frame each time query runs .

my use case is to compare /analysis batch data with elapsed time which i am getting from stateDuration in query. trying to make multi series line chart with "name": "stateDuration", and "name": "_value",

[ { "schema": { "refId": "A", "meta": { "typeVersion": [ 0, 0 ], "executedQueryString": "from(bucket: "HULDATA")\r\n |> range(start: 2024-03-23T07:40:35.904Z, stop: 2024-03-23T07:45:35.904Z)\r\n |> filter(fn: (r) => r["_measurement"] == "HUL")\r\n |> filter(fn: (r) => r["Location"] == "HOMOGENISER")\r\n |> filter(fn: (r) => r["_field"] == "Stg1_Pressure_UHP")\r\n |> stateDuration(unit: 1s, fn: (r) => true)\r\n \r\n" }, "name": "HUL", "fields": [ { "name": "_time", "type": "time", "typeInfo": { "frame": "time.Time", "nullable": true }, "config": {} }, { "name": "_value", "type": "number", "typeInfo": { "frame": "float64", "nullable": true }, "labels": { "Batch": "IC-T-20247053", "Location": "HOMOGENISER", "_field": "Stg1_Pressure_UHP", "_start": "2024-03-23 07:40:35.904 +0000 UTC", "_stop": "2024-03-23 07:45:35.904 +0000 UTC" }, "config": {} }, { "name": "stateDuration", "type": "number", "typeInfo": { "frame": "int64", "nullable": true }, "labels": { "Batch": "IC-T-20247053", "Location": "HOMOGENISER", "_field": "Stg1_Pressure_UHP", "_start": "2024-03-23 07:40:35.904 +0000 UTC", "_stop": "2024-03-23 07:45:35.904 +0000 UTC" }, "config": {} } ] }, "data": { "values": [ [ 1711179636915, 1711179641936, 1711179646947, 1711179651962, 1711179656964, 1711179661967, 1711179666972, 1711179671975, 1711179676974, 1711179681986, 1711179686994, 1711179692002, 1711179696987, 1711179701999, 1711179707012, 1711179712042, 1711179717051, 1711179722065, 1711179727074, 1711179732084, 1711179737078, 1711179742082, 1711179747089 ], [ 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42 ], [ 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110 ] ] } }, { "schema": { "refId": "A", "name": "HUL", "fields": [ { "name": "_time", "type": "time", "typeInfo": { "frame": "time.Time", "nullable": true }, "config": {} }, { "name": "_value", "type": "number", "typeInfo": { "frame": "float64", "nullable": true }, "labels": { "Batch": "IC-T-20247054", "Location": "HOMOGENISER", "_field": "Stg1_Pressure_UHP", "_start": "2024-03-23 07:40:35.904 +0000 UTC", "_stop": "2024-03-23 07:45:35.904 +0000 UTC" }, "config": {} }, { "name": "stateDuration", "type": "number", "typeInfo": { "frame": "int64", "nullable": true }, "labels": { "Batch": "IC-T-20247054", "Location": "HOMOGENISER", "_field": "Stg1_Pressure_UHP", "_start": "2024-03-23 07:40:35.904 +0000 UTC", "_stop": "2024-03-23 07:45:35.904 +0000 UTC" }, "config": {} } ] }, "data": { "values": [ [ 1711179752101, 1711179757114, 1711179762120, 1711179767129, 1711179772141, 1711179777161, 1711179782174, 1711179787179, 1711179792188, 1711179797190, 1711179802199, 1711179807212, 1711179812207, 1711179817209, 1711179822222, 1711179827219, 1711179832248, 1711179837263, 1711179842276, 1711179847271, 1711179852285, 1711179857292, 1711179862295, 1711179867311 ], [ 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42 ], [ 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115 ] ] } }, { "schema": { "refId": "A", "name": "HUL", "fields": [ { "name": "_time", "type": "time", "typeInfo": { "frame": "time.Time", "nullable": true }, "config": {} }, { "name": "_value", "type": "number", "typeInfo": { "frame": "float64", "nullable": true }, "labels": { "Batch": "IC-T-20247055", "Location": "HOMOGENISER", "_field": "Stg1_Pressure_UHP", "_start": "2024-03-23 07:40:35.904 +0000 UTC", "_stop": "2024-03-23 07:45:35.904 +0000 UTC" }, "config": {} }, { "name": "stateDuration", "type": "number", "typeInfo": { "frame": "int64", "nullable": true }, "labels": { "Batch": "IC-T-20247055", "Location": "HOMOGENISER", "_field": "Stg1_Pressure_UHP", "_start": "2024-03-23 07:40:35.904 +0000 UTC", "_stop": "2024-03-23 07:45:35.904 +0000 UTC" }, "config": {} } ] }, "data": { "values": [ [ 1711179872321, 1711179877327, 1711179882340, 1711179887358, 1711179892369, 1711179897372, 1711179902396, 1711179907388, 1711179912405, 1711179917404, 1711179922416, 1711179927411, 1711179932439 ], [ 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42, 42 ], [ 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60 ] ] } } ] Thank you in advance and once again congratulation for making nice plugin.

[punu1103]

Hi Mikhail There is an update , i changed my query and did pivot .i can get 4 series on graph , but my problem is every time i run the query my column name changes and number of column also changes . so i wanted to know how to make this dynamically . I think i have to go with code method could you please shade some light on this to handle dynamically . please find the attached data . Thanks in advance

[mikhail-vl]

@punu1103 You are correct, you can't use Visual Editor for fields with changeable names. It was not clear from the original question.

You can locate the fields and values based on the RefId as we explained in the documentation: https://volkovlabs.io/plugins/volkovlabs-echarts-panel/datasources/

data.series.map((s) => {
  if (s.refId === "logo") {
    images =
      s.fields.find((f) => f.name === "body").values.buffer ||
      s.fields.find((f) => f.name === "body").values;
  } else if (s.refId === "connections") {
    sources =
      s.fields.find((f) => f.name === "source").values.buffer ||
      s.fields.find((f) => f.name === "source").values;
    targets =
      s.fields.find((f) => f.name === "target").values.buffer ||
      s.fields.find((f) => f.name === "target").values;
  } else if (s.refId === "nodes") {
    titles =
      s.fields.find((f) => f.name === "title").values.buffer ||
      s.fields.find((f) => f.name === "title").values;
    descriptions =
      s.fields.find((f) => f.name === "description").values.buffer ||
      s.fields.find((f) => f.name === "description").values;
  }
});

[punu1103]

Hi Mikhail Thanks for reply . in above example column names are fixed . in my case column name ( refid ) it self changing , like for 5 min query it is A,B,C for 10 Min query it may be A,B,C,D,E,F here A,B,C,D,E,F are an example it can be anything . How can i map column 1 to x axis and rest other column to Y -axis dynamically .in my case first column is always fixed which i think Can be mapped with refid but rest other column are not with fixed name . My use case is to compare batch wise data , first column is elapsed time and rest other columns are batch name made in specific time range selected for query . batches are alphanumeric . FOR EXAMPLE IC-T-20248241 is not fixed

[vitPinchuk]

Hi, @punu1103 if your column names change dynamically you need to use "code" Editor Mode instead of "visual". I'll give you an example see below

For example, I created the data using static Data source. It's static, but it'll ok for example.

So, next I set up Visual Editor Mode to display exmaple data. The data is showed as expected

But there is one point, of course, if we change the name of Field 2 to Field 21 (as an example, to simulate a dynamic change) we won`t see blue line

Data mismatch occurs

To avoid this, we need to get data and work without being bound to a series, as it happens in the "visual" mode. How it`s looks in "code" mode:

Everything is displayed if I change the field name from Field 21 to Field 22

A little explanation. In this case. you are manipulating data from context.panel.data.series, they get there dynamically. You need to take the array element that is used for the x-axis, the other elements can be used for the Y axis. I'm sure this will help you, thank you.

example of code:

let yData = []
let xData = []
context.panel.data.series.map((s) => {
  console.log('console >>> s', s)
  xData = s.fields[0].values
  yData = s.fields.slice(1).map(element => ({
    data: element.values,
    type: 'line'
  }))
});
console.log('console >>> xData', xData)
console.log('console >>> yData', yData)

return {
  grid: {
    bottom: "3%",
    containLabel: true,
    left: "3%",
    right: "4%",
    top: "4%"
  },
  toolbox: {
    left: 'center',
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      restore: {}
    }
  },
  series: yData,
  xAxis: {
    data: xData,
  },
  yAxis: {
    type: "value",
    min: 80
  }
};

I left console.log for example

[punu1103]

Thanks it worked !!