Back to blog

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

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. 

 

 

 

Back to blog

Chatbots.Studio Announced 5th Node.js Developer Internship

It is the 5th time when Chatbots.Studio launches internship and shares knowledge on Node.js and SDK Botkit. That is a great opportunity to boost your skills and get a job in the top global leader in chatbot development.

Many challenging projects are waiting for a true professional like you!

We are inviting you to join our free internship this autumn.

Internship’s start date will be announced after 4th October (end date to send CV).

 

We offer:

  • Teamwork
  • Flexible working hours
  • An opportunity to get the job

 

Our requirements:

  • Having experience in Node.js and SDK Botkit
  • Huge desire to grow as Node.js developer

 

Test task:

Give a postman file that helps to get Facebook Account Photo.

 

Send your CV and the completed test task by 4th October.

Email: herhei.kovach@chatbots.studio

Find DOU info here.

 

Back to blog

Chatbots Are Changing Education [Trends And Predictions]

A variety of fields are changing via chatbots development, including education and online tutoring. Chatbots are becoming incredibly useful learning tools. Over the last few years, there has been massive hype on innovative tools to improve online learning, or offline education, through AI technology. 

Artificial Intelligence, in cooperation with educational institutes, make education personalized, easy and improves interaction. We’ve come across 7 ways how chatbots are changing education. 

We’ve come across 5 ways how chatbots are changing and influencing education and online learning. 

 

Essay and Test Scoring

Teachers are used testing to quickly check students’ results. A chatbot already can do this automatically and immediately convert the results into points. But it is known that the essay represents students’ level of knowledge better. It shows their fame of mind, methodology, and depth of knowledge. Soon will be implemented chatbots that can test and check essay quality (!). 

Proctoring

Some of the students are getting their points dishonestly. Especially when they have distance online learning. To avoid this, there are AIs created with online-proctoring space. Proctoring is a method that averts fraud during the exams. 

Student Feedback And Professor Assessment

It is very important to have the opportunity to leave feedback regarding the educational process. To improve teachers’ approach, control and coordinate with students. Don’t use the paper feedback form, express thoughts freely in messenger or a web widget.  AI provides anonymous and open feedback to teachers, managers, students, parents as well. 

Personalized Learning

AI helps to adapt the educational process according to student possibilities and the individual’s pace. Also, students can send the request to get additional help, tools, and requirements to proceed with learning. 

Spaced Interval Learning

This methodology learning means repeating the age-old lessons to avoid forgetting them. The same apps with AI are popular in learning languages. One of the most well-known offers to repeat lessons that were hard to learn. 

Have you ever met this AI in your online or offline learning? Does your school use these approaches to improve the educational process? 

 

If you want the chatbot for your business, feel free to contact us in the website contact form or write igor@chatbots.studio and we will schedule a demo in a few business days. 

Back to blog

HTTP Methods and Webhooks

HTTP Methods and Webhooks: How Client-Server Interaction Works

Take all the best from the server!

During the lecture, you’ll learn the following:

  • HTTP methods in CRUD context
  • How, where and when to use HTTPs methods on the server
  • Status codes and their meaning
  • Introduction to webhooks

Enjoy your learning!

 

Back to blog

Web development basics

In the first lesson, the student can learn how to build a very basic one-page website. This lesson is for you if you ever want to create simple chatbot, but also have no idea where to start. This is if you want a step by step overview on the basics.

No one can start learning web development without the right foundation. Learn these tips and let’s build the right basic chatbot together!

What will you learn from this lecture?

  • What is Node.js and it works?
  • How to initialize your Node.js project?
  • How to create “Hello world” Express.js server
  • Introduction to Express.js syntax

Back to blog

Introduction

The Chatbot Development Process!

Chatbots.Studio created the course for developers and business owners to understand how to build chatbot in a  step by step manner.

Our chatbot developer shows you how to build conversational interfaces in messengers with a chatbot’s deep understanding of user intents and producing the relevant answer.

What will you take away from the course:

  • Recommendations for Node.js server and chatbot development
  • How to work with HTTP methods. What exactly is Webhook?
  • How to work with Git and GitFlow
  • What is .env? How to get the configuration for the local and production server.
  • How to work with MongoDB and Mongoose
  • Asynchrony in Node.js. Promises

Back to blog

Stabilization Stage

The last part of the development process is stabilization. It is the stage when the system gets approved for deployment. The stabilizing phase conducts testing on a solution whose features are complete. The team focuses on resolving and triaging (prioritizing) bugs, environment defining and preparing the solution for release.

See in the video a detailed explanation for each of these activities.

Before implementation, we need to consider specific activities:

  • Define the launch approach
  • Execute conversational test cases and make the changes if applicable
  • Define specific environments for NLP Engine
  • Live agent training

 

See in the video a detailed explanation for each of these activities.

Back to blog

Test Cases

The majority of the bots fail to recognize intents and thus respond appropriately to a user, so the creation of a correct test case to validate bot behavior is vital for project success. While developing standard positive and negative test cases, we invite you to consider the cases for dialog testing we presented in the video.   

 

See the next lesson Stabilization Stage

Back to blog

Unit Tests. Onboarding Strategy

The outcome of the development stage is a software product that is ready for QA. In this chapter, we will focus on specific activities related to AI chatbot development. We would assume that the reader is familiar with industry standards in software development, and thus does not need to focus on that.

In this video, the speaker considers how to define a client’s onboarding strategy and unit tests. This provides some inspiration regarding possible sources in the video.

The bot architecture could be rather complex and it will have an integration with the many other systems that are generally connected via Rest APIs

One of the issues with such architecture is that the API could be changed and the user (bot or other system components) could not be notified about said change, and that could lead to issues that are hard to predict. That is specifically relevant when the component is not mature and its development is still in process.  

So our recommendation would be to cover the API with unit tests (in case you do not own it), so any issues related to changes in API could be quickly identified and addressed.

The majority of the bots fail to recognize intents and thus respond appropriately to a user, so the creation of a correct test case to validate bot behavior is vital for project success. While developing standard positive and negative test cases, we invite you to consider the cases for dialog testing we presented in video.  

 

See the next lesson Test Cases

Back to blog

Technologies

Before chatbot development, there should be identified the NLP Engine, programming language, and database management system.

The full technical landscape is presented in the video. 

Conversational Engine component manages the conversational logic, maintain the session, route the conversation between interfaces. To play out these actions, developers could use the solutions Botkin, Botpress or use own by using the plain programming.

NLP Engine component defines intents (Natural Language Understanding), holds the context of the conversation. The possible solutions to implement mentioned actions are Luis, DialogFlow, Amazon Lex, Rasa.ai and Wit.ai.

Live agent component is a dedicated software which is used to handle the conversation takeover from the bot to real human. Such software should provide the interface for chatting with a user, history of conversation, the ability to support simultaneous conversation with several users and etc. FB, for example, has its own interface for live agents while unfortunately, it is lacking many enterprise features.

UI framework component presents a layer for the web bot and admin part. Angular and React are most commonly used options. If you are building web widget please you may use already existing components. We recommend our clients use https://telerik.com/conversational-ui

 

See the next lesson Unit Tests. Onboarding Strategy

Get a Quote