Populating a Grafana table with API response

Grafana Developers & API
1

  • What Grafana version and what operating system are you using?
    Grafana/ui 9.3.2

  • What are you trying to achieve?
    Populate a Grafana table from an API response

  • How are you trying to achieve it?
    For now I’m just using a dummy object like I found in the documentation:

const data = new MutableDataFrame({
    fields: [
      {name: 'a', type: FieldType.string, values: ['a', 'b', 'c']},
      {name: 'b', type: FieldType.string, values: ['a', 'b', 'c']},
      {name: 'c', type: FieldType.string, values: ['a', 'b', 'c']}
    ]
  })

 return <div className="App">
    <Table data={data} />
  </div>;

  • What happened?
    I’m getting one row with ‘b’ in it.

  • What did you expect to happen?
    I expected three rows with a,b, and c in it

If I replace the above code with the example I see in the DataFrame documentation:

const frame = toDataFrame({
   name: 'http_requests_total',
   fields: [
     { name: 'Time', type: FieldType.time, values: timeValues },
     { name: 'Value', type: FieldType.number, values: numberValues },
   ],
 });

Then I get this error: (0 , _ui.toDataFrame) is not a function

  • Can you copy/paste the configuration(s) that you are having problems with?

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.

  • Did you follow any online instructions? If so, what is the URL?