Comparison of one parameter between different time periods

Grafana Dashboards
1

Hello everyone!

I am using Grafana 10.0.0

I would like to compare the flowrate value between two different time periods.

As Grafana has only one time picker, I created two variables with the text format in which the user can write the time stamps in the format (yyyymmdd hh:mm).

I realised quickly that even that cannot help as dual x - axis setup is not natively supported in grafana. And when i use only the past time values in the variables, i need to zoom back as the panel states that it is outside range.

I then realised that using plotly could work. But, I am a beginner and not well versed on how to use that.

These are the two sql queries. Both are through stored procedure. First two values are the start and end times. Third is the Data ID and the last one is the time interval in seconds.

Based on native time picker
EXEC LC.db.usData $__timeFrom(), $__timeTo(), ‘1715’, 600;

Based on time variable
EXEC LC.db.usData ‘${Past_st}’,‘${Past_end}’, ‘1715’, 600;

This is how the table view looks like after running the query

image
image1234×307 17.8 KB

This is my current code
For the data panel

[
{
“x”: “TimestampUtc”,
“y”: “DI1715”,
“type”: “scatter”,
“mode”: “lines”,
“name”: “DI1715”
}
]

For the Layout Panel

{
“title”: “Time Series Data for DI1715”,
“xaxis”: {
“title”: “Time”,
“type”: “date”
},
“yaxis”: {
“title”: “DI1715 Value”
}
}

For the configuaration panel

{
“responsive”: true,
“displayModeBar”: true
}

For the Script panel

let timestamps = data.series[0].fields.find(field => field.name === ‘TimestampUtc’).values.buffer;
let values = data.series[0].fields.find(field => field.name === ‘DI1715’).values.buffer;

timestamps = timestamps.map(ts => new Date(ts));

let trace = {
x: timestamps,
y: values,
type: ‘scatter’,
mode: ‘lines’,
name: ‘DI1715’
};

let layout = {
title: ‘Time Series Data for DI1715’,
xaxis: { title: ‘Time’, type: ‘date’ },
yaxis: { title: ‘DI1715 Value’ }
};

return { data: [trace], layout: layout };

For the ClickScript panel

function handleClick(event) {
let point = event.points[0];
alert(Timestamp: ${point.x}, Value: ${point.y});
}

document.getElementById(‘plotly-div’).on(‘plotly_click’, handleClick);

I tried to find some instructions regarding this. But, I am not able find something that could work for me. Any help would be greatly appreciated.

3

Thank you for your response. I forgot to mention that my code for a single x axis is already not working. I am not sure where I am making the error.

This is what I get as output. The values are there in the table panel though. So, I believe that the query is running as it is supposed to. Only the code has some problem.

There’s an error in your script :
SyntaxError: Invalid or unexpected token (Check your console for more details)

4

we cant see your code remotely on your pc. mind sharing it?

5

do you mean this one

image
image789×533 20.6 KB

when i click on the three dots of the panel and ‘select inspect’ and then ‘panel JSON’?

6

that is a bunch of json data, which is not your code, we need to see your js/ts code.

7

I opened the panel editing again to have a look at it.

The code in the Data, Layout and Configuaration fields seem to have disappeared.

I realised there was a problem with the quotes ’ and ‘
I have changed it now and the problem now is as shown in the picture.

image
image1590×764 44.7 KB

In the output preview, it is stated

There’s an error in your script :
TypeError: Cannot read properties of undefined (reading ‘map’) - line 4:25 (Check your console for more details)

and the tooltip over the : and . shows , is expected there.

The code in the script part is

let timestamps = data.series[0].fields.find(field => field.name === ‘TimestampUtc’).values.buffer;
let values = data.series[0].fields.find(field => field.name === ‘DI1715’).values.buffer;

timestamps = timestamps.map(ts => new Date(ts));

let trace = {
x: timestamps,
y: values,
type: ‘scatter’,
mode: ‘lines’,
name: ‘DI1715’
};

let layout = {
title: ‘Time Series Data for DI1715’,
xaxis: { title: ‘Time’, type: ‘date’ },
yaxis: { title: ‘DI1715 Value’ }
};

return { data: [trace], layout: layout };

The code in the clickscript part is

function handleClick(event) {
let point = event.points[0];
alert(Timestamp: ${point.x}, Value: ${point.y});
}

document.getElementById(‘plotly-div’).on(‘plotly_click’, handleClick);

Other than this there is no code.