Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Histogram: Elasticsearch histogram panel not graphing data as expected #86811

Open
brucejxz opened this issue Apr 23, 2024 · 5 comments
Open

Comments

@brucejxz
Copy link

brucejxz commented Apr 23, 2024

What happened?

I tried creating a histogram using the Elasticsearch data source, grouped by bytes:

image

This is querying an Elasticsearch 8.13.2 cluster.

The histogram shows 2 series (count and bytes). count seems to be graphing the number of buckets, while bytes is just 1:

image

What did you expect to happen?

I expected that the histogram would show something like this, which was created in Kibana:

image

In fact, the table view in Grafana suggests that the data is returned in the buckets as I would expect, but it's not being graphed correctly for some reason, possibly user error:

image

Did this work before?

Not sure

How do we reproduce it?

  1. Spin up an elasticsearch cluster using docker
  2. Add the sample web log data using the Kibana integrations
  3. Create a histogram grouped by bytes

Is the bug inside a dashboard panel?

Key Value
Panel histogram @ 10.4.2 (22809de)
Grafana 10.4.2 (22809de) // Enterprise
Panel debug snapshot dashboard
{
  "panels": [
    {
      "type": "histogram",
      "title": "Reproduced with embedded data",
      "gridPos": {
        "h": 13,
        "w": 15,
        "x": 0,
        "y": 0
      },
      "datasource": {
        "type": "grafana",
        "uid": "grafana"
      },
      "id": 2,
      "targets": [
        {
          "refId": "A",
          "datasource": {
            "type": "grafana",
            "uid": "grafana"
          },
          "queryType": "snapshot",
          "snapshot": [
            {
              "schema": {
                "refId": "A",
                "fields": [
                  {
                    "name": "bytes",
                    "type": "number",
                    "typeInfo": {
                      "frame": "float64",
                      "nullable": true
                    },
                    "config": {
                      "filterable": true
                    }
                  },
                  {
                    "name": "Count",
                    "type": "number",
                    "typeInfo": {
                      "frame": "float64",
                      "nullable": true
                    },
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    0,
                    1000,
                    2000,
                    3000,
                    4000,
                    5000,
                    6000,
                    7000,
                    8000,
                    9000,
                    10000,
                    11000,
                    12000,
                    13000,
                    14000
                  ],
                  [
                    3,
                    4,
                    6,
                    2,
                    1,
                    2,
                    2,
                    3,
                    3,
                    3,
                    0,
                    0,
                    0,
                    0,
                    1
                  ]
                ]
              }
            }
          ]
        }
      ],
      "fieldConfig": {
        "defaults": {
          "custom": {
            "lineWidth": 1,
            "fillOpacity": 80,
            "gradientMode": "none",
            "hideFrom": {
              "tooltip": false,
              "viz": false,
              "legend": false
            }
          },
          "color": {
            "mode": "palette-classic"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "value": null,
                "color": "green"
              },
              {
                "value": 80,
                "color": "red"
              }
            ]
          }
        },
        "overrides": []
      },
      "options": {
        "legend": {
          "showLegend": true,
          "displayMode": "list",
          "placement": "bottom",
          "calcs": []
        }
      }
    },
    {
      "gridPos": {
        "h": 7,
        "w": 9,
        "x": 15,
        "y": 0
      },
      "id": 5,
      "options": {
        "content": "<table width=\"100%\">\n    <tr>\n      <th width=\"2%\">Panel</th>\n      <td >histogram @ 10.4.2 (22809dea50455ae875624827dd277b17621b4ed4)</td>\n    </tr>\n    <tr>\n      <th>Queries</th>\n      <td>A[elasticsearch]</td>\n    </tr>\n    \n    <tr><th>Data</th><td> 1 frames, 2 fields, 15 rows </td></tr>\n    \n    <tr>\n      <th>Grafana</th>\n      <td>10.4.2 (22809dea50455ae875624827dd277b17621b4ed4) // Enterprise</td>\n    </tr>\n  </table>",
        "mode": "html"
      },
      "title": "Debug info",
      "type": "text"
    },
    {
      "id": 6,
      "title": "Original Panel JSON",
      "type": "text",
      "gridPos": {
        "h": 13,
        "w": 9,
        "x": 15,
        "y": 7
      },
      "options": {
        "content": "{\n  \"type\": \"histogram\",\n  \"title\": \"Panel Title\",\n  \"gridPos\": {\n    \"x\": 0,\n    \"y\": 0,\n    \"w\": 12,\n    \"h\": 8\n  },\n  \"datasource\": {\n    \"uid\": \"cdjmuy71gyha8b\",\n    \"type\": \"elasticsearch\"\n  },\n  \"id\": 1,\n  \"targets\": [\n    {\n      \"datasource\": {\n        \"type\": \"elasticsearch\",\n        \"uid\": \"cdjmuy71gyha8b\"\n      },\n      \"refId\": \"A\",\n      \"query\": \"\",\n      \"alias\": \"\",\n      \"metrics\": [\n        {\n          \"type\": \"count\",\n          \"id\": \"1\"\n        }\n      ],\n      \"bucketAggs\": [\n        {\n          \"id\": \"2\",\n          \"type\": \"histogram\",\n          \"settings\": {\n            \"interval\": \"1000\",\n            \"min_doc_count\": \"0\"\n          },\n          \"field\": \"bytes\"\n        }\n      ],\n      \"timeField\": \"@timestamp\"\n    }\n  ],\n  \"fieldConfig\": {\n    \"defaults\": {\n      \"custom\": {\n        \"lineWidth\": 1,\n        \"fillOpacity\": 80,\n        \"gradientMode\": \"none\",\n        \"hideFrom\": {\n          \"tooltip\": false,\n          \"viz\": false,\n          \"legend\": false\n        }\n      },\n      \"color\": {\n        \"mode\": \"palette-classic\"\n      },\n      \"mappings\": [],\n      \"thresholds\": {\n        \"mode\": \"absolute\",\n        \"steps\": [\n          {\n            \"value\": null,\n            \"color\": \"green\"\n          },\n          {\n            \"value\": 80,\n            \"color\": \"red\"\n          }\n        ]\n      }\n    },\n    \"overrides\": []\n  },\n  \"options\": {\n    \"legend\": {\n      \"showLegend\": true,\n      \"displayMode\": \"list\",\n      \"placement\": \"bottom\",\n      \"calcs\": []\n    }\n  }\n}",
        "mode": "code",
        "code": {
          "language": "json",
          "showLineNumbers": true,
          "showMiniMap": true
        }
      }
    },
    {
      "id": 3,
      "title": "Data from panel above",
      "type": "table",
      "datasource": {
        "type": "datasource",
        "uid": "-- Dashboard --"
      },
      "gridPos": {
        "h": 7,
        "w": 15,
        "x": 0,
        "y": 13
      },
      "options": {
        "showTypeIcons": true
      },
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "-- Dashboard --"
          },
          "panelId": 2,
          "withTransforms": true,
          "refId": "A"
        }
      ]
    }
  ],
  "schemaVersion": 37,
  "title": "Debug: Panel Title // 2024-04-23 22:08:14",
  "tags": [
    "debug",
    "debug-histogram"
  ],
  "time": {
    "from": "2024-04-23T15:08:14.362Z",
    "to": "2024-04-23T21:08:14.362Z"
  }
}

