Visualize Data Beautifully With Chart.js Library

Last Updated on December 8, 2016

131

shares

Facebook

Twitter

Google+

Pinterest

+

Creating charts that look presentable can be a bit of a pain sometimes. Most often, web designers or developers use graphics to display data using Photoshop or Illustrator, which may take a lot time to be done.

Good thing, there are many available free JavaScript libraries online that web designers or developers can use to display data beautifully. The web designer or developer can then present data without creating graphics in Photoshop or Illustrator.

Resource you need to complete this tutorial

Getting Started

First, we need to copy the chart.min.js out of the unzipped folder to our js folder or your preferred directory.

Setting Up

The next thing we need to do is to create a new HTML file and put on the following codes. This will include the HTML5 doctype and then the CSS file directory followed by our Chart.js library file directory.

Drawing a Line Chart

To draw a line chart, we need to create an HTML5 canvas element first on our body section of our HTML file.

[html]<canvas id="canvas" height="450" width="600"></canvas>[/html]

Next, we need to create a script that will initialize the chart class (in this example, I used myLineChart) and then retrieve the 2D context of the canvas where we want to draw the chart. Copy the code before the closing body tag.

Note: You can also add some styles you want on the each chart, such as the text color and font size using the Chart options.

In the example above, I used scaleFontSize and scaleFontColor to change the font size and the text color of the data. You can check the Chart.js documentation to see more available chart options for each chart.

For our data structure, we will initialize an object (for this example I used LineChart) that contains all labels for our line chart. The data for the line charts will be broken up into an array of data sets. You should define the values of each datasets such as the fill color, stroke color, point color, point stroke color and the data itself.

The bar chart has almost the same data structure to the line chart. Let’s use an object (for this example, I used BarChart) to hold on the labels and values for bar chart. As you can see, we are showing the same data as the previous line chart example.

Drawing a Radar Chart

Then, we will create a script that will initialize the radar chart class (in this example, I used myRadarChart) and then retrieve the 2D context of the canvas. Put the code below before the closing body tag.

For the radar chart, we need to show a label to each point of the chart. This will include an array of strings and then display it around the chart. To do this, let’s again instantiate an object (for this example I used RadarChart) as a container of the labels and values of our radar chart.

Polar area charts are almost the same as the pie charts; however, each segment has the same angle and the radius differs depending on the value.

Let’s create the data structure of Polar area chart by instantiating first the object (for this example, I used PolarChart) to hold the labels and values. The value attribute should be a number, while the color attribute should be a string.

Final Words

Chart.js is a great JavaScript library to create charts in a way where you can be creative. This tutorial has taken you through the steps on how to use this cool library. However, there are some drawbacks in using Chart.js, like, it doesn’t have tooltips and no interactivity on it. That’s being said this JavaScript library has a long way to go and eventually be improve by different developers.

Play around it and let me know if you have some demo where you came up with a cool nice design using the Chart Options.

Hope you enjoyed this tutorial. See you again next time!

We also wanted to share some other great jQuery libraries that could come in handy for your next project.

Most Useful jQuery Libraries

Useful jQuery libraries is a very familiar phrase between designers and developers. It is the one of the most popular JavaScript libraries that you find on the Web. Every designer and developer knows the importance of it; they are familiar with its functions and features.

Why jQuery:

jQuery is designed to resolve just about every issue that a website might have

It can resolve all those issues that obstruct you from making an attractive and creative website

If you want to resolve any cross-browser issues, make JavaScript libraries in your collection

jQuery Libraries are a great source for the web developers. You will find plenty of plugins on the Internet that are free to use but, finding them can be very time consuming as you will have to go through every site in order to find out the latest and accurate jQuery libraries.

That is why, in today’s post, we have collected a list of the most suitable jQuery libraries. You can use them to add cool effects in your website.

It is a minimal lightbox for only images. It has no captions and navigation buttons by default, making it simple but ascetic. It is responsive and touch-friendly and works great on all major mobile operating systems.

This jQuery plugin allows you to see links of your website with one click. It allows the users to see preview picture of links when they move the mouse over the text link.

Conclusion

In this post, we shared some of the most suitable jQuery libraries that you can use in your websites to solve any problem. We hope that these all plugins can enhance your website performance and give a user-friendly environment to the site. All these jQuery plugins are very useful and creatively made to give your site the best look.

If you think we have missed some of the plugins, then feel free to add a list of your favorite jQuery plugins so that every other designer and developer can use them in their website with your credits. You can do this by simply commenting below.