How to get Dates on x-axis in Trend Visualization

[luca13062004]

Hi Grafana Community,

Doing research on this problem for hours now but didn’t find anything that helped me. Looking forward to your responses and advice. Thank you very much!

• What Grafana version and what operating system are you using?
  Grafana v11.0.0 via Docker and Microsoft Windows [Version 10.0.22621.3737]
  Using InfluxDB as a database also via Docker

• What are you trying to achieve?
  First of all I want to build a simplified visualization of the graph below. Currently I just want the dates on the X-axis and on the y-axis I want to display the developement of tests that have the status passed as line graph (green one). To have an x-axis that is not time I think I need to take “trend” as my visualization in grafana. To have data on the x-axis in the “trend” visualization, an increasing numeric value is required. If I insert the dates as strings it is not possible to have them on the x-axis as there are no increasing numeric value. I have also tried to insert the dates as unix time stamps but then they are also displayed in this format, which is not looking good. But I want to have 4/30/2024, 5/2/2024 etc on the x-axis. Is there a possibility to transform/ override the unix timestamps back into the MM-DD-YYYY format? Or do you know other visualizations or tips to get this sort of graph?

*How are you trying to achieve it?
At the moment I am using the python script below to write my datapoints to an InfluxDB that is connected with Grafana. Also not quite sure if the way I insert the Data is correct to do the queries I need to get the given graph. Open for any advice on data insertion and queries.

import os
from datetime import datetime
from influxdb_client import InfluxDBClient, Point, WritePrecision
from influxdb_client.client.write_api import SYNCHRONOUS

Connection to InfluxDB

token = “My_InfluxDB_Token”
org = “Tester”
bucket = “trend”
url = “http://localhost:8086”
client = InfluxDBClient(url=url, token=token, org=org)
write_api = client.write_api(write_options=SYNCHRONOUS)

now = datetime.utcnow()

planned_test_execute_date = int(datetime(2024, 7, 1).timestamp())
actual_test_execute_date = int(datetime(2024, 7, 1).timestamp())

point = Point(“History”)
.tag(“status”, “passed”)
.tag(“TestcaseID”, “1”)
.field(“Planned Test execute Date”, planned_test_execute_date)
.field(“Actual test execute Date”, actual_test_execute_date)
.time(now, WritePrecision.S)

write_api.write(bucket=bucket, org=org, record=point)
print(“Einzelner Datenpunkt wurde erfolgreich in die InfluxDB geschrieben.”)

[sowdenraymond]

Can you drop a table view of your data?

[luca13062004]

I inserted actual Date with the UNIX time stamp as a tag & field to then use Group by acutal date in my query. This was my script:

actual_test_execute_date = int(datetime(2024, 4, 25).timestamp())

point = Point(“History”)
.tag(“status”, “passed”)
.tag(“TestcaseID”, “4”)
.tag(“Actual test execute Date”, actual_test_execute_date)
.field(“Planned Test execute Date”, “4/25/2024”)
.field(“Actual test execute Date”, actual_test_execute_date)
.time(now, WritePrecision.S)

This is how my Visualization looks at the moment:

ActualIy I want the amount of test at the y-axis but with the query below the bars are not aligned with the dates on the x-axis.

[luca13062004]

Hey,

there was a change in the data I am able to send to my InfluxDB. Therefore my datapoints are now looking like that:
point = Point(“History”)
.tag(“date”, “2024-07-25”)
.field(“date”, “2024-07-25”)
.field(“cumulative planned test execution”, 45)
.field(“cumulative actual test execution”, 42)
.field(“actual passed”, 34)
.field(“actual failed”, 8) \

This is the data in result:

Now as I am still trying to build a combination of line and bar graphs I am looking for two adaptions to the following visualization where I am using bar graph:

First: I would like to get a line graph into that which shows the planned test execution trend. For the bar graph it would just be the query:

But aslike in time series visualization with the bar graph visualization I could not find an option to override the graph style so that he bar becomes a line.

