Back to blog

The Top-3 Libraries to Quickly and Nicely Build Charts with JavaScript

Marta Bobyk

Marta Bobyk

October 23, 2019

Article 1

 

The key role of charts in our stock analysis-oriented project should definitely be highlighted as they are the foremost way of data statistics visualisation. In this publication series, we will get your hands on charts built to process through the comparison of three services we’ve experienced: Google charts, Charts.js and FusionCharts && FusionExport services. After reading, you will be able to define use cases and evaluate each of the chart packages to find the best one to fit in your project!

 

FusionCharts && FusionExport && FusionTime services

 

Advantages

 

Diversity

 

FusionCharts API provides users with a wide range of chart types each possessing beautiful animation and eye-catching default colors combination. From waterfall, donut, multi-bars, various combined 2d and 3d charts to even logarithmic, funnel and other outstanding charts  – all of them own a conceivable list of attributes to customize a chart in an ever-imaginable way: labels, axixes, overlaying trend lines, font sizes, borders, shadows, color range, and even animation duration.

 

 

Moreover, aside from the 100+ chart types with 4 different style themes (IMHO ‘fusion’ is the best one) there are more than 2 thousand data-driven maps. The docs are virtually replete with the diversity such that they will definitely satisfy the most demanding user needs and live up to any expectations.

 

 

Integration

 

The most strenuous and at the same time, most crucial is to form configs correctly on the server side: outer-services response manipulating and conversion so that it is displayed correctly may be an enduring and energy-consuming process (data, dataset, labels, legends, and categories arrays formation). Having passed the higher step, users meet the thriving list of possibilities on how a chart will be displayed through front-end integration. Actually, config can be easily converted into rendered component through any JavaScript framework ( React, React-native, Angular (from the last FusionCharts version – 3.14.0), Vue.js, Ember, jQuery also supported ). This also may be implemented through attached NPM packages (React, React-nativeAngular ), or even directly if you add fusioncharts js script file and call the function with received config in a script div (also, check events subfolder for more reference).

 

 

Besides the aforementioned way of dynamic chart formation, there is FusionExport service that guarantees chart static image creating and download superseding the majority of npm packages for web screenshotting. This service carries out the processes of rendering HTML and making web-browser screenshot the chart on its side, saving png file to the tmp folder. 

 

 

Dashboard

 

Undoubtedly dashboards are one of the best ways of complex data statistic comparison, and FusionCharts attained the great result in this issue. If you have a look at their demo page, your mind may be thrown to the Google Data Studio service (GTS further), which offers much more extended and sophisticated functionality (as adding data sources, online editor for customization, connecting to cloud services, etc.). From our point of view, the points in which FusionCharts may prevail over GDS are surely the diversity of chart types, smarter styling and ability to create, display and save it as png. The last is called infographic – simple implementation of the dashboard: built-in column 2+ charts. 

 

 

Support

 

Comparing to other online support for the open-source libraries and APIs, FusionCharts own truly impeccable live assistance through the chat that may be opened by clicking on the icon on the right side of their website. Given the long-term use of this service, our team always received constructive answers with a link to a target resources in maximum of 2-3 minutes, satisfying the concern in 99% of cases. 

 

 

Furthermore, the majority of their charts are placed at JSFiddle live examples (can be shared by a support team, placed right in the docs or easily googled by “fusion charts multi-series fiddle” request), so there is a pertinent chance to play around chart attributes and parameters.

 

 

 

Disadvantages

 

Pricing

 

Imagine you have a situation that you are eager to receive both dynamic and static charts so that it will be displayed dynamically on your React app with a download button for saving static images. So you, as a developer, need the FusionChart and FusionExport services to implement such features.

 

Having downloaded and tested the free FusionExport service, you face two huge trial notices that actually negatively affect the image perception. Moreover, without FusionWidgets and PowerCharts some chart type (Treemap, Angulargauge, etc.) won’t be rendered and screenshotted on their side. Don’t you think it’s time to buy a license? But the cheapest plan costs approximately $500, isn’t it too much? The paid plan may be up to $10,000 depending on the fulfillment of the package. This may be too much for the case you develop home or university projects, even though you make a few requests to their API per day. We are inclined to believe that it would be much better if there is any simple and not so expensive alternatives, so any can integrate this service in their project consequently making Fusion projects far more popular amongst the public.

 

 

 

Documentation

 

Although FusionCharts developers made their best to categorize them for each chart and deep into details, nowadays it’s sometimes hard to search the target parameter through all chart subcategories as their names make the user be apt to the confusion. Although attributes have logical names, unwrapping every subcategory and supposing to which the parameter may be related is a humdrum deal. It was a perfect solution to add a search engine that works directly on the open page, but unfortunately, it seems not to be noticeable. We suppose that lots of FusionCharts API docs readers don’t notice that label and so that they use Ctrl+F page search, that won’t work. It will be a profound solution if Fusion team add the nice border or some tip to avoid the situations above.

 

 

Furthermore, some default attributes actually don’t work at all, and it definitely causes confusion – always try to double-check and test. But anyway, the last is expected to be fixed in the next releases, step by step, and the contaminated attributes pages are made up for nice live support.

 

 

FusionTime and FusionExport

 

There is one more service from the Fusion developers team that is called FusionTime. It’s used to display time-series data and is something like when chart Google returns you ask “Apple price.” These have even the same switch option for the previous time period. Their only single disadvantage is not supported FusionExport, although documentation says vice versa. Hope this issue will be improved in future versions.

 

 

FusionExport OS dependence

 

One of our developers faced an interesting issue in April 2019, while using FusionExport licensed service in the Windows OS. Having cloned a Github project that is run on a remote Linux machine, the developer was testing the static image creation locally with correct config when an error occurred: black background with a grey text message “No data to display.” The optional passed parameters to the class instance/function call served as the reason for this issue: once they got rid of one of them – the charts began to be exported well. However, the same code at MacOS was also working well as Linux. I hope that this bug with Windows OS was fixed in the next versions ( the last for now came out in August 2019 ), but due to the switch to Linux OS, this was not tested on our side.

 

Conclusion

Based on our experience in using Fusion services we can truly recommend them as they will meet any expectations and satisfy any statistics oriented project needs, if the budget allows you so. Certainly, there are some disadvantages at the moment of writing this article (September 2019), but we hope they are to be improved and elaborated. 

 

 

 

Tags: ,

Get a Quote