Emprise Javascript Charts

These popular JavaScript libraries and frameworks are useful tools that any frontend web designer should be familiar with. They add powerful functionality to your website, help you create the current web design trends and lead to extraordinary experiences for your users. Check out our blog about JavaScript frameworks to understand how different libraries are combined to create magical web pages.

In this article I will introduce some of the most used JavaScript frameworks and libraries. As a web developer, you should be familiar with these libraries and know how to use them for your next project.  

What makes JavaScript great?

JavaScript is a powerful programming language, increasingly so with later version, and is widely popular for building web apps.

With isomorphic JavaScript code, developers do not need to run separate code on the server and client. As a result, you will find many JavaScript libraries and frameworks that serve various purposes. In this article we have compiled a total of 40 JavaScript libraries / frameworks with their functions, advantages and use cases.  

The typical JavaScript tech stack combination of tools, including frameworks, that enable developers to develop digital products, including everything from back-to-front-end dev to UX design.

What are JavaScript libraries?

JavaScript libraries contain various functions, methods and objects that perform practical tasks in web pages and JS-based applications. As a JavaScript developer you should already have a good idea what JavaScript libraries are popular and useful, and know how to use them effectively.

As a new developer, it can be a bit much deciding on which libraries to use. Whether you are developing a front-end or backend application in JavaScript, you may feel the need for some popular utility libraries.  

What is a framework?

If you have a tight deadline to complete a project, you can save time by using a framework to build the core of your website. A framework consists of several libraries, and it provides hooks and callbacks so you can build on them.  

React

If we start the list with React it is the first front-end library in terms of important factors such as developer satisfaction, interest, use, stability and popularity.  React is a component-based library that allows you to create reusable elements and components for your website. With React, released in 2013, you can enable features such as static website creation and server-side rendering.

Vue

The advantage of using Vue is that you can write a small amount of code compared to other libraries. Similar to React, Vue is another frontend framework that can be used to build pages and applications using the popular component – architecture.  

JQuery

JQuery is a fast and clear library for JavaScript, which was developed in 2006 by John Resig.  

NodeJS

Node JS is a powerful JavaScript framework that allows you to build server components with JavaScript. This open source, full-stack, free JavaScript framework, written with NodeJS, is fast for developing small reactive applications on the NodeJS platform. It can be used as a frontend for JavaScript running in the browser, and as a backend it is a server for NodeJS. 

Polymer JS

Polymer JS was developed by Google and is a library that allows developers to create interactive applications by bundling reusable HTML, JS, and CSS code together. You can install the library via your terminal with Bower or NPM. Getting started with Polymer.js from Pluaralsight is a good way to start learning.

Angular

We will look at Angular, which is more of a framework than a library. It includes all you need to build a front end app in a structured way. It ships with functionality that with other solutions like React, you’d be relying on third-party libraries and tools.

Angular is a fantastic framework to build applications with, and is quite beginner friendly. Angular and Polymer can compare as they are both built by Google and Angular is the complete framework for web application development, while Polymer is a library for web component design. Angular …

Read More

Function Chart Example

Description

This is an example of a function chart with multiple series, live example can be seen of all sorts of sites including adult dating apps. It demonstrates use of the custom defined title, x_axis_caption, y_axis_caption, and formatted x and y axis zero planes properties. These allow for the custom title, x and y axis captions, and custom formatted x and y zero planes. The series titles are defined as well.

Source Code

1. <script type=”text/javascript”>
3.       var myChart6 = new EJSC.Chart( ‘myChart1a’ , {
4.                              title: “Sample Function Chart” ,
5.                              axis_bottom: {
6.                                 caption: “X Value” ,
7.                                 zero_plane: { show: true, color: ‘rgb(0,0,0)’ , thickness: 1 }
8.                               } ,
9.                              axis_left: {
10.                                 caption: “Y Value” ,
11.                                  zero_plane: { show: true, color: ‘rgb(0,0,0)’ , thickness: 1 }
12.                                 }
13.       } );
16.         myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return Math.pow(x,2); } ,
17.                                      { title: “Function x^2” } ) );
19.         myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return Math.pow(x,3); } ,
20.                                      { title: “Function x^3” } ) );
22.         myChart6.addSeries( new EJSC.FunctionSeries( function(x) { return x; } ,
23.                                      { title: “Function x” } ) );
25. </script>

 …

