how to use data from the query

[SamuelJoly]

Hi! I am very new to Grafana, Javascript and SQL. I am now trying to develop an interface on ACE.SVG. I have no trouble with my query. Although, I can't find the way to use it properly with this plugin. Could someone give me a quick example or explanation on how to get my data?

I have seen this demo, but this is very unclear to me. Especially "let buffer = data.series[0].fields[1].values.buffer;".

options.animateLogo = (svgmap, data) => { let buffer = data.series[0].fields[1].values.buffer; let valueCount = buffer.length let chartData = []; for (let i=0; i<valueCount; i+=(Math.floor(valueCount / 4)-1)) { chartData.push(buffer[i]) } let minData = chartData.reduce((acc, val) => { return Math.min(acc, val);

Thank you to help a beginner!

[acedrew]

@SamuelJoly The data variable is how you access the Grafana data frame API. Grafana has great documentation for that API here: https://grafana.com/docs/grafana/latest/developers/plugins/data-frames/

All the code above is just sampling values from the time series, specifically 4 values, at even spacing, then getting the max and min from that set of 4 values.

Also remember you can use your browser's developer tools and console.log() to dig into any of this. Here's pseudocode with literal values: let buffer = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,16,17,18,19] // The first series in the data frame, the second column (value rather than timestamp) and the values in the form of a single buffer, or array

let valueCount = buffer.length // this is just capturing the length of the series for clarity

let chartData = [] // this is just making an empty list for us to put the 4 samples we want into

for 0 through 3 as i, get the value at the address i times 1/4 the length of the list, and add that value to the chartData array

let minData equal the smallest value in the chartData Array we built

Does any of that help?

[SamuelJoly]

Thank you! This makes it very clear!

Might have other questions later ;)