MarcusCalidus
commented
3 years ago could you please provide sample data of your data source or is your question just related how to access the elements of the svg?
Closed emma-luk closed 3 years ago
MarcusCalidus
commented
3 years ago could you please provide sample data of your data source or is your question just related how to access the elements of the svg?
emma-luk
commented
3 years ago @MarcusCalidus
The sample data of my data source via InfluxDB 1.8.4-1 on Windows, if the value is over 45, will be red and under 45 will be green. also, my question related to how to access the elements of the SVG too.
CREATE DATABASE devopsjourney show databases use devopsjourney
INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=70 INSERT temperature,panelname=1-1 value=40 INSERT temperature,panelname=1-1 value=30 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=70 INSERT temperature,panelname=1-1 value=40 INSERT temperature,panelname=1-1 value=30 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=70 INSERT temperature,panelname=1-1 value=40 INSERT temperature,panelname=1-1 value=30 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=70 INSERT temperature,panelname=1-1 value=40 INSERT temperature,panelname=1-1 value=30 INSERT temperature,panelname=1-1 value=60 INSERT temperature,panelname=1-1 value=60
emma-luk
commented
3 years ago @MarcusCalidus I know you are busy, any update? How to display time-series data from multiple columns from InfluxDB on Grafana?
MarcusCalidus
commented
3 years ago sorry for my late reply. You can have multiple InfluxDB Queries, as with every other control. You will receive the data in the series-Property of the ctrl object. You can log that to the Browser's console with console.log(ctrl.series); in onHandleMetric and post the resulting object here. So I can have a look at it.
emma-luk
commented
3 years ago @MarcusCalidus I am so sorry, What I need to change, please?
var s = Snap(svgnode); var t1 =s.select("#Panel-1-1"); var t =t1.selectAll("text"); t[0].node.innerHTML = ctrl.series[0].datapoints[0][0]; var nodeValue = t.items[0].node.innerHTML;
if(nodeValue < 0 || nodeValue === "") { console.log('Gray'); } else if(nodeValue < 30 && nodeValue > 0) { console.log('Green'); } else if(nodeValue < 41 && nodeValue > 30) { console.log('Yellow'); } else { console.log('Red'); }
MarcusCalidus
commented
3 years ago Is the question on how to change the color inside the svg? I am sorry. I don't quite get your problem.
MarcusCalidus
commented
3 years ago I guess you will want to use the following datapoint to get the current value of your stat
ctrl.series[0].stats.current
emma-luk
commented
3 years ago From: var s = Snap(svgnode); var t1 =s.select("#Panel-1-1"); var t =t1.selectAll("text"); t[0].node.innerHTML = ctrl.series[0].datapoints[0][0]; var nodeValue = t.items[0].node.innerHTML;
if(nodeValue < 0 || nodeValue === "") { console.log('Gray'); } else if(nodeValue < 30 && nodeValue > 0) { console.log('Green'); } else if(nodeValue < 41 && nodeValue > 30) { console.log('Yellow'); } else { console.log('Red'); }
change to:
var s = Snap(svgnode); var t1 =s.select("#Panel-1-1"); var t =t1.selectAll("text"); t[0].node.innerHTML = ctrl.series[0].stats.current.datapoints[0][0]; var nodeValue = t.items[0].node.innerHTML;
if(nodeValue < 0 || nodeValue === "") { console.log('Gray'); } else if(nodeValue < 30 && nodeValue > 0) { console.log('Green'); } else if(nodeValue < 41 && nodeValue > 30) { console.log('Yellow'); } else { console.log('Red'); }
no data
emma-luk
commented
3 years ago 
MarcusCalidus
commented
3 years ago t[0].node.innerHTML = ctrl.series[0].datapoints[0][0];
has to be
t[0].node.innerHTML = ctrl.series[0].stats.current;
MarcusCalidus
commented
3 years ago could you please post the JSON of ctrl.series[0]
emma-luk
commented
3 years ago 
MarcusCalidus
commented
3 years ago Isn't that what you wanted? I am really sorry. I do not get the point of your problem. Could you please describe in words not screenshots what you want to achieve? thank you.
emma-luk
commented
3 years ago Thank you! If you have done please share info How to display time-series data from multiple columns from InfluxDB on Grafana?
MarcusCalidus
commented
3 years ago Again.. Since I do not know how your data is structured inside the series object, I cannot help you. Sorry. Please post ctrl.series[0] content as JSON here
emma-luk
commented
3 years ago how to get "post ctrl.series[0] content as JSON here"??
MarcusCalidus
commented
3 years ago console.log(JSON.stringify(ctrl.series[0]));
emma-luk
commented
3 years ago Thank you
MarcusCalidus
commented
3 years ago since you now can see the content of your datapoints, you see there is only one value. In fact with Influx there only can be one. To have an additional value, you'll need a second query. This one will be addressed as series[1] and so forth.
emma-luk
commented
3 years ago ok thank you
SVG data
JavaScript Code:
if no values is grey values under 30 is green values between 31 – 40 is yellow values over 41 is red
What I need to do for Events???