Building Dashboards With the Notehub API and Grafana Cloud

In this article I'll show you how to connect Grafana Cloud to the Notehub API and build dashboards that let you explore your project data, monitor devices, and track usage over time.

By the end you'll have a working Grafana dashboard that pulls live data from Notehub and renders it as charts you can share with your team. I'll also share a pre-built Notehub dashboard you can import directly if you'd rather skip ahead.

What Is Grafana?

Grafana is an open-source observability and analytics platform that lets you query, visualize, and alert on data from virtually any source. It's widely used for graphing time-series metrics, but it also works well with arbitrary JSON APIs, such as the Notehub API.

Grafana comes in two flavors. You can use the open-source version to build and host dashboards entirely on your own infrastructure, or use Grafana Cloud, the fully managed hosted version with a free tier and a 14-day trial of unlimited usage. The dashboard-building techniques in this article work in both, but the specific steps and screenshots below are for Grafana Cloud. You can sign up at grafana.com.

Once you're in, you'll land in the Grafana UI where you can create dashboards, configure data sources, and build visualizations. The key concept to understand before we dive in is the data source: Grafana typically doesn't store data itself—it fetches it from a source you configure, then renders it. We're going to configure the Notehub API as that source.

Registering the Notehub API as a Data Source

Grafana supports many built-in data source types (Prometheus, MySQL, Elasticsearch, and more), but for RESTful APIs it uses a plugin called Infinity.

To use it, navigate to Connections → Data sources, and click the Add new data source button.

On the next screen select the Infinity data source. (There are a lot of data source options so it’s easier to use the filter than scrolling through the full list.)

To configure the data source itself you’ll want to do the following:

1. Give the data source a Name. In the screenshot below I use "notehub-api-datasource".

2. Under Authentication, select Bearer Token.

3. Under Auth details, provide a valid Notehub Personal Access Token.

4. For Allowed hosts use https://api.notefile.net.

5. Click Save & test.

If all went well you should should see a Health check successful message, indicating you’re ready to build your first dashboard.

Building Your First Dashboard

With the data source connected, let's build a simple dashboard that shows a Notehub Project’s usage data, starting with the Get Events Usage API.

1. Visit the Dashboards page, and then click the New → New Dashboard button.

2. On your dashboard click the + button to add a panel, and then click Configure visualization.

3. Within the visualization, make the following changes on the Queries tab:

   1. Set the Data source to the Notehub API data source you created in the previous section.
   2. Set the Parser to JSONata.
   3. Set the Format to Time Series.
   4. Set the URL to https://api.notefile.net/v1/projects/{projectUID}/usage/events?period=week&aggregate=project, replacing {projectUID} with the ProjectUID of one of your own Notehub projects.
   5. Under Parsing options & Result fields, set your Rows/Root to data.
   6. While still under Parsing options & Result fields create two columns: period as Time format as Time and total_events as Events format as Number.

4. Backing out, find the pane to the right of your panel. Switch this pane to the All visualizations tab and select Time series.

5. In Panel options give your panel a Title.

6. Change the Time Range at the top of your dashboard. Since this visualization shows weekly data, you’ll want to show a broader time period such as Last 90 days. If all went well you should see weekly event usage data for your project.

7. Make sure to click the Save button in the top-right corner to save your changes.

Once you've built one panel you'll start seeing the potential—data usage, device counts, maps, device-specific data are all easy to visualize using the same approach.

But Grafana can also be overwhelming. And because there’s a lot you can do in visualizations, it also means there are a lot of options to sift through as you’re trying to build charts and graphs.

In the next two sections I’ll show you two different approaches you can use to help with your chart building: starting from a pre-built dashboard, and using Grafana Cloud’s AI assistant to help.

Importing a Pre-Built Notehub Dashboard

In Grafana, every dashboard is backed by a JSON file that defines its panels, queries, and layout. This means you can export any dashboard as JSON and import it into another Grafana instance—making it easy to share, version-control, or reuse dashboards across projects.

To help you get started, Blues has put together a pre-built Notehub dashboard with a collection of charts covering common use cases like data usage, event counts, and device activity. You can import it as-is or use it as a starting point for your own customizations. Here’s how.

1. In Grafana, go to Dashboards → New → Import Dashboard.

2. Copy the JSON from this gist, which contains the Blues-provided Notehub dashboard config.

3. Paste the JSON into the Import via dashboard JSON model field and click Load.

4. On the next screen, you need to give your dashboard a Name, a UID, and most importantly, a Data source. Ensure you set your data source to the one we created in an earlier section of this guide. When you’re all set, click Import.

You should land on a working dashboard. Open the Project dropdown at the top, select one of your Notehub projects, and the charts will populate with live data from your account. You can use the Device and Fleets dropdowns to further filter the data you see.

If you want to further understand how dashboards like this are built—or customize things beyond what the import gives you, in the next section I’ll introduce you to a tool I’ve been using to customize what I build.

Using Grafana's AI Assistant

Grafana Cloud has an AI assistant, because it’s 2026 and everyone has an AI assistant now. BUT, I’m here to tell you that Grafana’s AI assistant is good—like, shockingly good.

The assistant can function either as a teacher or an implementer. For example, here some actual questions I asked when writing the previous sections:

What type of data source do I need to create for a JSON API.

It taught me about Infinity data sources.

I can’t remember how to set a visualization to time series. Where is that?

It helped me find the correct pane. I was impressed that the bot knew about locations in the UI.

My panel still shows no data after configuring it, how do I debug the Infinity datasource query?

I had a typo in my URL and it helped me find it.

But where Grafana’s AI assistant gets really powerful is when you have it build and configure complete charts on your behalf. For example, after visualizing event usage I wanted to move onto route usage data. I did so with the following prompt.

Add two new charts to this dashboard. Both should use the Notehub API and this URL https://api.notefile.net/v1/projects/{projectUID}/usage/route-logs?period=week&aggregate=project. The endpoint returns JSON with two members, where route_logs is an array and all I care about. The objects in route_logs have a timestamp named period, a successful_routes integer, and a failed_routes integer. I would like my first chart to show Weekly Successful Routes, and for my second chart to show Weekly Failed Routes.

From trial and error I’ve found that I have to be pretty descriptive about the API itself, which is why I spelled out the URL and the data format of the response. BUT, I didn’t to tell the AI assistant anything about how to make these changes in Grafana, and that saves me a ton of time. In this case both new charts worked for me on my first attempt.

I then had the AI clean up the ordering and colors and such.

Group the route charts. Make successful routes use green and failed routes use red.

Overall, I’ve had a lot of fun playing with Grafana’s AI assistant, and have found it to be an easier way of adding complex charts than using Grafana’s UI manually.

Next Steps

You now have a live Grafana Cloud dashboard connected to your Notehub project. From here, there are a dozens of other Notehub APIs you might want to use to create visualizations, but here a few you might want to try:

• Get Project Devices: Grafana lets you add dropdown filters, and having a list of all your project’s devices is a common way to build dashboards that display device-specific data.

• Get Project Events: Display event data in your charts. Often used with the deviceUID argument to only return events from a specific device.

• Get Data Usage: Visualize your project’s cellular or satellite data usage over time.

At Blues we’ve built a lot of fun Grafana charts internally, so if you’re stuck reach out and we should be able to help. (But maybe ask the Grafana AI assistant first 😉)