Environment (with versions)?

Grafana: 10.4.2
OS: macOS 14.4
Browser: Safari 17.4

Grafana platform?

Docker

Datasource(s)?

Elasticsearch

@leeoniya
Copy link
Contributor

the default behavior of the histogram panel is to treat the incoming data as raw values, which it then computes a histogram from.

internally, this panel supports a specific data shape for pre-computed histograms that will avoid the re-calculation behavior. the Prometheus datasource, for example, knows how to tag these histogram frames, while other datasources do not. we don't currently expose a way in panel options to manually opt out of histogram (re)calculation, though this is something we should do.

you can try using BarChart or BarGauge to render pre-computed histogram responses until then.

@leeoniya leeoniya changed the title Dashboards: Elasticsearch histogram panel not graphing data as expected Histogram: Elasticsearch histogram panel not graphing data as expected Apr 24, 2024
@brucejxz
Copy link
Author

Hey @leeoniya. Thanks for the quick response. That makes sense. Unfortunately, unless I'm doing something wrong, the workaround doesn't seem to give me what I'm after.

Note that the debug snapshots are from 11.0.0-preview as I was playing around with that version, however, I see the same behaviour in 10.4.2 as well.

Bar chart

image
Key Value
Panel barchart @ 11.0.0-preview
Grafana Grafana v11.0.0-preview (ead392f) // Enterprise
Panel debug snapshot dashboard
{
  "panels": [
    {
      "type": "barchart",
      "title": "Reproduced with embedded data",
      "gridPos": {
        "h": 13,
        "w": 15,
        "x": 0,
        "y": 0
      },
      "datasource": {
        "type": "grafana",
        "uid": "grafana"
      },
      "id": 2,
      "targets": [
        {
          "refId": "A",
          "datasource": {
            "type": "grafana",
            "uid": "grafana"
          },
          "queryType": "snapshot",
          "snapshot": [
            {
              "schema": {
                "refId": "A",
                "fields": [
                  {
                    "name": "bytes",
                    "type": "number",
                    "typeInfo": {
                      "frame": "float64",
                      "nullable": true
                    },
                    "config": {
                      "filterable": true
                    }
                  },
                  {
                    "name": "Count",
                    "type": "number",
                    "typeInfo": {
                      "frame": "float64",
                      "nullable": true
                    },
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    0,
                    1000,
                    2000,
                    3000,
                    4000,
                    5000,
                    6000,
                    7000,
                    8000,
                    9000,
                    10000,
                    11000,
                    12000,
                    13000,
                    14000,
                    15000,
                    16000,
                    17000,
                    18000,
                    19000
                  ],
                  [
                    6,
                    3,
                    3,
                    10,
                    12,
                    9,
                    10,
                    12,
                    7,
                    4,
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    1,
                    2
                  ]
                ]
              }
            }
          ]
        }
      ],
      "fieldConfig": {
        "defaults": {
          "custom": {
            "lineWidth": 1,
            "fillOpacity": 80,
            "gradientMode": "none",
            "axisPlacement": "auto",
            "axisLabel": "",
            "axisColorMode": "text",
            "axisBorderShow": false,
            "scaleDistribution": {
              "type": "linear"
            },
            "axisCenteredZero": false,
            "hideFrom": {
              "tooltip": false,
              "viz": false,
              "legend": false
            },
            "thresholdsStyle": {
              "mode": "off"
            }
          },
          "color": {
            "mode": "palette-classic"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "value": null,
                "color": "green"
              },
              {
                "value": 80,
                "color": "red"
              }
            ]
          }
        },
        "overrides": []
      },
      "pluginVersion": "11.0.0-preview",
      "options": {
        "orientation": "auto",
        "xTickLabelRotation": 0,
        "xTickLabelSpacing": 0,
        "showValue": "auto",
        "stacking": "none",
        "groupWidth": 0.7,
        "barWidth": 0.97,
        "barRadius": 0,
        "fullHighlight": false,
        "tooltip": {
          "mode": "single",
          "sort": "none",
          "maxHeight": 600
        },
        "legend": {
          "showLegend": true,
          "displayMode": "list",
          "placement": "bottom",
          "calcs": []
        }
      }
    },
    {
      "gridPos": {
        "h": 7,
        "w": 9,
        "x": 15,
        "y": 0
      },
      "id": 5,
      "options": {
        "content": "<table width=\"100%\">\n    <tr>\n      <th width=\"2%\">Panel</th>\n      <td >barchart @ 11.0.0-preview</td>\n    </tr>\n    <tr>\n      <th>Queries</th>\n      <td>A[elasticsearch]</td>\n    </tr>\n    \n    <tr><th>Data</th><td> 1 frames, 2 fields, 20 rows </td></tr>\n    \n    <tr>\n      <th>Grafana</th>\n      <td>Grafana v11.0.0-preview (ead392f6cb) // Enterprise</td>\n    </tr>\n  </table>",
        "mode": "html"
      },
      "title": "Debug info",
      "type": "text"
    },
    {
      "id": 6,
      "title": "Original Panel JSON",
      "type": "text",
      "gridPos": {
        "h": 13,
        "w": 9,
        "x": 15,
        "y": 7
      },
      "options": {
        "content": "{\n  \"type\": \"barchart\",\n  \"title\": \"Panel Title\",\n  \"gridPos\": {\n    \"x\": 0,\n    \"y\": 0,\n    \"w\": 12,\n    \"h\": 8\n  },\n  \"datasource\": {\n    \"uid\": \"PB52D99AF4966063C\",\n    \"type\": \"elasticsearch\"\n  },\n  \"id\": 1,\n  \"targets\": [\n    {\n      \"datasource\": {\n        \"type\": \"elasticsearch\",\n        \"uid\": \"PB52D99AF4966063C\"\n      },\n      \"refId\": \"A\",\n      \"query\": \"\",\n      \"alias\": \"\",\n      \"metrics\": [\n        {\n          \"type\": \"count\",\n          \"id\": \"1\"\n        }\n      ],\n      \"bucketAggs\": [\n        {\n          \"id\": \"2\",\n          \"type\": \"histogram\",\n          \"settings\": {\n            \"interval\": \"1000\",\n            \"min_doc_count\": \"0\"\n          },\n          \"field\": \"bytes\"\n        }\n      ],\n      \"timeField\": \"@timestamp\"\n    }\n  ],\n  \"fieldConfig\": {\n    \"defaults\": {\n      \"custom\": {\n        \"lineWidth\": 1,\n        \"fillOpacity\": 80,\n        \"gradientMode\": \"none\",\n        \"axisPlacement\": \"auto\",\n        \"axisLabel\": \"\",\n        \"axisColorMode\": \"text\",\n        \"axisBorderShow\": false,\n        \"scaleDistribution\": {\n          \"type\": \"linear\"\n        },\n        \"axisCenteredZero\": false,\n        \"hideFrom\": {\n          \"tooltip\": false,\n          \"viz\": false,\n          \"legend\": false\n        },\n        \"thresholdsStyle\": {\n          \"mode\": \"off\"\n        }\n      },\n      \"color\": {\n        \"mode\": \"palette-classic\"\n      },\n      \"mappings\": [],\n      \"thresholds\": {\n        \"mode\": \"absolute\",\n        \"steps\": [\n          {\n            \"value\": null,\n            \"color\": \"green\"\n          },\n          {\n            \"value\": 80,\n            \"color\": \"red\"\n          }\n        ]\n      }\n    },\n    \"overrides\": []\n  },\n  \"pluginVersion\": \"11.0.0-preview\",\n  \"options\": {\n    \"orientation\": \"auto\",\n    \"xTickLabelRotation\": 0,\n    \"xTickLabelSpacing\": 0,\n    \"showValue\": \"auto\",\n    \"stacking\": \"none\",\n    \"groupWidth\": 0.7,\n    \"barWidth\": 0.97,\n    \"barRadius\": 0,\n    \"fullHighlight\": false,\n    \"tooltip\": {\n      \"mode\": \"single\",\n      \"sort\": \"none\",\n      \"maxHeight\": 600\n    },\n    \"legend\": {\n      \"showLegend\": true,\n      \"displayMode\": \"list\",\n      \"placement\": \"bottom\",\n      \"calcs\": []\n    }\n  }\n}",
        "mode": "code",
        "code": {
          "language": "json",
          "showLineNumbers": true,
          "showMiniMap": true
        }
      }
    },
    {
      "id": 3,
      "title": "Data from panel above",
      "type": "table",
      "datasource": {
        "type": "datasource",
        "uid": "-- Dashboard --"
      },
      "gridPos": {
        "h": 7,
        "w": 15,
        "x": 0,
        "y": 13
      },
      "options": {
        "showTypeIcons": true
      },
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "-- Dashboard --"
          },
          "panelId": 2,
          "withTransforms": true,
          "refId": "A"
        }
      ]
    }
  ],
  "schemaVersion": 37,
  "title": "Debug: Panel Title // 2024-04-24 20:52:17",
  "tags": [
    "debug",
    "debug-barchart"
  ],
  "time": {
    "from": "2024-04-24T13:52:17.599Z",
    "to": "2024-04-24T19:52:17.599Z"
  }
}

