search

grafana / piechart-panel

Pie Chart Panel Plugin
MIT License
151 stars 101 forks source link

TypeError: this.datapoints is undefined #217

Open qarmin opened 4 years ago

qarmin commented 4 years ago

I just selected pie chart and set "Group by" to Terms and "select field" to source and then Grafana crashes and print this stacktrace

TypeError: this.datapoints is undefined

    in t
    in div
    in div
    in r
    in l
    in div
    in div
    in div
    in t
    in t
    in div
    in t
    in t
    in div
    in div
    in t
    in Connect(t)
    in div
    in t
    in div
    in e
    in DraggableCore
    in e
    in div
    in ReactGridLayout
    in Unknown
    in SizeMeReferenceWrapper
    in SizeMeRenderer(Component)
    in SizeMe(Component)
    in e
    in div
    in div
    in div
    in t
    in t
    in div
    in div
    in e
    in Connect(e)
    in Suspense
    in t
    in Unknown
    in d
    in Unknown
    in Unknown
    in t
    in t
    in a

This is stacktrace from comments from #202, which seems that is different issue like motoko89 issue

J5lx commented 4 years ago

I, too, get this error message when grouping by terms, though my stracktrace looks a bit different:

TypeError: this.datapoints is undefined

    in t
    in div
    in t
    in div
    in r
    in f
    in div
    in div
    in div
    in e
    in t
    in div
    in t
    in t
    in div
    in div
    in t
    in p
    in div
    in t
    in p
    in div
    in o
    in DraggableCore
    in t
    in div
    in ReactGridLayout
    in Unknown
    in SizeMeReferenceWrapper
    in SizeMeRenderer(Component)
    in SizeMe(Component)
    in t
    in div
    in div
    in div
    in e
    in t
    in div
    in div
    in t
    in p
    in n
    in Unknown
    in t
    in Unknown
    in h
    in Unknown
    in Unknown
    in t
    in t
    in h

I'm using version 1.4.0 of the plugin in Grafana 6.7.2, running on an up-to-date Arch Linux system. My browser is Firefox 74.0, also on Arch Linux. This is 100% reproducible for me, I can write up exact instructions when I have more time.

bacherol commented 4 years ago

Hey.

Try using Group by term + Timestamp. Like this one:

Screen Shot 2020-04-22 at 12 31 32
Berbe commented 3 years ago

System information

Error

Same error with a different stacktrace in browser console.

TypeError: this.datapoints is undefined ```JavaScript TypeError: this.datapoints is undefined value time_series2.ts:359 e time_series2.ts:134 seriesHandler piechart_ctrl.ts:103 onDataReceived piechart_ctrl.ts:97 emit index.js:181 value emitter.ts:29 value QueryEditorRow.tsx:320 value QueryEditorRow.tsx:120 React 13 mc unstable_runWithPriority Wo gc ic Xo unstable_runWithPriority Wo Xo Yo ec enqueueSetState setState value QueriesTab.tsx:96 next QueriesTab.tsx:75 RxJS 8 __tryOrUnsub next _next next _next next next nextInfiniteTimeWindow next PanelQueryRunner.ts:195 RxJS 21 __tryOrUnsub next _next next notifyNext _next next _next next next _next next _next next _next next _next next _next next l react-dom.production.min.js:196:194 React 17 value QueriesTab.tsx:96 next QueriesTab.tsx:75 RxJS 8 next PanelQueryRunner.ts:195 RxJS 21 ```

Steps to reproduce

  1. Create a Pie Chart visualisation
  2. Use an Elasticsearch source
  3. Change the Metric aggregation from the default Count to Logs

Grafana v7.3.1 - Steps to reproduce

  1. Create a graph visualisation
  2. Use an Elasticsearch source
  3. Change Group by to Terms, select an available term (indexed, to work) and change Order by to Doc Count
  4. Switch the visualisation to Pie Chart
    Boom
TypeError: this.datapoints is undefined
    value time_series2.ts:359
    e time_series2.ts:134
    seriesHandler piechart_ctrl.ts:103
    onDataReceived piechart_ctrl.ts:97
    emit index.js:181
    value emitter.ts:29
    value QueryEditorRow.tsx:320
    value QueryEditorRow.tsx:120
    React 13
        mc
        unstable_runWithPriority
        Wo
        gc
        ic
        Xo
        unstable_runWithPriority
        Wo
        Xo
        Yo
        ec
        enqueueSetState
        setState
    value QueriesTab.tsx:96
    next QueriesTab.tsx:75
    RxJS 19
        __tryOrUnsub
        next
        _next
        next
        _next
        next
        notifyNext
        _next
        next
        n
        _trySubscribe
        subscribe
        s
        _innerSub
        _tryNext
        _next
        next
        next
        nextInfiniteTimeWindow
    next PanelQueryRunner.ts:203
    RxJS 21
        __tryOrUnsub
        next
        _next
        next
        notifyNext
        _next
        next
        _next
        next
        next
        _next
        next
        _next
        next
        _next
        next
        _next
        next
        _next
        next
        l
