How to Generate Charts & Graphs Beautifully
February 28, 2016

How to Generate Charts & Graphs Beautifully

jQuery Know How Programming


Recently I had a project that deal with a lot of statistics. With the statistics data, I am to generate charts & graphs and that is when I came across Chartist.

Chartist – Beautiful Charts & Graphs

Not only Chartist generate charts, Chartist generate beautiful, animated charts. It is also responsive aka mobile-friendly. It is lightweight which means it doesn’t take a long time to load. However, do take a look at the browser compatibility table to make sure that it works for you.

Generate Charts & Graphs

Download the files here.

Including Library Files

Once you have downloaded the files from the above link, you only need to include these files in your website.
dist/chartist.min.js
dist/chartist.min.css

Copy these two files to your css and js folder. Then, proceed to adding these files to your web page. Here is how to do it.

/* Chartist CSS file */
<link rel="stylesheet" href="css/chartist.min.css" />

/* Chartist JS file */
<script src="js/chartist.min.js"></script>

Populating the Data

Example: Line Chart

Adjust the block of code below according to your statistics and paste it in your jQuery script. You can place them inside $(document).ready(function(){ ... });

new Chartist.Line('.ct-chart', {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
series: [
[10000, 30000, 13000, 30000, 17000],
[5000, 10000, 15000, 25000, 20000],
[3500, 5000, 7000, 8000, 15000]
]
}, {
	fullWidth: true,
	chartPadding: {
	     right: 40
	}
});

Different kinds of charts and graphs will have different options in the block of code. You can refer here. Refer to the examples on the page, click the edit example button and see how the code is written.

Voila! The Charts & Graphs

Below are some more charts and graphs example that you can generate using Chartist.


Leave a Reply

Your email address will not be published. Required fields are marked *