Second: I want the values for each bar to be aligned horizontal & vertically, but I could not find any setting for that.

Hope someone can help me out, many thanks in advance!

[sowdenraymond]

you can choose to override the line style to bar or line in the timeseries panel as you have already discovered. also no option to align the values yet, there is a github request for this.

How to merge Bar graph and Line Graph into the same panel

Hello, I’m working on my first complex Graph using Grafana and influxdb. thanks in advance for your support I would like to display the Graph in 2 parts, one axe using bar graph (separate bar) with the electric consumption, one axe using lines with the electric cost. I have created 3 queries to get electric consumption and created 3 transform Field, All is working well Here the Graph that I’m able to display [image] I have exported the data in Excel to show what I would like, the axis is…

an apache e-chart might be the best way to go if you dont come right with standard panels

[luca13062004]

Thank you very much for the fast response! I will look out for that.

[luca13062004]

@mikhailvolkov I have followed this youtube guide to use your business charts plug in: Apache ECharts-Panel für Grafana | So erstellen Sie moderne Dashboards in Grafana | ECharts-Tutorial - YouTube

I use Grafana in Combination with Influx DB. Both are running via docker. I want to display the following data:

As visualization I chose a template from apache echarts examples on their websites and pasted the template code into the function section. Then I made the same steps like in their video to get the data of my Influx DB displayed. That is how my script is looking at the moment:

let date =
let planned =
let passed =
let failed =

data.series.map((s) => {
date = s.fields.find((f) => f.name === ‘date’).values.buffer;
planned = s.fields.find((f) => f.name === ‘planned’).values.buffer;
passed = s.fields.find((f) => f.name === ‘passed’).values.buffer;
failed = s.fields.find((f) => f.name === ‘failed’).values.buffer;
});

return {
tooltip: {
trigger: ‘axis’,
axisPointer: {
type: ‘cross’,
crossStyle: {
color: ‘#999’
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: [‘line’, ‘bar’] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: [‘Planned’, ‘Passed’, ‘Failed’]
},
xAxis: [
{
type: ‘category’,
data: date,
axisPointer: {
type: ‘shadow’
}
}
],
yAxis: [
{
type: ‘value’,
name: ‘Count’,
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: ‘{value}’
}
},
],
series: [
{
name: ‘Passed’,
type: ‘bar’,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: passed
},
{
name: ‘failed’,
type: ‘bar’,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: failed
},
{
name: ‘Planned’,
type: ‘line’,
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value;
}
},
data: planned
}
]
};

At the moment I am getting the following error:

As I do not have experience with Java Script I have not found out yet how to initialize the variable data correctly, if that is what’s missing. Or is there something else that I need to change to solve my error?

Thank you very much in advance!

[mikhailvolkov]

@luca13062004 It’s old version of the code which needs to be modified to work with Grafana 11 and latest version of Apache ECharts panel renamed to Business Charts.

• values.buffer should be replace to values in G10 and G11.
• data should be updated to context.panel.data in the latest release.

Please read documentation and blogs where we highlighted the recent updates:

Charts Function | Volkov Labs

[luca13062004]

@mikhailvolkov Thank you very much! Are all available graphs under this link https://echarts.volkovlabs.io/? There I can find 15 visualization with its code. In older youtube videos from your channel there was the recommendation to go to Examples - Apache ECharts , take the JS Code of the visualization you want to build and then paste it to the Charts Function. Then make a few changes and do the data mapping. Is that still possible or is business charts panel limited to the 15 visualization options provided in the first link? I am looking out for a visualization that combines multiple bars and a line graph. Many thanks in advance!

[mikhailvolkov]

@luca13062004 There a lot more specific examples for the selected type if you click on “Click for more”. Alternatively, you can go to the dashboard directly.

Business Charts provides the same functionality as Apache ECharts, there is no limits what you can do.

Business Charts | Volkov Labs