Bar gauge

image
Key Value
Panel bargauge @ 11.0.0-preview
Grafana Grafana v11.0.0-preview (ead392f) // Enterprise
Panel debug snapshot dashboard
{
  "panels": [
    {
      "type": "bargauge",
      "title": "Reproduced with embedded data",
      "gridPos": {
        "h": 13,
        "w": 15,
        "x": 0,
        "y": 0
      },
      "datasource": {
        "type": "grafana",
        "uid": "grafana"
      },
      "id": 2,
      "targets": [
        {
          "refId": "A",
          "datasource": {
            "type": "grafana",
            "uid": "grafana"
          },
          "queryType": "snapshot",
          "snapshot": [
            {
              "schema": {
                "refId": "A",
                "fields": [
                  {
                    "name": "bytes",
                    "type": "number",
                    "typeInfo": {
                      "frame": "float64",
                      "nullable": true
                    },
                    "config": {
                      "filterable": true
                    }
                  },
                  {
                    "name": "Count",
                    "type": "number",
                    "typeInfo": {
                      "frame": "float64",
                      "nullable": true
                    },
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    0,
                    1000,
                    2000,
                    3000,
                    4000,
                    5000,
                    6000,
                    7000,
                    8000,
                    9000,
                    10000,
                    11000,
                    12000,
                    13000,
                    14000,
                    15000,
                    16000,
                    17000,
                    18000,
                    19000
                  ],
                  [
                    6,
                    3,
                    3,
                    10,
                    12,
                    9,
                    10,
                    12,
                    7,
                    4,
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    1,
                    2
                  ]
                ]
              }
            }
          ]
        }
      ],
      "fieldConfig": {
        "defaults": {
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "value": null,
                "color": "green"
              },
              {
                "value": 80,
                "color": "red"
              }
            ]
          },
          "color": {
            "mode": "thresholds"
          }
        },
        "overrides": []
      },
      "pluginVersion": "11.0.0-preview",
      "options": {
        "reduceOptions": {
          "values": false,
          "calcs": [
            "lastNotNull"
          ],
          "fields": ""
        },
        "orientation": "auto",
        "displayMode": "gradient",
        "valueMode": "color",
        "namePlacement": "auto",
        "showUnfilled": true,
        "sizing": "auto",
        "minVizWidth": 8,
        "minVizHeight": 16,
        "maxVizHeight": 300
      }
    },
    {
      "gridPos": {
        "h": 7,
        "w": 9,
        "x": 15,
        "y": 0
      },
      "id": 5,
      "options": {
        "content": "<table width=\"100%\">\n    <tr>\n      <th width=\"2%\">Panel</th>\n      <td >bargauge @ 11.0.0-preview</td>\n    </tr>\n    <tr>\n      <th>Queries</th>\n      <td>A[elasticsearch]</td>\n    </tr>\n    \n    <tr><th>Data</th><td> 1 frames, 2 fields, 20 rows </td></tr>\n    \n    <tr>\n      <th>Grafana</th>\n      <td>Grafana v11.0.0-preview (ead392f6cb) // Enterprise</td>\n    </tr>\n  </table>",
        "mode": "html"
      },
      "title": "Debug info",
      "type": "text"
    },
    {
      "id": 6,
      "title": "Original Panel JSON",
      "type": "text",
      "gridPos": {
        "h": 13,
        "w": 9,
        "x": 15,
        "y": 7
      },
      "options": {
        "content": "{\n  \"type\": \"bargauge\",\n  \"title\": \"Panel Title\",\n  \"gridPos\": {\n    \"x\": 0,\n    \"y\": 0,\n    \"w\": 12,\n    \"h\": 8\n  },\n  \"datasource\": {\n    \"uid\": \"PB52D99AF4966063C\",\n    \"type\": \"elasticsearch\"\n  },\n  \"id\": 1,\n  \"targets\": [\n    {\n      \"datasource\": {\n        \"type\": \"elasticsearch\",\n        \"uid\": \"PB52D99AF4966063C\"\n      },\n      \"refId\": \"A\",\n      \"query\": \"\",\n      \"alias\": \"\",\n      \"metrics\": [\n        {\n          \"type\": \"count\",\n          \"id\": \"1\"\n        }\n      ],\n      \"bucketAggs\": [\n        {\n          \"id\": \"2\",\n          \"type\": \"histogram\",\n          \"settings\": {\n            \"interval\": \"1000\",\n            \"min_doc_count\": \"0\"\n          },\n          \"field\": \"bytes\"\n        }\n      ],\n      \"timeField\": \"@timestamp\"\n    }\n  ],\n  \"fieldConfig\": {\n    \"defaults\": {\n      \"mappings\": [],\n      \"thresholds\": {\n        \"mode\": \"absolute\",\n        \"steps\": [\n          {\n            \"value\": null,\n            \"color\": \"green\"\n          },\n          {\n            \"value\": 80,\n            \"color\": \"red\"\n          }\n        ]\n      },\n      \"color\": {\n        \"mode\": \"thresholds\"\n      }\n    },\n    \"overrides\": []\n  },\n  \"pluginVersion\": \"11.0.0-preview\",\n  \"options\": {\n    \"reduceOptions\": {\n      \"values\": false,\n      \"calcs\": [\n        \"lastNotNull\"\n      ],\n      \"fields\": \"\"\n    },\n    \"orientation\": \"auto\",\n    \"displayMode\": \"gradient\",\n    \"valueMode\": \"color\",\n    \"namePlacement\": \"auto\",\n    \"showUnfilled\": true,\n    \"sizing\": \"auto\",\n    \"minVizWidth\": 8,\n    \"minVizHeight\": 16,\n    \"maxVizHeight\": 300\n  }\n}",
        "mode": "code",
        "code": {
          "language": "json",
          "showLineNumbers": true,
          "showMiniMap": true
        }
      }
    },
    {
      "id": 3,
      "title": "Data from panel above",
      "type": "table",
      "datasource": {
        "type": "datasource",
        "uid": "-- Dashboard --"
      },
      "gridPos": {
        "h": 7,
        "w": 15,
        "x": 0,
        "y": 13
      },
      "options": {
        "showTypeIcons": true
      },
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "-- Dashboard --"
          },
          "panelId": 2,
          "withTransforms": true,
          "refId": "A"
        }
      ]
    }
  ],
  "schemaVersion": 37,
  "title": "Debug: Panel Title // 2024-04-24 20:53:25",
  "tags": [
    "debug",
    "debug-bargauge"
  ],
  "time": {
    "from": "2024-04-24T13:53:25.174Z",
    "to": "2024-04-24T19:53:25.174Z"
  }
}