Read More

Description

This chart contains a PieSeries with a label centered over each piece.

Source Code

1. <script type=”text/javascript”>
4.   //
5.   // Define the CSS in the header:
6.   // <style type=”text/css” media=”screen,print”>
7.   //     .PiePieceLabel { position: absolute; background-color: #fff; border: 1px solid #999; padding: 2px;
8.   //    opacity: 0.8; filter: Alpha(opacity:80); }
9.   // </style>
10.   //
12.   // Define variables to store references to the chart and series
13.   var myChart, mySeries = undefined;
15.   // After drawing is complete, create and/or reposition pie piece captions
16.   function doAfterDraw(chart) {
18.     // Verify series has been created
19.     if (mySeries != undefined) {
21.       var piePoints = mySeries.getPoints();
23.       // Loop through the list of pie series points
24.       for (var i = 0; i < piePoints.length; i++) {
26.         // We’re saving the reference to the div object in the point,
27.         // so check if it already exists
28.         if (piePoints[i].hintDiv == undefined) {
29.           // Create the div
30.           piePoints[i].hintDiv = document.createElement(“DIV”);
31.           piePoints[i].hintDiv.className = “PiePieceLabel”;
32.           piePoints[i].hintDiv.innerHTML = “<strong>” + piePoints[i].label + “</strong><br/>” + piePoints[i].x + ” of ” + mySeries.getTotalValue() +
33.             ” (” + (piePoints[i].x / mySeries.getTotalValue() * 100) + “%)”;
35.           document.getElementsByTagName(“body”)[0].appendChild(piePoints[i].hintDiv);
36.         }
38.         // Find the center of the piece
39.         var pointCoordinates = mySeries.findCenter(piePoints[i]);
41.         // Adjust the location of the div based on the piece center
42.         piePoints[i].hintDiv.style.left = pointCoordinates.x – Math.floor(piePoints[i].hintDiv.offsetWidth / 2) + “px”;
43.         piePoints[i].hintDiv.style.top = pointCoordinates.y – Math.floor(piePoints[i].hintDiv.offsetHeight / 2) + “px”;
45.       }
46.     }
48.   };
50.   myChart = new EJSC.Chart(“myChart1a”,
51.     {
52.       show_legend: false,
53.       allow_zoom: false,
54.       show_mouse_position: false,
55.       // Hide the standard hints
56.       show_hints: false,
57.       // Assign the onAfterDraw event
58.       onAfterDraw: doAfterDraw
59.     }
60.   );
62.   mySeries = new EJSC.PieSeries(
63.     new EJSC.ArrayDataHandler(
64.       [[10, “Piece 1”],[20, “Piece 2”],[45, “Piece 3″],[25,”Piece 4”]]
65.     )
66.   );
68.   myChart.addSeries(mySeries);
70. </script>

…

Read More

Description

This is an example of a simple area chart. It demonstrates use of the custom defined title, x_axis_caption, y_axis_caption, show_options, color, and show_hints properties. These allow for the display of the custom title, x axis caption, and y axis caption, a light brown colored series, and the disabling of the hints. A custom series title is added as well.

Source Code

1. <script type=”text/javascript”>
3.       var myChart2 = new EJSC.Chart( ‘myChart1a’ , {
4.                            title: “Sample Area Chart” ,
5.                            axis_bottom: { caption: “Frequency (Hz)” } ,
6.                            axis_left: { caption: “Velocity (in/s)” } ,
7.                            show_hints: false } );
9.         myChart2.addSeries( new EJSC.AreaSeries( new EJSC.XMLDataHandler(“vibration2_area.xml”) ,
10.                                       { title: “Area 1”,
11.                                        color: ‘rgb(255,222,173)’} ) );
14. </script>

