[Plugin] Data format is required for a graph. Data source works as a table but not for a graph

Hello!

I want to compare primary school figures over secondary school figures, per hour, for the past week on one line graph.

I’ve created a plugin, following the simple JSON example, which pulls data from an API for primary and secondary school stats (mock data here), which we want displayed on a graph on an hourly basis.

The data is being received and processed and is returned to Grafana in the below format, from within the query function in the GenericDatasource class:

[
    {
        target: "primary"
        datapoints: [
            [19542, 1515506400] ...
        ]
    },
    {
        target: "secondary"
        datapoints: [
            [34055, 1515506400] ...
        ]
    }
]

The first value is the value, the second is the time, one every hour for both primary and secondary.

When displayed as a table, the data is visible as such:
Time | Metric | Value
2018-08-02 14:00:00 | secondary | 34055
2018-08-02 14:00:00 | primary | 19542
2018-08-02 13:00:00 | secondary | 33552
2018-08-02 13:00:00 | primary | 24507 …

Even as a histogram I can see the data:

When the same datasource is put into a graph with X-Axis set to Time, nothing is displayed, no matter how far I zoom out.

What format does the graph panel want data to be in? I have read the docs and have seen the JSON sample which mine above seems to adhere to.

Is there anything wrong with the data we are returning to the panel?

Any help would be appreciated.

Cheers,
C.

Hi,

Could you please include the request/response data using the query inspector or chrome dev tools. See Using Grafana's Query Inspector to troubleshoot issues and How to troubleshoot metric query issues .

Thanks

Marcus

Thanks for your reply.

Using the query inspector I can see what the API is returning:

This data is then being parsed within query() in the plugin, and passed to the graph (at least I believe that’s how it works?), but I can’t seem to find a way of viewing the parsed data the plugin is returning to the graph.

Is there a way to view what data is actually passed to the graph?

Hi,

So you implemented your own plugin. Thought you were using the simplejson datasource plugin.

For a specification of the expected request/response that the simplejson datasource plugin, please see here. Make sure to implement your plugin to adhere to the same formats. I link to simplejson request/response format since you said you based your plugin on that.

An alternative for you would be to implement a backend to be used with the simplejson plugin instead of writing your own plugin.

Marcus

Thanks for your reply, sorry if I hadn’t made that clear before that I am having to write my own plugin.

I’ve looked at the link to the simplejson datasource plugin, which is what I’ve based my current schema from.
My plugin returns data in the below format which matches that in the example timeseries response:

[
    {
        target: "primary"
        datapoints: [
            [19542, 1515506400] ...
        ]
    },
    {
        target: "secondary"
        datapoints: [
            [34055, 1515506400] ...
        ]
    }
]

I don’t understand why the above data would not show when x-axis Mode is set to “Time” but it does for “Histogram” or “Series”.

A backend is another option but we would really like to do the parsing within the plugin to avoid having to support another service within our team.

Is this a symptom you’ve seen before?

But I would have expect that the query inspector response should have looked like this. Please compare the query inspector responses when using the three different x-axis modes.

If their all the same you must miss something in your code when rendering time series data.

Marcus

Thanks - so my understanding of the query inspector is that is shows what data was returned from the external API to the plugin, and not what data the plugin then sends the graph panel - is this correct?

I am struggling to see the data that the plugin is returning to the graph itself - is this something that exists?

Yes, that’s my understanding

In your query function of your datasource plugin you must make sure that you convert the data from your external api to the following format. There are two different kinds of results for datasources; time series and table. You need to check which kind of result it is to decide if it’s a time series or table query. In your query function you can debug/console.log to verify that you return data with correct format.

I used some console logs to see what the result was of my plugin:

This appears correct?

Another curious thing: when the data source is configured, the X and Y axes change:
image

These numbers look correct too, given the data I can see in the console.
I’ve fully zoomed out and can see no points plotted even though bars points and lines are selected… I’ll keep digging.

Playing about it seems that the plugin must return { data: <results here> }

Even then this isn’t getting the data through to the graph itself.

I’m perplexed as to why the axes correctly show, but not the points, the data shows in Histogram mode, the data shows in Series mode, the data can also be showed as a table…

Hi,

If you select Points as Draw Modes under Display tab, do you see anything? Are you sure that your selected time range falls into the range of your data?

Marcus

Thanks for your reply Marcus,

I’ve selected points and zoomed out really far and can’t see anything.

My data object being sent to the graph (console logging what my plugin is sending) is:

data: [
  {
    target:'Primary',
    datapoints: [
      [8800, 1538348400000]
      [2640, 1538352000000]
      [1440, 1538355600000]
      [256, 1538359200000]
      [1088, 1538362800000]
      [976, 1538366400000]
         ...
    ]
  }
]