react-dom.production.min.js:196:194
    React 17
        fu
        callback
        Oi
        mi
        mc
        unstable_runWithPriority
        Wo
        gc
        ic
        Xo
        unstable_runWithPriority
        Wo
        Xo
        Yo
        ec
        enqueueSetState
        setState
    value QueriesTab.tsx:96
    next QueriesTab.tsx:75
    RxJS 19
        __tryOrUnsub
        next
        _next
        next
        _next
        next
        notifyNext
        _next
        next
        n
        _trySubscribe
        subscribe
        s
        _innerSub
        _tryNext
        _next
        next
        next
        nextInfiniteTimeWindow
    next PanelQueryRunner.ts:203
    RxJS 21
        __tryOrUnsub
        next
        _next
        next
        notifyNext
        _next
        next
        _next
        next
        next
        _next
        next
        _next
        next
        _next
        next
        _next
        next
        _next
        next
        l
DannyArr commented 3 years ago

I'm having this issue when attempting to use an azure log analytics query, using Grafana 7.3.5 with the Pie Chart plugin 1.6.1. Example query:

datatable(name:string, value:int)[ "thing1",100, "thing2",50 ] | extend timestamp = datetime("01-01-2020")

Getting the error: "Cannot read property 'length' of undefined"

Dashboard JSON:

{ "annotations": { "list": [ { "builtIn": 1, "datasource": "-- Grafana --", "enable": true, "hide": true, "iconColor": "rgba(0, 211, 255, 1)", "name": "Annotations & Alerts", "type": "dashboard" } ] }, "editable": true, "gnetId": null, "graphTooltip": 0, "id": 10, "links": [], "panels": [ { "datasource": "DIGITAL-UAT", "fieldConfig": { "defaults": { "custom": { "align": null, "filterable": false }, "mappings": [], "thresholds": { "mode": "absolute", "steps": [ { "color": "green", "value": null }, { "color": "red", "value": 80 } ] } }, "overrides": [] }, "gridPos": { "h": 9, "w": 12, "x": 0, "y": 0 }, "id": 2, "options": { "showHeader": true }, "pluginVersion": "7.3.5", "targets": [ { "appInsights": { "dimension": [], "metricName": "select", "timeGrain": "auto" }, "azureLogAnalytics": { "query": "datatable(name:string, value:int)[\n\"thing1\",100,\n\"thing2\",50\n]\n| extend timestamp = datetime(\"01-01-2020\")", "resultFormat": "time_series", "workspace": "ace3f7fe-ff58-40e0-a15e-cc51e5cd5abe" }, "azureMonitor": { "aggOptions": [], "dimensionFilter": "*", "dimensionFilters": [], "metricDefinition": "select", "metricName": "select", "metricNamespace": "select", "resourceGroup": "select", "resourceName": "select", "timeGrain": "auto", "timeGrains": [], "top": "10" }, "insightsAnalytics": { "query": "", "resultFormat": "time_series" }, "queryType": "Azure Log Analytics", "refId": "A", "subscription": "8aae5d53-f263-479e-959c-0c67619ac334" } ], "timeFrom": null, "timeShift": null, "title": "Panel Title", "type": "table" } ], "schemaVersion": 26, "style": "dark", "tags": [], "templating": { "list": [] }, "time": { "from": "now-6h", "to": "now" }, "timepicker": {}, "timezone": "", "title": "Pie Chart", "uid": "xTROzP1Mk", "version": 2 }

When switching to something like datatable or gauge, it works fine. I added the datetime column in the query as I was reading that it apparently needs a time series, but it fails without one in the same way as well.

mpowelltech commented 3 years ago

Same here with a MSSQL Query using a Group By to get a count. (Not dealing with Any timeseries data.)

Table looks fine: image But same this.datapoints is undefined error as soon as I try to display that as a Pie Chart.

albertocalderari commented 3 years ago

Hi guys, same problem here from BQ, is there a resolution coming any time soon? Alternatively a workaround would be appreciated.

My query is:


case cat.category
   when "NON_PII" then "NON_PII"
   else "PII"
  end AS metric,

  COUNT(*)/total.cnt*100 Percentage
FROM
  `${project_id}.${environment_long}_je_datacontext.piifinderinstrumentation_all_*` cat
JOIN (
  SELECT
    COUNT(*) cnt
  FROM
    `${project_id}.${environment_long}_je_datacontext.piifinderinstrumentation_all_*`
  WHERE
    $__timeFilter(__Metadata.IngestedTimestamp)
    AND category IS NOT NULL
 ) total
ON
  1 =1 
WHERE
  $__timeFilter(cat.__Metadata.IngestedTimestamp)
  AND cat.category IS NOT NULL
GROUP BY
  metric,
  total.cnt
ORDER BY
  metric

Stacktrace:

TypeError: undefined is not an object (evaluating 'this.datapoints.length')

in t
in Cn
in t
in div
in div
in div
in div
in div
in t
in t
in t
in div
in Mo
in div
in dn
in div
in div
in t
in div
in t
in div
in t
in div
in t
in div
in div
in t
in x
in div
in t
in x
in r
in Unknown
in t
in Unknown
in h
in Unknown
in Unknown
in t
in t
in l
mpowelltech commented 3 years ago

I resolved my issue as per https://github.com/grafana/piechart-panel/issues/142#issuecomment-406971415 Added a GETUTCDATE() as time (or now() as time for mysql), set it to a Time Series instead of Table data, and then when converted to pie chart, it worked.

albertocalderari commented 3 years ago

I’ll give it a go tomorrow