In this tutorial we are going to create a chart out of Chartbrew's GitHub repository data by connecting to GitHub's API. If you haven't yet done so, create a Chartbrew account and let's get started!

The final chart will look something like this:

Setting up the connection

First, we need a project. You can create a new one or just use a project you have already:

New Chartbrew project

Next, we have to set up a connection to the Github's API. Click on the Connections menu option from the left navigation bar and then click on the API option to create the connection.

Chartbrew connection types

In this tutorial we are using Chartbrew's repository, but feel free to use any open-source one. Private repositories can be used as well, but you will need to authenticate the requests.

The name of the connection can be anything that makes it easier for you to remember what it stands for. The hostname is used all the time when you make a new request to get data. In this case I chose to go with the API endpoint plus the chartbrew repository path. The two headers I included are required by Github in order for the requests to succeed and get more detailed responses.

Creating a Chartbrew connection

Now press Connect and when it's saved, press Test to verify that the connection can be made:

Testing Chartbrew connection

Creating the first chart

Now let's add our first chart by clicking on Add new chart in the left navigation bar. Our plan is to show the new releases made in the Chartbrew repository in January 2020. Follow the screenshots below to get this set up:

Chart selector in Chartbrew
Select Line Chart, then aggregating Time Series

Github connection in Chartbrew
Name the chart and select our new connection

Press next and you will reach the API request builder screen. In this interface we must configure the request that the Chart is going to make to get the necessary data. In order to get the releases from the Github's API we must make a call to the releases endpoint. Proceed to add that in the route field and then press Send like in the screenshot below:

The API request builder in Chartbrew
API request builder in Chartbrew

You will see that now you have the data coming from Github. Next, press Build and let's configure the chart.

The chart configuration screen in Chartbrew
Chart configuration screen

Since there is currently zero configuration done, the screen doesn't show any charts. Let's change that by clicking on Dataset #1 to tell it what data to use.

It gets a little complicated here, but basically we have to select which field holds the creation date so that we can create the time series. We want to display a chart that shows when new releases were created and how many there are in total (hence we selected the aggregating time series in the beginning).

There are two ways you can select fields for datasets:

One way would be to click on the Object Explorer (the field with Root - Array in it) which will open a container with all the fields in the response. Search for the creation date field which in this case is created_at and click select.
Another way would be to write this manually in the field below: root[].created_at. After this step press Preview to show the chart. You can play around with colors afterwards and then press Done.
Dataset configuration in Chartbrew
Configuring a dataset

Remember that our goal was to display the releases in January 2020. At the moment the chart shows all the releases, even before January. Expand the Date Settings section to add a date range for our chart:

Chart date settings in Chartbrew
Date settings section for the Chart

Turn the toggle on and then select the whole month of January. If it's selected already, make sure you make the selection again for the changes to be seen by the application:

As you can see, now the chart only shows the releases in January. You can press Create the chart now and you will get to your dashboard where a brand new Chart is waiting for you.

Conclusion

And this is how you can use Chartbrew to chart data from different API sources. Note that this only works with APIs that return JSON data at the moment. Some API connections will need to be authenticated, so make sure you add any authentication headers or query parameters as requested by the API documentation you are using.

If you have further questions or suggestions, feel free to join our Discord or Slack communities and we can get back to you there.

Want to give it a go? Register for a Chartbrew account and try it now for free 👌


Follow Chartbrew on Twitter for the latest news!