XY chart

This kind of works, but I want bars not points:

image
Key Value
Panel xychart @ 11.0.0-preview
Grafana Grafana v11.0.0-preview (ead392f) // Enterprise
Panel debug snapshot dashboard
{
  "panels": [
    {
      "type": "xychart",
      "title": "Reproduced with embedded data",
      "gridPos": {
        "h": 13,
        "w": 15,
        "x": 0,
        "y": 0
      },
      "datasource": {
        "type": "grafana",
        "uid": "grafana"
      },
      "id": 2,
      "targets": [
        {
          "refId": "A",
          "datasource": {
            "type": "grafana",
            "uid": "grafana"
          },
          "queryType": "snapshot",
          "snapshot": [
            {
              "schema": {
                "refId": "A",
                "fields": [
                  {
                    "name": "bytes",
                    "type": "number",
                    "typeInfo": {
                      "frame": "float64",
                      "nullable": true
                    },
                    "config": {
                      "filterable": true
                    }
                  },
                  {
                    "name": "Count",
                    "type": "number",
                    "typeInfo": {
                      "frame": "float64",
                      "nullable": true
                    },
                    "config": {}
                  }
                ]
              },
              "data": {
                "values": [
                  [
                    0,
                    1000,
                    2000,
                    3000,
                    4000,
                    5000,
                    6000,
                    7000,
                    8000,
                    9000,
                    10000,
                    11000,
                    12000,
                    13000,
                    14000,
                    15000,
                    16000,
                    17000,
                    18000,
                    19000
                  ],
                  [
                    6,
                    3,
                    3,
                    10,
                    12,
                    9,
                    10,
                    12,
                    7,
                    4,
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    0,
                    1,
                    2
                  ]
                ]
              }
            }
          ]
        }
      ],
      "fieldConfig": {
        "defaults": {
          "custom": {
            "show": "points",
            "pointSize": {
              "fixed": 5
            },
            "axisPlacement": "auto",
            "axisLabel": "",
            "axisColorMode": "text",
            "axisBorderShow": false,
            "scaleDistribution": {
              "type": "linear"
            },
            "axisCenteredZero": false,
            "hideFrom": {
              "tooltip": false,
              "viz": false,
              "legend": false
            }
          },
          "color": {
            "mode": "palette-classic"
          },
          "mappings": [],
          "thresholds": {
            "mode": "absolute",
            "steps": [
              {
                "value": null,
                "color": "green"
              },
              {
                "value": 80,
                "color": "red"
              }
            ]
          }
        },
        "overrides": []
      },
      "pluginVersion": "11.0.0-preview",
      "options": {
        "seriesMapping": "auto",
        "series": [],
        "tooltip": {
          "mode": "single",
          "sort": "none",
          "maxHeight": 600
        },
        "legend": {
          "showLegend": true,
          "displayMode": "list",
          "placement": "bottom",
          "calcs": []
        }
      }
    },
    {
      "gridPos": {
        "h": 7,
        "w": 9,
        "x": 15,
        "y": 0
      },
      "id": 5,
      "options": {
        "content": "<table width=\"100%\">\n    <tr>\n      <th width=\"2%\">Panel</th>\n      <td >xychart @ 11.0.0-preview</td>\n    </tr>\n    <tr>\n      <th>Queries</th>\n      <td>A[elasticsearch]</td>\n    </tr>\n    \n    <tr><th>Data</th><td> 1 frames, 2 fields, 20 rows </td></tr>\n    \n    <tr>\n      <th>Grafana</th>\n      <td>Grafana v11.0.0-preview (ead392f6cb) // Enterprise</td>\n    </tr>\n  </table>",
        "mode": "html"
      },
      "title": "Debug info",
      "type": "text"
    },
    {
      "id": 6,
      "title": "Original Panel JSON",
      "type": "text",
      "gridPos": {
        "h": 13,
        "w": 9,
        "x": 15,
        "y": 7
      },
      "options": {
        "content": "{\n  \"type\": \"xychart\",\n  \"title\": \"Panel Title\",\n  \"gridPos\": {\n    \"x\": 0,\n    \"y\": 0,\n    \"w\": 12,\n    \"h\": 8\n  },\n  \"datasource\": {\n    \"uid\": \"PB52D99AF4966063C\",\n    \"type\": \"elasticsearch\"\n  },\n  \"id\": 1,\n  \"targets\": [\n    {\n      \"datasource\": {\n        \"type\": \"elasticsearch\",\n        \"uid\": \"PB52D99AF4966063C\"\n      },\n      \"refId\": \"A\",\n      \"query\": \"\",\n      \"alias\": \"\",\n      \"metrics\": [\n        {\n          \"type\": \"count\",\n          \"id\": \"1\"\n        }\n      ],\n      \"bucketAggs\": [\n        {\n          \"id\": \"2\",\n          \"type\": \"histogram\",\n          \"settings\": {\n            \"interval\": \"1000\",\n            \"min_doc_count\": \"0\"\n          },\n          \"field\": \"bytes\"\n        }\n      ],\n      \"timeField\": \"@timestamp\"\n    }\n  ],\n  \"fieldConfig\": {\n    \"defaults\": {\n      \"custom\": {\n        \"show\": \"points\",\n        \"pointSize\": {\n          \"fixed\": 5\n        },\n        \"axisPlacement\": \"auto\",\n        \"axisLabel\": \"\",\n        \"axisColorMode\": \"text\",\n        \"axisBorderShow\": false,\n        \"scaleDistribution\": {\n          \"type\": \"linear\"\n        },\n        \"axisCenteredZero\": false,\n        \"hideFrom\": {\n          \"tooltip\": false,\n          \"viz\": false,\n          \"legend\": false\n        }\n      },\n      \"color\": {\n        \"mode\": \"palette-classic\"\n      },\n      \"mappings\": [],\n      \"thresholds\": {\n        \"mode\": \"absolute\",\n        \"steps\": [\n          {\n            \"value\": null,\n            \"color\": \"green\"\n          },\n          {\n            \"value\": 80,\n            \"color\": \"red\"\n          }\n        ]\n      }\n    },\n    \"overrides\": []\n  },\n  \"pluginVersion\": \"11.0.0-preview\",\n  \"options\": {\n    \"seriesMapping\": \"auto\",\n    \"series\": [],\n    \"tooltip\": {\n      \"mode\": \"single\",\n      \"sort\": \"none\",\n      \"maxHeight\": 600\n    },\n    \"legend\": {\n      \"showLegend\": true,\n      \"displayMode\": \"list\",\n      \"placement\": \"bottom\",\n      \"calcs\": []\n    }\n  }\n}",
        "mode": "code",
        "code": {
          "language": "json",
          "showLineNumbers": true,
          "showMiniMap": true
        }
      }
    },
    {
      "id": 3,
      "title": "Data from panel above",
      "type": "table",
      "datasource": {
        "type": "datasource",
        "uid": "-- Dashboard --"
      },
      "gridPos": {
        "h": 7,
        "w": 15,
        "x": 0,
        "y": 13
      },
      "options": {
        "showTypeIcons": true
      },
      "targets": [
        {
          "datasource": {
            "type": "datasource",
            "uid": "-- Dashboard --"
          },
          "panelId": 2,
          "withTransforms": true,
          "refId": "A"
        }
      ]
    }
  ],
  "schemaVersion": 37,
  "title": "Debug: Panel Title // 2024-04-24 20:53:52",
  "tags": [
    "debug",
    "debug-xychart"
  ],
  "time": {
    "from": "2024-04-24T13:53:52.960Z",
    "to": "2024-04-24T19:53:52.960Z"
  }
}

@leeoniya
Copy link
Contributor

BarChart should work. just convert bytes to a string using a Transformation:

image

@brucejxz
Copy link
Author

Ah, of course. Thank you so much @leeoniya 👍

It would be great if this workaround was documented or, even better, not required.

@leeoniya
Copy link
Contributor

leeoniya commented Apr 26, 2024

It would be great if this workaround was documented

we don't want workarounds documented :D, we need to make Histogram work for these use cases.

or, even better, not required.

bar charts have text labels on the x axis that are centered on the bars. and these labels cannot usually be skipped since they represent categories or groups of things.

https://www.google.com/search?q=bar+chart&udm=2

histograms have numeric x ticks that can be skipped and are at the bar edges (buckets).

the differences are important, which is why we have separate panels for them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants