EDIT 1st of August 2020: This tutorial was edited for Beta.9.x

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.

Afterwards press Connect.

Creating a 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 stars received by the Chartbrew repository in July 2020. Follow the screenshots below to get this set up:

Adding a new chart in Chartbrew
Click on the Add new chart button to get started

Adding a dataset in Chartbrew
Add a new dataset and give it a name like "Stargazers"

Selecting a connection in Chartbrew
In the drop-down field, select the connection we created earlier, then press "Get data"

The API request builder in Chartbrew
Now you reached the API request builder that is already populated with some information we need

Next we are going to add the route in the text field at the top - "/stargazers". Github limits the number items fetched at once, so we also have to include the ?per_page=100 query parameter. That way we get all the stargazers in one go. Alternatively, you can also paginate the requests and get the data from multiple requests.

API request configuration in Chartbrew
Configuring the API request

Finally, press the button to make the GET request and you should get the data as shown in the screenshot. Next, we need to select a field from which Chartbrew should create the time series chart. Because we are dealing with a time series chart, we are interested in date each star was registered with the repository. If we look at the data, there is the starred_at which has the exact date we need.

Let's click on the Set up the fields button below:

Field selector in Chartbrew's API request builder
Selecting the field from which the chart will be generated

In the fields screen, we can interact with the data object and select the ones we are interested in. For our use-case, we select the starred_at field like shown in the picture above and then click Close.

Now it's time to select the type of the chart we want to generate. We are going to create a time-series showing in which days the repository got starred in July.

Chart type selector
Press to select the chart type

Time series bar chart in Chartbrew
Click on Bar Chart and then Time Series

And now we have the time series bar chart showing in the chart preview section:

Time series bar chart in Chartbrew

Remember that our goal was to display the stars accumulated in July 2020. At the moment the chart shows all the stars. Expand the Date Settings section to add a date range for our chart:

Chart date filtering in Chartbrew
Select the month of July from the Date settings menu

You can then play around with the colours if you wish and when you are want to finish the editing toggle the draft off and head over to the dashboard. The draft status is ON by default to be able to hide them easily from the dashboard if required.

Customising the chart in Chartbrew
Chart created in Chartbrew
The final chart is created

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!