…

Read More

Description

This is an example of a simple bar chart. It demonstrates use of the custom defined title, x_axis_caption, y_axis_caption, show_crosshairs, and formatted x and y axis zero planes properties. These allow for the custom title, x and y axis captions, x and y axis crosshairs, and custom formatted x and y zero planes. The series title and color was defined as well.

Source Code

1. <script type=”text/javascript”>
3.     var myChart5 = new EJSC.Chart( ‘myChart1a’ , {
4.                             title: “Sample Bar Chart” ,
5.                             axis_bottom: {
6.                               caption: “Ship”,
7.                               crosshair: { show: true }
8.                             } ,
9.                              axis_left: {
10.                               crosshair: { show: true },
11.                               caption: “Velocity (in/s)”,
12.                               zero_plane: { show: true, color: ‘rgb(0,0,0)’ , thickness: 1 }
13.                             }
14.                            }
15.                    );
18.         var myChart5Series = myChart5.addSeries( new EJSC.BarSeries( new EJSC.XMLDataHandler(“bar3.xml”) , {
19.                                                         title: “Bar 1”,
20.                                                         color: ‘rgb(255,48,48)’
21.                                                           }
22.                                       )
23.                             )
25. </script>

…

Read More

Custom Point Markers

Description (this example requires v2.0.1)

This chart displays a line series and implements the onDblClickPoint event to trigger the marking of the clicked point. When a user double clicks a point, or single clicks a point and presses the enter key, the event handler marks/un-marks the point by positioning a custom image which stays in place as the chart is zoomed and moved and point selection changes.

Double click a point below to mark it:

Source Code

