Table of Contents
Not enough time to read the article?
Picture 1. Scrolling heatmap, sonar-data simulation
The dynamic nature of web applications makes usage, sharing, and editing of web charts easy and fast, which boosts their development speed. For example, Stack Overflow is a forum for developers to help developers. It is commonplace to request help with some specific chart library (example). With web charts, the answers can be grouped with an interactive code snippet that displays the chart next to the answer with live-editing – how cool is that?
Picture 2. StackOverflow Questions
SVG is the most high-level technique, so it is easiest to use but usually is also is the slowest. Canvas is really straightforward to use, and experienced developers can make a simple chart in a matter of hours – however, it eventually hits a bottleneck in performance as the number of shapes increases. WebGL is the ultimate solution to web charts performance by accelerating the rendering with the client GPU – even complex visualizations like dynamic color lookup by any data point property can be implemented and 3D projections can be added.
Programming WebGL directly is significantly more difficult than SVG or canvas, but it enables countless applications which are simply impossible to implement with SVG or canvas approaches.
Some developers opt to use open-source tools that aim at simplifying WebGL usage to create charts – this approach simplifies the development but limits the available achievements and performance based on the capabilities of the external toolset.
High-performance web charts also fall into this category; however, they are on a higher level, providing direct APIs for drawing some particular chart, series, or data visualization technique – for example, a Line Chart can be created with a couple of lines of code instead of having to worry about the individual components, like ticks and lines.
A common list of minimum requirements for a functional, basic chart is X-Axis ticks (ticks depict the range of data coordinates, each tick consists at least of a text label that displays the coordinate but usually also a gridline that pierces the chart on a horizontal or vertical plane), Y-Axis ticks and a data series (for example, a continuous line, set off point markers, or heatmap).
In modern data visualization, this list of requirements quickly expands to various components, like date time ticks, band/line highlighters, data cursors, custom ticks, user interactions like panning and zooming, 3D projections, zoom band charts, x-axis, chart legends, customized chart titles, etc.
<script src=’my-chart.iife.js’></script> and it will make all the contents of the library available for later usage on the website.
With access to the web chart code, common usage cases divide into two approaches as dictated by the design of the web chart – descriptive invocation or functional real-time usage. Most web charts target visualization of static data, meaning that the user configures the chart in JSON format and the web chart library produces content on the web page according to the configuration. These kinds of web charts usually follow descriptive API design, where the user is responsible for giving a “description” of the chart.
On the other hand, more real-time oriented web chart libraries usually prefer the functional approach, where the user issues different commands as required to instruct the web charts in real-time. This approach is generally more suitable for charts that update in real-time and deal with live data streams and dynamic user interactions.
Regardless of the web chart design, the code idea is always the same; the user chooses the type of data visualization which may be described as “chart”, “series”, “plot” or “graph” type and supplies the input data in the format expected by the web chart library. Usually, different chart libraries provide documentation in the form of API references, interactive playground applications, tutorials, examples, and videos, which can be crucial in getting the interaction between your code and the web chart working. Here’s a couple of examples of those kinds of resources:
Wikipedia says there are around 83 JS charting libraries out there and makes me wonder how do they all look like?
Line chart for site trafficConsider a scenario where a user needs to compare two (or more) dimensions from their website traffic over a period of time. Adding different attributes such as color or shapes makes it quite easy to distinguish what each line trend stands for. Canvas JS offers the possibility to customize their line charts on both front and back-ends.
LightningChart® – Column chart of COVID-19 virus cases (Own Horizontal Bar Chart)COVID-19 new cases visualizations were highly popular during the peak of the pandemic as they allowed even the common and everyday internet users to see how all the countries in the world changed their new coronavirus cases rankings compared to others. The COVID-19 real dynamic charts by LightningChart® are a professional chart that allows features such as customized chart legends.
Pie Chart and Doughnut Chart generic examplesPerhaps one of the most common charts are both pie and doughnut charts. The data is displayed in proportion to the 100% value and these chart types work usually better with fewer segments rather than a line or a bar chart that adapt better to a higher number of data points, as shown in the next ChartJS chart.
Item chart for the German Parliament distributionSimilar to a map chart, an item chart is a visual representation of both the total and segmented distribution of data. By adding extra elements such as size or color, the data can be clearly distinguished with the help of an explanatory legend, as seen in the following visualization from HighCharts.
- FPS (Frames Per Second) is a metric used in technology to measure how many times an image is rendered, or drawn, during one second.
- Rendering time is used to measure how long it will take to render something.
Well, the first thing to think is, what does ‘best’ mean for you? Is it performance/speed, sturdy load capacity, reliability, a particular feature, ace technical support, ease of implementation, community support, price, customizability? Do you need a one-trick pony or a more comprehensive solution? It all comes down to the project and user needs in the end. So there simply is no one right answer for this. It is necessary to consider what platform you use, what charts you need, how many developers you have working on the project, what rendering capacity you need etc.
Do you also need additional services to complement the actual charting library? Extra hands on deck, more outsourced developer power to jump-start your project or to do a customized feature for you? These additional needs are worth a while to consider, for some providers are more suited to offer these effectively and save valuable time resources for you. You might want to choose a charting library from a provider that can help you optimize your project so that you can focus on your core job – being a kick-ass developer!
If your project needs are clear but you're still not sure which charting library is for you, let us help you out!