Creating Dashboards

Telemetry provides a robust platform for logging, storing, and querying your data, but to truly harness the power of that data, you need a powerful dashboarding tool. This is where Observable comes in.

This guide will walk you through integrating Telemetry as your data source within Observable, allowing you to create dynamic, interactive dashboards. By combining Observable’s world-class visualization capabilities with Telemetry’s powerful data APIs, you can build dashboards that are both visually compelling and rich in real-time data.

Why We Recommend Observable

You might be wondering why we recommend using Observable instead of building our own dashboarding solution within Telemetry. The answer is simple: while we might explore building our own dashboards in the future, we want to make sure we do it right. Observable already offers an exceptional platform for creating dashboards, and by pairing it with Telemetry, you get the best of both worlds:

• Advanced Dashboarding: Observable provides a rich set of tools for creating everything from simple to complex, interactive dashboards.

• Real-Time Data Access: With Telemetry’s real-time querying and robust API, your data is always up-to-date and readily available for analysis.

Using Telemetry within Observable

Setting Up Your Observable Notebook

To get started, create a new notebook on Observable. Observable notebooks allow you to combine code, visualizations, and explanatory text in a single document, making it easy to build and share interactive dashboards.

Fetching Data from Telemetry

You can use Telemetry's Query API directly within your Observable notebook to retrieve data. The Query API accepts SQL, allowing you to query your data using commands such as SELECT, JOIN, and GROUP BY.

Here’s an example of how to fetch data from Telemetry using the Query API:

// Define your Telemetry API key and endpoint
const API_KEY = "YOUR_API_KEY";
const ENDPOINT = "https://api.telemetry.sh/query";

// Function to query data from Telemetry
async function fetchTelemetryData(query) {
  const response = await fetch(ENDPOINT, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${API_KEY}`
    },
    body: JSON.stringify({ query })
  });
  const result = await response.json();
  return result.data;
}

// Example query: Get the average price of Uber rides by city
const uberRideData = await fetchTelemetryData(`
  SELECT city, AVG(price) AS avg_price
  FROM uber_rides
  GROUP BY city
  LIMIT 10000;
`);

Visualizing Data in Observable

Once you have the data, you can leverage Observable’s powerful visualization tools to create interactive charts and dashboards. Here’s a simple example of how you might visualize the average price of Uber rides by city:

import { Chart } from "@observablehq/plot";

// Create a bar chart to visualize the average price by city
Chart.barX(uberRideData, {
  x: "avg_price",
  y: "city",
  title: "Average Uber Ride Price by City",
  color: "city"
});

Building Interactive Dashboards

One of the strengths of Observable is the ease with which you can create interactive dashboards. For example, you can add filters, sliders, or dropdowns to allow users to explore different subsets of your data:

import { Inputs } from "@observablehq/inputs";

// Create a dropdown to filter by city
viewof selectedCity = Inputs.select(uberRideData.map(d => d.city), { label: "City" });

// Filtered data based on selected city
const filteredData = uberRideData.filter(d => d.city === selectedCity);

// Update chart based on the selected city
Chart.barX(filteredData, {
  x: "avg_price",
  y: "city",
  title: `Average Uber Ride Price in ${selectedCity}`,
  color: "city"
});

With these tools, you can build complex, interactive dashboards that allow users to dive deep into your data.

While we may consider building our own dashboarding solution in the future, we believe that using Observable with Telemetry provides the best experience for our users today. Observable’s rich dashboarding capabilities combined with Telemetry’s powerful data APIs allow you to create interactive, data-driven dashboards with ease.