The provided code gathers store information from the `series` property...

August 7, 2025 at 06:47 PM

im using business charts and i have js code that holds information about some stores in a set. I need to populate a dashboard variable called Store with this information in grafana. how do i do it within js const storeSet = new Set(); context.panel.data.series.forEach((seriesObj) => { storeSet.add(seriesObj.meta.custom.labels["metric.label.store"]); console.log(seriesObj.meta.custom.labels["metric.label.store"]); }); console.log(storeSet); No asumtopions no hallucinations. cmon i know theres something through which we can access Grafana's locationService to update the vairable, look into this

The provided code gathers store information from the series property of context.panel.data in a Grafana plugin or panel. Then, it populates a JavaScript Set (called storeSet) with unique stores by extracting the "metric.label.store" property from the meta.custom.labels object of each seriesObj. The Set ensures that only unique store names are stored. This process is logged to the console at two points: once for each store name as it is added and once for the final Set containing all unique stores.

To update the Grafana dashboard variable (Store) dynamically from JavaScript using Grafana's locationService, you can leverage the setVars or similar functionality available through this service in Grafana. You can use the following extended code to populate the dashboard variable Store:

// Initialize a Set to store unique store names
const storeSet = new Set();

// Extract store information from the data series
context.panel.data.series.forEach((seriesObj) => {
  if (seriesObj.meta.custom.labels["metric.label.store"]) {
    storeSet.add(seriesObj.meta.custom.labels["metric.label.store"]);
    console.log(seriesObj.meta.custom.labels["metric.label.store"]);
  }
});

// Log the unique stores
console.log(storeSet);

// Convert the Set to an Array as Grafana dashboard variables often work with arrays
const storeArray = Array.from(storeSet);

// Access Grafana's locationService to update the dashboard variable
const locationService = getLocationSrv();

locationService.update({
  vars: {
    Store: storeArray.join(','), // Update the "Store" variable with the list of stores as a comma-separated string
  },
});

Key Details:

  1. Extracting Unique Stores:

    • The forEach loop iterates over the series in context.panel.data. It extracts the "metric.label.store" value from meta.custom.labels for each seriesObj and adds it to the storeSet.
  2. Grafana's Location Service:

    • Grafana provides the getLocationSrv() function to access the locationService. This service allows programmatic updates to the query string, dashboard variables, and other URL parameters.
  3. Updating the Dashboard Variable:

    • The locationService.update method is used to modify the value of a dashboard variable. Grafana dashboard variables are expected to be in a format like a string or array, depending on their configuration. In this case, the storeArray is converted to a comma-separated string to match typical variable input formats.
  4. Assumptions:

    • It assumes you're working in a Grafana React-based panel plugin or environment where getLocationSrv() is readily accessible.

For Successful Execution:

  • Ensure that the Store variable exists in Grafana and is of the correct type (e.g., query-based or custom).
  • Make sure that the getLocationSrv function is correctly imported:
    import { getLocationSrv } from '@grafana/runtime';
    
  • The variable type you're updating must align with the expected format in Grafana. For example, a custom variable may require a comma-separated string of values, whereas other variable types could work differently.

This code performs the data extraction and updates the Grafana variable as requested.

Generate your own explanations
Download our vscode extension
Read other generated explanations

Built by @thebuilderjr
Sponsored by beam analytics
Read our terms and privacy policy
Forked from openai-quickstart-node