Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a chart using bootstrap?
The chart is very important to visualize the data, and we can show the data in various formats and analyze the pattern in the data. Also, the chart is more important for data scientists as they need to analyze the various data.
Bootstrap is a library that allows us to draw various charts using JavaScript or JQuery. It contains the functions that we need to import and pass chart type and chart data as an argument of the function, and it will prepare a chart for us.
This tutorial will teach us to draw various chart patterns using Bootstrap.
Syntax
Users can follow the syntax below to use Bootstrap to create a chart.
new Chart("Canvas_id", {
Type: "Chart_Type",
Data: { various data },
Options: { Various options }
});
In the above syntax, we have used the Chart() constructor with a new keyword to create a Chart object.
Parameters
Canvas_id − It is the id of the canvas where we want to display the chart. Also, we can access the HTML element in a variable and use that variable as a first argument instead of canvas id.
Type − There are various types of charts bootstrap contains. For example, Line chart, Radar chart, Bar chart, Horizontal bar chart, Pie chart, Polar area chart, Doughnut chart, Scatter chart, and bubble chart. We can specify anyone to draw it.
Data − It is data to draw a chart in the object format.
Options − We need to pass various options in the object format to furnish our graph. For example, label, borderColor, backgroundColor, borderWidth, etc.
Example 1
In the example below, we have created the scatter plot using Bootstrap. We have created the chartData using some x and y values.
After that, we took “scatter” as a type while creating the chart and used the chartData as data in the data object. Also, we have set up the background color, and border for every point of the scatter plot. Users can see how we have used the options to set the minimum and maximum limits of the x-y coordinates.
<html>
<head>
<style> #sampleChart{ max-width: 550px; height: 300px;} </style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
</head>
<body>
<h2> Using the <i> Bootstrap </i> to draw a scatter plot </h2>
<canvas id = "sampleChart"> </canvas>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
var chartData = [
{ x: 1, y: 1 },
{ x: 2, y: 3 },
{ x: 3, y: 5 },
{ x: 4, y: 7 },
{ x: 5, y: 11 },
{ x: 6, y: 9 },
{ x: 7, y: 5 },
{ x: 8, y: 6 },
{ x: 9, y: 15 },
{ x: 10, y: 14 },
];
let canvas = document.getElementById("sampleChart")
new Chart(canvas, {
type: "scatter",
data: {
datasets: [{
borderColor: "yellow",
pointBackgroundColor: "green",
data: chartData
}]
},
options: {
scales: {
xAxes: [{ ticks: { min: 1, max: 10 } }],
yAxes: [{ ticks: { min: 1, max: 20 } }],
}
}
});
</script>
</body>
</html>
In the above output, we can observe the scatter plot with green points and yellow radius according to the data we have passed.
Example 2
In this example, we will create a line chart using bootstrap. However, we will create multiple lines in a single canvas and take ‘line’ as a canvas. We have created the data for various lines and stored them in the line1Data, line2data, and line3Data variables. Also, we have created an array of labels.
Users can see how we have passed the data for multiple lines in the data object. Also, we have used different line colors and fill colors for every plot line to make it attractive. The options do the same work of setting up the limit of x-y coordinates.
<html>
<head>
<style> #sampleChart { max-width: 550px; height: 300px;} </style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
</head>
<body>
<h2> Using the <i>Bootstrap </i> to draw multiple lines with a line plot</h2>
<canvas id = "sampleChart"> </canvas>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let canvas = document.getElementById("sampleChart");
let line1Data = [20, 10, 30, 40, 60, 70, 100, 120, 220, 200];
let line2Data = [10, 5, 20, 25, 60, 55, 47, 80, 100, 30, 55];
let line3Data = [30, 40, 50, 60, 70, 80, 90, 100, 102, 34];
var xValues = [20, 40, 60, 80, 100, 120, 140, 160, 180, 200, 220, 240, 260, 280, 300];
new Chart(canvas, {
type: "line",
data: {
labels: xValues,
datasets: [{
borderColor: "red",
pointBackgroundColor: "green",
fill: false,
data: line1Data,
label: "line 1"
}, {
borderColor: "yellow",
pointBackgroundColor: "blue",
fill: false,
data: line2Data,
label: "line 2"
}, {
borderColor: "black",
pointBackgroundColor: "pink",
fill: false,
data: line3Data,
label: "line 3"
}]
},
options: {
scales: {
xAxes: [{ ticks: { min: 5, max: 300 } }],
yAxes: [{ ticks: { min: 5, max: 300 } }],
}
}
});
</script>
</body>
</html>
Example 3
In the example below, we are creating the pie chart. We have taken three labels for gender and different values according to every gender. Afterward, we passed gender data to the data object and set up the color for every gender in the pie chart.
<html>
<head>
<style>
#sampleChart {
max-width: 300px;
height: 150px; }
* { text-align: center;}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js">
</script>
</head>
<body>
<h2>Using the <i> Bootstrap </i> to draw a pie chart </h2>
<p> Showing data of male, female, and others </p>
<canvas id = "pieChart"> </canvas>
<script>
let canvas = document.getElementById("pieChart");
new Chart(canvas, {
type: "pie",
data: {
labels: ["male", "female", "others"],
datasets: [{
backgroundColor: ["blue", "red", "green"],
borderWidth: 10,
data: [455, 240, 55]
}]
},
});
</script>
</body>
</html>
Users learned to create scatter, line, and pie charts in this tutorial. However, other types of charts are also available in the bootstrap library. Users can use any chart according to their requirements.
2K+ Views
