JavaScript Libraries : A Quick Start to some Library

Reading Time: 4 minutes

OVERVIEW

JavaScript is one of the most popular computer language in the world. The use cases where JavaScript has shown to be replacing traditional platforms are ever increasing. As the scope of the usage grows, it becomes extremely important that a method of distribution of code is used, to not only bring simplicity in further development but also allow reuse of code by the masses. JavaScript libraries solve this problem really well, and there are dozens if not hundreds of libraries available that cater to various use cases.

In this article we take a look at 2 such important libraries .

1. Highcharts JavaScript library

As Tess Flanders once said , “Use a picture. It’s worth a thousand words.” , this is one of the life easing libraries for all your ui graphical representation needs . Let’s first take a look at what is SVG first .

• stands for Scalable Vector Graphics
• defines the graphics in XML format
• element and every attribute in SVG files are animatable
• Example would be :

Technically speaking , Highcharts is a JavaScript charting library based on SVG, with fallbacks to VML (Both VML and SVG describe images in vector format as an application of XML) and canvas for old browsers. This package contains Highstock, the financial charting package for geo maps.

When fully coded , a highchart would look like :

The above is and example of Bar chart . The chart variety could also be :

• Pie chart
• Line chart , etc

Ways to include highcharts in your project :

1. using CDN :

2. install from npm :

3. install from Bower :

How does it work :

The chart method accepts 2 arguments :

1. The id of the HTML tag where chart will be rendered .

2. Chat options in form of an object .

In the above object we need to fill the x-axis value , y-axis values and the data mapping in the “series” array .
We can also provide tooltips on hovering over a data point in html and non-html format .

API support :

There is a vast numbers of APIs supported , which can be referred from official website , there is high chance you will end up finding the right api for your requirement and tweak accordingly .

Community support:

Since highcharts is a widely used open-source library , the community support is also impressive , which indeed is required to get started . JSFiddle and StackOverflow have a good number of working code examples .

2. Lodash JavaScript library

For those who find initialization of variables , iterating over an array using for and while loops as repetitive tasks , this library can help you eliminate those and make your code leaner and reduce the hassle .

Ways to include Lodash in your project :

1. using CDN :

2 . using npm installation :

Some useful example of Lodash are :

1 . get

The get method lets access the properties of an object in a safe method. That even if the path to the properties doesn’t exist, it will return undefined or default value instead of crashing the current program.

The first argument is the object that we want to access property’s value. The second is a path to the property. The last argument is a default value.

2 . cloneDeep

Initializing a new object from an old object which may have an inner array of objects , confusing …. isn’t it ? well cloneDeep comes to the rescue : it is used to create a deep copy (new memory based initialization) of the value i.e. it recursively clones the value.

3 . compact

Creates an array with all falsey values removed. The values false, null, 0, “”, undefined, and NaN are falsey.

API support :

There is a huge numbers of manipulative methods suggested . Most of the redundant stuff can easily be handled and eleminated .

To learn more about this libraries you can visit to :

Highcharts
Lodash