Adjusting Grafana v11.1.0 Time Range with Business Charts (SQL Server)

Grafana Plugin Development
1

Hello everyone,

I am using Grafana v11.1.0 with SQL Server as my data source, and I would like to know if it is possible to make my Business Charts dynamically adapt to the time range selected at the top of the Grafana dashboard.

Currently, when the dashboard loads without zooming, the numbers overlap because the time interval is too large, making the data unreadable.

If direct integration with Grafana’s time range is not possible, is there a way to configure Business Charts to handle this better? For example, adjusting the interval dynamically based on the selected time range?

Here is a screenshot of the current display

image
image1158×865 173 KB

Any suggestions or workarounds would be greatly appreciated.

Thanks in advance!

2

check out the following

Just grab the out of the box grafana date time variables

3

Here is my current implementation for the xAxis and dataZoom configuration:

xAxis: [
  {
    type: "time",
    axisTick: { show: true, alignWithLabel: true },
    axisLabel: {
      rotate: 45,
      formatter: function (value) {
        const date = new Date(value);
        return date.toLocaleDateString("fr-FR", { month: "short", year: "numeric" });
      }
    },
    min: function (value) {
      return context.timeRange ? context.timeRange.from.valueOf() : value.min;
    },
    max: function (value) {
      return context.timeRange ? context.timeRange.to.valueOf() : value.max;
    }
  }
],
dataZoom: [
  {
    type: 'slider',
    show: true,
    xAxisIndex: [0],
    startValue: context.timeRange ? context.timeRange.from.valueOf() : undefined,
    endValue: context.timeRange ? context.timeRange.to.valueOf() : undefined,
    height: 20,
    bottom: 10,
    backgroundColor: '#e6e6e6',
    fillerColor: 'rgba(50, 115, 220, 0.2)',
    borderColor: '#ccc',
    handleStyle: {
      color: 'rgb(50, 115, 220)',
      borderColor: 'rgb(50, 115, 220)'
    },
    textStyle: { color: '#333' },
    labelFormatter: function (value) {
      const date = new Date(value);
      return date.toLocaleDateString();
    }
  },
  {
    type: 'inside',
    xAxisIndex: [0],
    startValue: context.timeRange ? context.timeRange.from.valueOf() : undefined,
    endValue: context.timeRange ? context.timeRange.to.valueOf() : undefined
  }
]

However, my chart is still not syncing with the global time range from Grafana. The data points are not adjusting dynamically when I change the time range at the top of the dashboard.
Did I miss something? Is there any additional configuration needed to properly link the chart with Grafana’s time range?

4

I am not seeing where you are using the $__from and $__to variables linked on my previous post