Working with data frames

The DataFrame interface contains a and an array of fields where each field contains the name, type, and the values for the field.

If you build a data source plugin, then you’ll most likely want to convert a response from an external API to a data frame. Let’s look at how to create a data frame.

Note: Data frames representing time series contain at least a time field, and a number field. By convention, built-in plugins use Time and Value as field names for data frames containing time series data.

As you can see from the example, creating data frames like this requires that your data is already stored as columnar data. If you already have the records in the form of an array of objects, then you can pass it to toDataFrame which tries to guess the schema based on the types and names of the objects in the array. If you’re creating complex data frames this way, then be sure to verify that you get the schema you expect.

const series = [
];
const frame = toDataFrame(series);
frame.name = 'http_requests_total';

When you’re building a panel plugin, the data frames returned by the data source are available from the data prop in your panel component.

const timeField = frame.fields.find((field) => field.type === FieldType.time);

Other types of visualizations might need multiple dimensions. For example, a bubble chart that uses three numeric fields: the X-axis, Y-axis, and one for the radius of each bubble. In this case, instead of hard coding the field names, we recommend that you let the user choose the field to use for each dimension.

Alternatively, you can use the DataFrameView, which gives you an array of objects that contain a property for each field in the frame.

const view = new DataFrameView(frame);
view.forEach((row) => {
  console.log(row[options.xField], row[options.yField], row[options.sizeField]);
});

Field options let the user control how Grafana displays the data in a data frame.

To apply field options to the name of a field, use getFieldDisplayName.