Structure of dataList from data-received

In my plugin, I have an event listener'data-received', this.onDataReceived.bind(this));. With the function onDataReceived(dataList) {}, I want to add the new datapoints to an array dps as follows:

            x:  // new x-value,
            y: //new y-value

(I want to put this statement in a for-loop that loops over the datapoints in dataList.) However, I can’t find out how to get x- or y-values out of the dataList. I know that dataList has the property datapoints, but simply typing x: dataList[i].datapoints[0] and y: dataList[i].datapoints[1] in the statement above, where i is the loop variable, does not work. Does anyone know in which property of dataList the values are saved and in which structure? Thanks in advance!


What does a console.log(dataList) result in? There you should see what properties there are on datapoints.

Searching the Grafana code base for data-received I can see that there are some different handling of the result. I suggest that you have a look at these to gain greater understanding.


Hi Marcus,

Thank you very much for your reply! With trying out some console.log statements, I finally figured out what the structure of the datalist is. For anyone interested, it is structured as follows:
The datalist is an array of different objects. If you use a Metrics Panel in Grafana, the number of objects in this array equals the number of queries (so 2 if you have A and B, 3 if you have A, B and C in your Metrics tab). Each object has a target property and a datapoints property. The target property saves the name of the query, for example “A-series”. Inside datapoints, an array of arrays is saved. Each of the smaller arrays has 2 elements, the first being the value of the datapoint and the second being a timestamp in epoch time (like 1512029478151).
So, for example, if you would have an A-series and a B-series, and you had the CSV metric values 10, 20, 30 and 20, 40, 60 in the A-series and the B-series respectively, you datalist would look like this:
[ {target:"A-series", datapoints: [[10, //timestamp] , [20, //timestamp], [30, //timestamp]]}, {target: "B-series", datapoints: [[20, //timestamp] , [40, //timestamp], [60, //timestamp]] }]

Hence, the datapoints can be gotten from the datalist as follows:

for(let i=0; i<dataList[0].datapoints.length; i++) {
  let newX = dataList[0].datapoints[i][0];
  let newY = dataList[1].datapoints[i][0];
        x: newX,
        y: newY

Where dps is the variable that saves all datapoints and can be used directly to plot a graph.

I hope this is useful for anyone struggling with the datalists :slight_smile:

Glad you worked it out.

The large numbers like 1512029478151 are a timestamp in epoch time, i.e. the number of seconds that have elapsed since January 1, 1970 . You can try out with 1512029478151 and see that it’s correlate to Thursday, November 30, 2017 8:11:18.151 AM GMT.


ah I was thinking it had something to do with the time. Thanks for the additional info! :smiley: