Skip to content

xyChart: not behaving like dashboard version / possible bugs #1246

@Zamuroy

Description

@Zamuroy

xyChart refuses to work with more than 1 query:

Description:
In the normal dashboard you can add multiple queries and use either auto mapping or manual mapping to show them all in the chart. In scenes you can only use auto mapping mode and it only shows/detects the first query. Mapping mode manual breaks the chart (showing "Err").
This issue also prevents the "Trendline" transformation from working with the chart because it adds the result as a new frame, which will not be shown.

Image
Image

  • Mapping mode auto - dashboard version -> can add multiple queries and all of them will be detected and shown in the chart
  • Mapping mode manual - dashboard version -> can add multiple queries, configure the chart accordingly and all of them will be shown in the chart
  • Scenes using PanelBuilders.xychart() in mapping mode auto -> only the first query will be detected and shown in the chart
  • Scenes using VizPanel directly to configure xychart in mapping mode auto -> only the first query will be detected and shown in the chart
  • Scenes using PanelBuilders.xychart() in mapping mode manual -> chart goes into error mode.
  • Scenes using VizPanel directly to configure xychart in mapping mode manual -> chart goes into error mode.

Data used for testing looks like this:

age,height
14,150
8,125
45,178
32,165...

Configs/Code I used for testing:

Auto mode:

PanelBuilders.xychart()
      .setTitle("Test")
      .setData(testData)
      .setOption('mapping', SeriesMapping.Auto).build()
const testData = new SceneQueryRunner({
    datasource: TESTDATASOURCE_REF,
    queries: [
      { refId: 'A', scenarioId: 'csv_content', csvContent: ageDataGroupA },
      { refId: 'B', scenarioId: 'csv_content', csvContent: ageDataGroupB }
    ],
  });

Manual mode (even 1 query does not work, so maybe I am doing the config wrong?):

PanelBuilders.xychart()
      .setTitle("Test")
      .setData(testData)
      .setOption('mapping', SeriesMapping.Manual)
      .setOption('series', [{
        frame: {
          matcher: {
            id: 'byIndex',
            options: 0
          }
        },
        x: {
          matcher: {
            id: 'byName',
            options: 'age'
          }
        },
        y: {
          matcher: {
            id: 'byName',
            options: 'height'
          }
        }
      }]).build()

This is the same config that can be found in the json when exporting the normal dashboard version.
I also tried matching be refId and some other things, nothing I tried made manual mode work. Am I missing something here?
When trying direct config of a VizPanel to show the xychart I also used the config found in the export json but it behaves the same way the PanelBuilders way does.
I also confirmed that the data is correct by showing it in a table panel.

If I am doing something wrong here I would appreciate somebody telling me about it.

Edit: Version Infos:
"@grafana/data": "12.1.1",
"@grafana/runtime": "12.1.1",
"@grafana/scenes": "6.32.0",
"@grafana/schema": "12.1.1",
"@grafana/ui": "12.1.1",

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions