VolkovLabs / business-charts

The Business Charts panel allows you to integrate charts and graphs created by the Apache ECharts library into your Grafana dashboard.
https://docs.volkovlabs.io
Apache License 2.0
139 stars 17 forks source link

Line chart not showing, only tooltip available #177

Closed fbi1671 closed 1 year ago

fbi1671 commented 1 year ago

Hi,

below is my query to the data source, everything works well. Data is display in Grafana table. SELECT CONVERT_TZ((event), @@session.time_zone, '+00:00' ) AS "time", kp89_9am, kp89_6pm, kp91_9am, kp91_6pm, kp92_9am, kp92_6pm, kp94_9am, kp94_6pm, kp97_9am, kp97_6pm, kp407_9am, kp407_6pm FROM grnro_ttm_group_kp_ONE WHERE $__timeFilter(event) ORDER BY event DESC LIMIT 1

below is my Apache ECharts function, was working until last week before Grafana updated my instance 8.5.23-e7a63dd4 to the current stable version 9.5.3.

let kp89_9a = []; let kp89_6p = []; let kp91_9a = []; let kp91_6p = []; let kp92_9a = []; let kp92_6p = []; let kp94_9a = []; let kp94_6p = []; let kp97_9a = []; let kp97_6p = []; let kp407_9a = []; let kp407_6p = [];

data.series.map((s) => { kp89_9a = s.fields.find((f) => f.name === "kp89_9am").values.buffer; kp89_6p = s.fields.find((f) => f.name === "kp89_6pm").values.buffer; kp91_9a = s.fields.find((f) => f.name === "kp91_9am").values.buffer; kp91_6p = s.fields.find((f) => f.name === "kp91_6pm").values.buffer; kp92_9a = s.fields.find((f) => f.name === "kp92_9am").values.buffer; kp92_6p = s.fields.find((f) => f.name === "kp92_6pm").values.buffer; kp94_9a = s.fields.find((f) => f.name === "kp94_9am").values.buffer; kp94_6p = s.fields.find((f) => f.name === "kp94_6pm").values.buffer; kp97_9a = s.fields.find((f) => f.name === "kp97_9am").values.buffer; kp97_6p = s.fields.find((f) => f.name === "kp97_6pm").values.buffer; kp407_9a = s.fields.find((f) => f.name === "kp407_9am").values.buffer; kp407_6p = s.fields.find((f) => f.name === "kp407_6pm").values.buffer; });

return { tooltip: { trigger: 'axis' }, xAxis: { name: "Test Post Number", nameLocation: 'end', type: 'category', data: ['KP89', 'KP91', 'KP92', 'KP94', 'KP97', 'KP407'] }, yAxis: { name: 'Potential (mV)', type: 'value' }, series: [ { name: "9am", data: [kp89_9a, kp91_9a, kp92_9a, kp94_9a, kp97_9a, kp407_9a], //data: [6,5,4,3,2,1], type: 'line', smooth: true }, { name: "6pm", data: [kp89_6p, kp91_6p, kp92_6p, kp94_6p, kp97_6p, kp407_6p], //data: [1, 2, 3, 4, 5, 6], type: 'line', smooth: true } ] };

mikhail-vl commented 1 year ago

@fbi1671 What is the error do you see?

Are you sure it's updated to 9.5.3? There is no breaking changes between 8.5.23 and 9.5.3 I am aware of. Grafana 10 provides values instead of values.buffer, and it should be updated accordingly.

fbi1671 commented 1 year ago

Hi,

Modified the code a bit, and it works my requirement...

  1. remove the .buffer
  2. insert array index number 0 manually inside the data.

thanks Mikhail, appreciate your help and time.

let kp89_9a = []; let kp89_6p = []; let kp91_9a = []; let kp91_6p = []; let kp92_9a = []; let kp92_6p = []; let kp94_9a = []; let kp94_6p = []; let kp97_9a = []; let kp97_6p = []; let kp407_9a = []; let kp407_6p = [];

data.series.map((s) => { kp89_9a = s.fields.find((f) => f.name === "kp89_9am").values; kp89_6p = s.fields.find((f) => f.name === "kp89_6pm").values; kp91_9a = s.fields.find((f) => f.name === "kp91_9am").values; kp91_6p = s.fields.find((f) => f.name === "kp91_6pm").values; kp92_9a = s.fields.find((f) => f.name === "kp92_9am").values; kp92_6p = s.fields.find((f) => f.name === "kp92_6pm").values; kp94_9a = s.fields.find((f) => f.name === "kp94_9am").values; kp94_6p = s.fields.find((f) => f.name === "kp94_6pm").values; kp97_9a = s.fields.find((f) => f.name === "kp97_9am").values; kp97_6p = s.fields.find((f) => f.name === "kp97_6pm").values; kp407_9a = s.fields.find((f) => f.name === "kp407_9am").values; kp407_6p = s.fields.find((f) => f.name === "kp407_6pm").values; });

return { tooltip: { trigger: 'axis' }, xAxis: { name: "Test Post Number", nameLocation: 'end', type: 'category', data: ['KP89', 'KP91', 'KP92', 'KP94', 'KP97', 'KP407'] }, yAxis: { name: 'Potential (mV)', type: 'value' }, series: [ { name: "9am", data: [kp89_9a[0], kp91_9a[0], kp92_9a[0], kp94_9a[0], kp97_9a[0], kp407_9a[0]], type: 'line', smooth: true }, { name: "6pm", data: [kp89_6p[0], kp91_6p[0], kp92_6p[0], kp94_6p[0], kp97_6p[0], kp407_6p[0]], type: 'line', smooth: true } ] };

fbi1671 commented 1 year ago

PTS_Echart

fbi1671 commented 1 year ago

Sorry, mistakenly reopened the issue.

mikhail-vl commented 1 year ago

@fbi1671 Thank you for confirming.

We already updated documentation and released a new version with an updated example: https://volkovlabs.io/blog/echarts-panel-4.5.0-20230603/.

Let us know if there is anything else.

fbi1671 commented 1 year ago

@fbi1671 Thank you for confirming.

We already updated documentation and released a new version with an updated example: https://volkovlabs.io/blog/echarts-panel-4.5.0-20230603/.

Let us know if there is anything else.

That would be all. Thanks a lot guys.