1. <script type=”text/javascript”>
3.   // Save references to the ranges for easier access later
4.   var markPoint = document.getElementById(“markPoint”);
5.   var markPointImage = document.getElementById(“markPointImage”);
7.   // This method will take the current zoom coordinates and position
8.   // the given range
9.   function positionMarker(bottom_zoom, left_zoom) {
11.     // Determine if we have a selected point and hide or show the marker accordingly
12.     if (markPoint.x == undefined || markPoint.y == undefined) {
13.       markPoint.style.display = “none”;
14.       return;
15.     } else {
16.       markPoint.style.display = “block”;
17.     }
19.     // Determine the pixel coordinates of the point to be marked
20.     var left = chart.axis_bottom.pointToPixel(markPoint.x, true).point – 16;
21.     var top = chart.axis_left.pointToPixel(markPoint.y, true).point – 16;
23.     // Translate zoom coordinates into screen pixels
24.     bottom_zoom = {
25.       min: chart.axis_bottom.pointToPixel(bottom_zoom.min),
26.       max: chart.axis_bottom.pointToPixel(bottom_zoom.max)
27.     };
28.     left_zoom = {
29.       min: chart.axis_left.pointToPixel(left_zoom.min),
30.       max: chart.axis_left.pointToPixel(left_zoom.max)
31.     };
33.     // Position the marker, adjusting styles and dimensions as necessary to make it
34.     // partially visible when not fully within the bounds of the chart
35.     if (((left + 32) < bottom_zoom.min) || (left > bottom_zoom.max) ||
36.     ((top + 32) < left_zoom.max) || (top > left_zoom.min)) {
37.       markPoint.style.display = “none”;
38.     } else {
39.       markPoint.style.display = “block”;
41.       // If point is outside the visible range but the image should
42.       // still be partially visible, adjust its width and image
43.       // position so it appears to disappear beneath the axis /
44.       // chart bounds
45.       if (left < bottom_zoom.min) {
46.         markPoint.style.left = bottom_zoom.min + “px”;
47.         markPoint.style.width = 32 – (bottom_zoom.min – left) + “px”;
48.         markPointImage.style.left = “-” + (bottom_zoom.min – left) + “px”;
49.       } else if ((left + 32) > bottom_zoom.max) {
50.         markPoint.style.left = left + “px”;
51.         markPoint.style.width = (bottom_zoom.max – left) + “px”;
52.         markPointImage.style.left = “0px”;
53.       } else {
54.         // Image is fully visible, position it and reset its width
55.         markPoint.style.left = left + “px”;
56.         markPoint.style.width = “32px”;
57.         markPointImage.style.left = “0px”;
58.       }
60.       // If point is outside the visible range but the image should
61.       // still be partially visible, adjust its width and image
62.       // position so it appears to disappear beneath the axis /
63.       // chart bounds
64.       if (top < left_zoom.max) {
65.         markPoint.style.top = left_zoom.max + “px”;
66.         markPoint.style.height = 32 – (left_zoom.max – top) + “px”;
67.         markPointImage.style.top = “-” + (left_zoom.max – top) + “px”;
68.       } else if ((top + 32) > left_zoom.min) {
69.         markPoint.style.top = top + “px”;
70.         markPoint.style.height = (left_zoom.min – top) + “px”;
71.         markPointImage.style.top = “0px”;
72.       } else {
73.         markPoint.style.top = top + “px”;
74.         markPoint.style.height = “32px”;
75.         markPointImage.style.top = “0px”;
76.       }
77.     }
79.   };
81.   // doDblClickPoint will be attached to the chart’s onDblClickPoint event and will
82.   // register the clicked point so that it can be positioned as necessary
83.   function doDblClickPoint(point, series, chart) {
85.     // Record the point coordinates so that we can reposition if the chart is zoomed or moved
86.     markPoint.x = point.x;
87.     markPoint.y = point.y;
89.     // Get the current coordinates of the chart area in axis-specific units
90.     var bottom_zoom = chart.axis_bottom.getZoom();
91.     var left_zoom = chart.axis_left.getZoom();
93.     // Position the marker
94.     positionMarker(bottom_zoom, left_zoom);
96.     // Return false to cancel the zoom out (if applicable)
97.     return false;
99.   };
101.   // doAfterDraw will be attached to the chart’s onAfterDraw event and
102.   // move the markers into the correct position
103.   function doAfterDraw() {
105.     // Get the current coordinates of the chart area in axis-specific units
106.     var bottom_zoom = chart.axis_bottom.getZoom();
107.     var left_zoom = chart.axis_left.getZoom();
109.     if (!isNaN(bottom_zoom.min) && !isNaN(bottom_zoom.max) &&
110.     !isNaN(left_zoom.min) && !isNaN(left_zoom.max)) {
111.       positionMarker(bottom_zoom, left_zoom);
112.     }
114.   }
116.   var chart = new EJSC.Chart(“myChart1a”,
117.     {
118.       show_titlebar: false,
119.       show_legend: false,
120.       axis_bottom: {
121.         size: 30,
122.         caption: “Dates”,
123.         extremes_ticks: true,
124.         formatter: new EJSC.DateFormatter({format_string: “MM/DD<br/>HH:NN”})
125.       },
126.       axis_left: {
127.         caption: “Level”,
128.         min_extreme: -50,
129.         max_extreme: 150,
130.         formatter: new EJSC.NumberFormatter({forced_decimals: 1})
131.       },
132.       allow_zoom:

…

Read More

EJSC.PieSeries Property Examples

Properties Demonstrated

• Standard EJSC.PieSeries Properties

Desired Result

Default EJSC.PieSeries Settings

Properties Demonstrated

• defaultColors
• treeLegend

Desired Result

This chart will have a new set of colors defined as the pool of colors to be used when creating the pie pieces, and show its items in the legend in a treeview format.

Source Code

1. <script type=”text/javascript”>
3.   var chart = new EJSC.Chart(“myChart1a”, {
4.     show_legend: false
5.   });
7.   chart.addSeries(new EJSC.PieSeries(
8.     new EJSC.ArrayDataHandler([[3,”Widgets”],
9.       [7,”Doodads”],[4,”Thingamagigs”],
10.       [10,”Whatchamacallits”],[2,”Gizmos”],
11.       [5,”Thingies”]])
12.   ));
14. </script>

Source Code

1. <script type=”text/javascript”>
3.   var chart = new EJSC.Chart(“myChart1b”, {
4.   });
6.   chart.addSeries(new EJSC.PieSeries(
7.     new EJSC.ArrayDataHandler([[3,”Widgets”],
8.       [7,”Doodads”],[4,”Thingamagigs”],
9.       [10,”Whatchamacallits”],[2,”Gizmos”],
10.       [5,”Thingies”]]
11.     ),
12.     {
13.       treeLegend: true ,
14.       defaultColors: [
15.           ‘rgb(255,140,0)’,  //DarkOrange
16.           ‘rgb(178,34,34)’,  //FireBrick
17.           ‘rgb(153,50,204)’,  //DarkOrchid
18.           ‘rgb(255,255,0)’,  //Yellow
19.           ‘rgb(112,219,147)’,  //AquaMarine
20.           ‘rgb(35,107,142)’  //SteelBlue
21.       ]
22.     }
23.   ));
25. </script>

…

Read More

Description

This is an example of a stacked chart. It demonstrates the ability to easily display multiple series of various types on a single chart. In this example a pie, scatter, and line chart are displayed simultaneously. Each series type can be displayed or hidden using the chart legend. In addition the chart exhibits use of the customer title, x axis caption, and y axis caption properties. Each series defines its own custom title as well.

Source Code

1. <script type=”text/javascript”>
3.       var myChart4 = new EJSC.Chart( ‘myChart1a’ , {
4.                            title: “Sample Stacked Chart” ,
5.                            axis_bottom: { caption: “Frequency (Hz)” } ,
6.                            axis_left: { caption: “Velocity (in/s)” } } );
8.         myChart4.addSeries( new EJSC.PieSeries( new EJSC.XMLDataHandler(“pie.xml”) ,
9.                              {title: “Pie 1” } ) );
11.         myChart4.addSeries( new EJSC.ScatterSeries( new EJSC.XMLDataHandler(“scatter-mix.xml”) ,
12.                                { title: “Scatter 1” } ) );
14.         myChart4.addSeries( new EJSC.LineSeries( new EJSC.XMLDataHandler(“line-mix.xml”) ,
15.                              { title: “Line 1” } ) );
19. </script>

…

Read More

Description

This is an example of a simple line chart. It demonstrates use of the custom defined title, x_axis_caption, y_axis_caption, auto_zoom, auto_find_point_by_x, and show_crosshairs properties. These allow for the custom title, x axis caption, and y axis caption, an auto defined zoom range, the auto selection of points by position of cursor on the x axis, and the display of the x axis crosshairs. The series title was defined as well.

Source Code

1. <script type=”text/javascript”>
3.         var myChart1 = new EJSC.Chart( ‘myChart1a’ , {
4.                                title: “Sample Line Chart” ,
5.                                axis_bottom: { caption: “Frequency (Hz)” , crosshair: { show: true } } ,
6.                                axis_left: { caption: “Velocity (in/s)” , crosshair: { show: false } } ,
7.                                auto_zoom: ‘y’ ,
8.                                auto_find_point_by_x: true
9.                                }
10.                        );
12.         myChart1.addSeries( new EJSC.LineSeries( new EJSC.XMLDataHandler(“vibration2.xml”) , {
13.                                                    title: “Line 1”,
14.                                                     __padding: { x_min: 0, y_min: 1, x_max: 0, y_max: 5 }
15.                                                    }
16.                             )
17.                  );
19. </script>

…

Read More