How to visualize your Firestore data with Chartbrew
3 min read

How to visualize your Firestore data with Chartbrew

Connect, query, and visualize your Firestore data with Chartbrew. A step-by-step tutorial on how you can start creating your insightful dashboard.
How to visualize your Firestore data with Chartbrew

This post will quickly walk you through how to connect your Firestore database to Chartbrew and use the data to create a simple visualization. To get started, you can create a free account on Chartbrew or self-host the project on your machine.

Create a Firestore connection

To connect to Firestore, we will need a JSON authentication file which we can download from the Firebase project settings. First, head over to the connections page in Chartbrew and create a new Firestore connection.

Preparing Firestore connection in Chartbrew
Firestore connection form in Chartbrew

Enter any name for your connection and then click on the link to head over to your Firebase project settings. You can also click here to go there. Once you head over to the URL, you have to select the Firebase project you want to connect to. In the example below, the project is called chartbrew-test.

Firebase projects to connect to Chartbrew

After you click on your project, you will get to the Firebase Admin page from where you have to download your JSON credentials file. Click on the "Generate a new private key" button and you will be prompted to download the key.

Once you have the key in a JSON file, it's time to return to Chartbrew and add the credentials to the form. You can either copy and paste the contents of the file in the form, or much easier, drag and drop the file directly on the form.

Firestore authentication json in Chartbrew
Drag and drop the JSON file in the connection form

To make sure the authentication works, press the "Test connection" button, and you should get some info about your Firestore database below.

Testing a Firestore connection in Chartbrew

And that's it! We are now connected to Firestore. Next, let's query for some data and create a visualization.

Create a visualization with Firestore data

Now that we are connected, we can start to query for some data and build our first chart.

Building a chart in Chartbrew
Create a new chart
Initial setup for the visualization

After creating the first dataset and selecting the Firestore connection, we are ready to query for some data. On the next screen, Chartbrew will show you all the available collections in your database and after you select one of them, you fetch the data. You can also use the filters to select only the data you want.

Query Firestore data in Chartbrew
Fetching data from Firestore

Once done, click on the "Build the chart" button, and depending on your data, Chartbrew will try to create a visualization for you automatically. You can further customize what the chart shows on the Y and X-axis.

A time series chart example from Firestore data
A time series chart example from Firestore data

Auto-update, share, embed

With Chartbrew, you can do many things with your charts. Other than arranging them into an insightful dashboard, you can set them so they auto-update in a time interval. The charts are not updating whenever a user refreshes the page. The data updates when triggered manually or when the auto-update interval is on.

Auto-updating, sharing and embedding available for Chartbrew charts
Different chart functions available from each chart's menu

You can also share the chart's link with anyone and can even embed a live chart on your website or documentation sites and blogs.

Next steps

  • Try to connect other services to Chartbrew and create charts from different sources in the same dashboard
  • Use other visualization types such as pie charts for segmentation or table views for a clear display of data
  • Measure your KPIs with the KPI view in the chart editor
  • Check other tutorials to learn how to connect various data sources to Chartbrew