Use Chart.js to turn data into interactive diagrams

Page 1 of 2:

Using Chart.js: Steps 01-10

In theory, creating diagrams is not difficult. Handling the trigonometry required for a pie chart is among the most classic jobs used for training programmers. There are a lot of diagramming libraries vying for developers' attentions right now, but in this article, we're going to focus on how to use open source tool Chart.js.

We will put the library through its paces, creating a set of printable diagrams from randomly generated data. Chart.js is an especially popular web design tool because it offers a unique trade-off between ease of use and advanced features, enabling you to create interactive charts and engaging infographics.

<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/
Chart.min.js">
	</script>
	</head>
	<body>
	<canvas id="workArea">
	</canvas>
	</body>
</html>

<script>
	(function() {
		var ctx = document.
getElementById('workArea').getContext('2d');
		var chart = new Chart(ctx, 
{
			type: 'line',
			options: {},
			. . .
		});
	})();
</script>

var chart = new Chart(ctx, {
	type: 'line',
	options: {},
	data: {
	labels: ["January", 
"February", "March", "April", "May", "June", 
"July"],
	datasets: [{
	label: "My First dataset",
	backgroundColor: 
        'rgb(255, 99, 132)',
	borderColor: 
'rgb(255, 99, 132)',
	data: [0, 10, 5, 
	2, 20, 30, 45],
		}]
	}
});

<canvas id="workArea" style="width:800px; 
height:600px;"></canvas></canvas>
<script>
	(function() {
		var ctx = document.
getElementById('workArea').getContext('2d');
		var chart = new Chart(ctx, 
{
		type: 'line',
		
options: {    
responsive: false,maintainAspectRatio: 
false},

<canvas id="workArea" 
style="position:absolute; top:0%; left: 0%; 
width:49%; height:49%;"></canvas></canvas>
<canvas id="workArea2" 
style="position:absolute; top:0%; left: 51%; 
width:49%; height:49%;"></canvas></canvas>
<canvas id="workArea3" 
style="position:absolute; top:51%; left: 0%; 
width:49%; height:49%;"></canvas></canvas>
<canvas id="workArea4" 
style="position:absolute; top:51%; left: 51%; 
width:49%; height:49%;"></canvas></canvas>

<div style="position:absolute; top:0%; left: 
0%; width:49%; height:49%;"> 
	<canvas id="workArea" ></canvas></
canvas>
</div>
<div style="position:absolute; top:0%; left: 
51%; width:49%; height:49%;">
	<canvas id="workArea2"></canvas></
canvas>
</div>
<div style="position:absolute; top:51%; left: 
0%; width:49%; height:49%;">
	<canvas id="workArea3" ></canvas></
canvas>
</div>
<div style="position:absolute; top:51%; left: 
51%; width:49%; height:49%;">
	<canvas id="workArea4" ></canvas></
canvas>
</div>
<script>
	document.addEventListener("DOMContentL
oaded", function(){
	var ctx = document.
getElementById('workArea').getContext('2d');
			var chart = new 
Chart(ctx, {
				type: 
'line',
				options: 
{ },

<script>
	document.addEventListener("DOMContentLoaded", function(){
		var myfield = {
			labels: ["January", "February", "March", "April", "May", "June", "July"],
			datasets: [{
				label: 
"My First dataset",
				
backgroundColor: 'rgb(255, 99, 132)',
				
borderColor: 'rgb(255, 99, 132)',
				data: [0, 10, 5, 2, 20, 30, 45],
			}]
		};

		. . .
		ctx = document.
getElementById('workArea4').getContext('2d');
		chart = new Chart(ctx, {
			type: 'bar',
			options: { },
			data: myfield 
		});
	});
</script>

var mypie = {
		labels: ["January", "February", "March", "April", "May", "June", "July"],
		datasets: [{
			label: "My First dataset",
			data: [0, 10, 5, 2, 20, 30, 45],
		}]
	};
ctx = document.getElementById('workArea2').
getContext('2d');
chart = new Chart(ctx, {
	type: 'pie',
	options: { },
	data: mypie 
});

<body>
	<div style="position:absolute; top:0%; 
left: 0%; width:49%; height:49%;"> 
		<canvas id="workArea" ></
canvas></canvas>
	</div>
	<div style="position:absolute; top:0%; 
left: 51%; width:29%; height:49%;">
		<canvas id="workArea2"></
canvas></canvas>
	</div>

ctx = document.getElementById('workArea2').
getContext('2d');
chart = new Chart(ctx, {
	type: 'pie',
	options: {maintainAspectRatio:false 
},
	data: mypie 
});

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Current page: Using Chart.js: Steps 01-10

Next Page Using Chart.js: Steps 11-20

TOPICS

Web Designer is the premier magazine for aspiring online creatives and industry professionals. The monthly title offers cutting-edge practical projects spanning XHTML, CSS, Flash and WordPress as well as hosting features and interviews with the web community’s most influential people. Each issue also has a dedicated Industry section covering news and views from the trade, website showcases featuring the finest design talent and a free CD of valuable resources.

Use Chart.js to turn data into interactive diagrams

01. Deploy the library

02. Start initialisation

03. Add a data source

04. Stop any flickering

05. Add layouts

06. Tame any rendering errors

07. Try bars

08. Avoid pies

09. Solve the problem

10. Let Chart.js rescale the diagram

Related articles