In one of our previous article, we have provided list of useful javascript drag and drop libraries, now in this post, I am going to provide you list of various useful Javscript charting libraries, which can be useful to create Javascript based Charts in your web-applications.

1. Chart.js

chart-js-javascript-charting-library-min.png

Chart.js is really simple JS Chart library and Open source, you can easily configure it according to your needs.

You can download the latest version from GitHub or directly use it using CDN.

Chart.js uses HTML5 canvas tag and can be helpful to create line, bar, donut/pie etc various charts.

You can create responsive Charts using JSON data with it.

Example:

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

2. FusionCharts

Fusion charts is one of the most comprehensive charts, which contains more than 900 charts, and around 90 maps, but it is paid.

Charts created using Fusion charts are responsive charts, means it is compatible with Mobile and Desktop browsers.

You can render Fusion charts using JSON/XML data with HTML5 canvas, and it can be easily exported in PNG,JPG or PDF format.

3. Google Charts

Google Charts are most widely used charts and can be easily configured to use it in your web-application.

With Google Charts, you can render charts with HTML5 Canvas or SVG.

It is free to use and have high community support from around the worls, so if you are stuck with something while developing charts using this Javascript library, then you can easily get help from many forums and blogs.

Example to create Pie chart using Google Charts:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Fiddle sample:

You may like to read: Google Charts in ASP.NET MVC , Pie chart in ASP.NET Web-Forms

4. D3.js

d3-javascript-chart-library-min.png

D3.js is another widely used Javascript charts library, which is free to use and have excellent support.

It allows you to bring data to life using HTML, SVG, and CSS.

D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

One of the excellent feature of D3 is, it allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.

For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

Example:

// chart data
	var chartConfig = {
		barWidth:20,
		data:[{
					"sale": "202",
					"year": "2000"
				}, {
					"sale": "215",
					"year": "2001"
				}, {
					"sale": "179",
					"year": "2002"
				}, {
					"sale": "199",
					"year": "2003"
				}, {
					"sale": "134",
					"year": "2004"
				}, {
					"sale": "176",
					"year": "2010"
				}]
	};
	
	// enviornment setup
		var svgConfig = {
						id:"mySvg",
						width:600,
						height:300,
						margin : {
							top: 20,
							right: 20,
							bottom: 20,
							left: 50
						  }
						};
								
	// drawing
		// append svg element
			var bodySelection = d3.select("body");
			
			var svgSelection  = bodySelection.append("svg")
								.attr("id", svgConfig.id)
								.attr("width",svgConfig.width)
								.attr("height",svgConfig.height);
								
		// create x scale
			xScale = d3.scale.linear().range([svgConfig.margin.left, svgConfig.width - svgConfig.margin.right]).domain([d3.min(chartConfig.data, function(d) {return +d.year;})-1,d3.max(chartConfig.data, function(d) {return +d.year;})]);
		
		// create y scale
			yScale = d3.scale.linear()
					   .range([svgConfig.height - svgConfig.margin.top, svgConfig.margin.bottom])
					   .domain([134,d3.max(chartConfig.data, function(d) {return +d.sale;})]);
		
		// create bars
			svgSelection.selectAll("rect")
						   .data(chartConfig.data)
						   .enter()
						   .append("rect")
						   .attr("x", function(d) {
								return xScale(+d.year) - chartConfig.barWidth/2;
						   })
						   .attr("y", function(d) {
								return yScale(d.sale) - svgConfig.margin.bottom;
						   })
						   .attr("width", chartConfig.barWidth)
						   .attr("height", function(d) {
								return svgConfig.height - yScale(d.sale);
						   })
						   .attr("fill", function(d) {
								return "rgb(90, 0, " + (+d.sale) + ")";
						   })
		
		//let's create the axes using the scales
			xAxis = d3.svg.axis()
					.scale(xScale)
					.tickFormat(d3.format("d"));
			
			yAxis = d3.svg.axis()
					.orient("left")
					.scale(yScale);
		
		// add xaxis to chart - it will add it to top of the svg
			svgSelection.append("svg:g")
			.attr("id","xAxis")
			.attr("class","axis")
			.call(xAxis);
			
		// The X axis is drawn but it has some issues. First, we need to position it vertically downwards using transform property
			d3.select("#xAxis")
			.attr("transform", "translate(0," + (svgConfig.height - svgConfig.margin.bottom) + ")");
			
		// add yaxis to chart, but this will not add it to correct oorientation
			svgSelection.append("svg:g")
			.attr("id","yAxis")
			.attr("class","axis")
			.call(yAxis);	
		
		// apply transform logic to bring it to correct place
			d3.select("#yAxis")
			.attr("transform", "translate(" + (svgConfig.margin.left) + ",0)")

5. Chartist.js

chartist-js-charts-library-min.png

Chartist.JS is free to use and responsive Javascript chart library and it has only 10KB in size, which doesn't need any exeternal JS library to be incldued, to use it.

Features of Chartist.JS

  • Easy to use
  • Great flexibility while using clear separation of concerns (Style with CSS & control with JS)
  • Usage of SVG
  • Fully responsive and DPI independent
  • Responsive configuration with media queries
  • Fully built and customizable with Sass

Sample code

var data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    series: [
    [500, 419, 398, 450, 469, 520, 580, 510, 610, 680, 700, 728]
  ]
};

var options = {
  seriesBarDistance: 100
};

new Chartist.Line('.ct-chart', data, options);

Sample fiddle:

6. Morris.JS

morris-js-charts-min.png

Morris.JS library is easy to use and integrate with any web-application.

It is a lightweight library based on jQuery and Raphael, that provides simple, clean line, area charts, bar, and donut charts.

It is free to use.