Creating Charts

The main functions of a chart are to display data and invite further exploration of a topic. Charts are used when a simple table won't adequately demonstrate meaningful relationships or patterns between data points. Visual representations help us to understand data quickly. When you show an effective graph or chart, your report or presentation gains clarity and authority, whether comparing sales figures or highlighting a trend. In UI development, there are three ways to display a chart or chart dashboard. Those are:

1. Embed from the provider.
2. Build it from scratch using a library such as chart.js.
3. Use an all-in-one platform like Apache Superset.

Embed from provider

Embedding from a provider is the simplest yet uncomplicated way to display a chart on your website. Many providers can facilitate this. If you prefer Microsoft products, you can use Microsoft Power BI. If you prefer Google products, you can use Google Charts. Or you can even use data processing products like Microsoft Excel or Google Sheets if you still consider them too complicated. The main concern for this method? Authorization. There is still no preferred way to display this chart with authorization. Once you publish the chart, it will be publicly visible. And everyone would have access to it. Another concern about this method is customization. The style of the charts provided by the provider is usually limited, and hard to suit the brand style guide.

Build it from scratch using a library such as chart.js

This method is the most flexible way to display charts since everything is under the developer's control. Developers can set whatever data, authorization, or appearance and style they want for the chart because they make the charts themself. In UI development, XBase-UI recommends using vue-chart.js as the library to help you to build charts. Vue-chart.js is a Vue component wrapper for charts in the library chart.js. It is simple to use and already supports Vue 3 and typescript. One of the cons of this method is this method requires much effort to construct. And also, if we are not careful, it can lead to some performance issues since the backend needs to calculate many data and columns.

Use an all-in-one charts platform like Apache Superset.

Apache Superset is a complete platform for building chart dashboards. You can consider it a complete machine from the backend to the frontend. It is already optimized for performance, supports integration with many database types, and is easy to deploy. It's also customizable and styleable to suit your brand style guide. Apache superset is the solution you can apply if you need a large data visualization in your app. But using this platform will require an expensive investment in infrastructure. This platform must be self-hosted, meaning it needs an independent server to run it as a service.

-tl;dr-

To determine which way you should go, you need to ask these questions:

1. How fast do I need to deliver this chart?
2. Do I need to customize the chart?
3. Do I need to protect the chart?
4. How much data need to be processed?
5. How much investment for this feature?

From those questions, you can go to solution number 1 if you need to deliver your publicly open access chart fast, with a bit of customization/styling and a small investment. The size of data of solution number 1 can handle depending on the provider, so you can exclude the performance issue to be considered. This solution is not an option if you need your chart to be protected. You can go to solution number 2 if you need a fully customized small data chart with a minor investment. And you can go with solution number 3 if you need to handle extensive data with an expensive investment.