ChartBrew

In today’s technological world Data is the new currency. Information of business’ customers, resources utilization, prospective customers etc. are the data that can provide greater insights into a business’s operations and dealings and enable executives and managers to make informed decisions, helping them to achieve their goals and the milestones. But this raw unstructured data is not easy to parse and understand and this is where Business Intelligence (BI) tools come in. 

BI tools are softwares that take huge amounts of data from all kinds of sources and process them to produce charts and graphs and other different types of visual media for easy understanding. There are many BI tools available on the market, both proprietary and open source, and one such tool is ChartBrew.

ChartBrew is an open source tool freely available to use. It’s licensed under MIT that means we can also modify it according to our needs. Chartbrew is a web based software,  written in JavaScript. React is used to create the frontend and Node.Js framework for backend. 

Features

Let’s talk about the features offered in this tool. ChartBrew supports various data sources including major databases like MongoDB, MySql, and analytics sources such as Google, Simple, Plausible. It also has support for REST API giving us the opportunity to create a custom data source if needed.

ChartBrew has a query editor to write queries to our data sources giving us more freedom in fetching data in the shape of our need. Now with the data we can create different kinds of charts and graphs and also KPIs. These charts can be set to auto update themselves, meaning they will keep fetching data from source at regular intervals and present updated information.

Next ChartBrew provides the means to embed these charts as iframes wherever needed. If we don’t want to embed charts but just want to view them, we can create a public dashboard in it, which gives us a public facing URL, accessible from anywhere.

Installation

Now let’s install it and check it out. First clone the repo:

git clone git@github.com:chartbrew/chartbrew.git

Next go to the chartbrew directory and run:

npm run setup

ChartBrew also requires mysql. So install that if you don’t already have it. Create a ‘chartbrewdev’ name database and then add the db username and password to the .env file, namely CB_DB_USERNAME_DEV and CB_DB_PASSWORD_DEV variables.

And finally start it by running:

npm run client 

for frontend, and for backend,

npm run server

Creating a Project

Now that ChartBrew is up and running, create an account by opening the sign up page.

Next step is to create a project:

Let’s give it the name ‘BI Tools’.

Now we create a connection i.e., we choose our data source. I’m choosing MongoDB.

Fill in the usual db details for creating a db connection, test it and then save it.

Creating a Chart

Now we create a chart, first choose the chart name and click ‘Start Editing’. You can then follow the small walkthrough explaining what is what.

Now we are at the chart builder page. For our chart we need to create a dataset, so click on ‘Add the first dataset’ button choose the dataset name, save it and then select the datasource. I chose MongoDB before and saved the connections by ‘mongo-source’ name so I can see that in the list and I select it.

Now click on the ‘Make Request’ button, this will open the query editor and again a little walkthrough. In my database there is a collection ‘blogs’ which store details regarding a blog such as ‘title’, ‘author’, ‘likes’, and ‘comments’. So my query is:

connection.collection(‘blogs’).find()

On clicking ‘Test the query’, query’s response is displayed on the right side:

Next I save the query for future usage and click on the ‘Build the chart’ button. Then the chart builder page will open again, and now we choose what data should appear on the chart’s X and Y axis. I want to know t he number of likes on each blog so I choose ‘title’ for X-axis and ‘likes’ for Y-axis. And voila, our chart is ready!

As we can see there are other chart options we can choose from such as bar chart, pie chart, polar chart etc. There are some other features available here too like adding filters, modifying axis data, changing colors used on charts, exporting data to excel sheets. 

Embedding Charts

Now we want to embed our chart somewhere else, so first we remove it from draft mode by toggling ‘Draft’ mode at the top of the chart. Next go to ‘Dashboard’ from the left side nav.

There we see our chart and open the options menu:

Choose the ‘Embed’ option. Click on ‘Enable Sharing’ toggle and there it is, the iframe  we need to embed our chart.

Public Dashboard

If we don’t embed the charts and just want anyone to view it without creating an account then from the chart options choose ‘Make public’ and then the ‘Add to report’ option. From the side nav go to ‘Dashboard Report’ and that’s roughly how a public visitor will see the charts.

This isn’t a public url yet, to make it, click on the sharing icon at the top right corner, following window will open:

Toggle ‘Make Public’ and it’s done. As you can see we can also modify the URL to whatever we want. 

Finally our BI tool is ready!

Final thoughts

ChartBrew also has options to manage teams and a granular permission system for creating and modifying charts among other things.

This was a small tutorial on how to use ChartBrew. There are a lot of tools out there but I personally like ChartBrew because of its simplicity to use, its MIT licensing and that it’s coded in React and NodeJs. Your mileage may vary. Cheers!