How to create chart using bootstrap ?
A chart in bootstrap is a graphical representation for data visualization, in which the data is represented by symbols. The various types of charts like a bar chart, line chart, pie chart, donut chart, etc are created with the help of Bootstrap. In other words, we can say that chart is a type of diagram or graph, that organizes and represents a set of numerical or qualitative data.
Example 1: We are creating a line chart by using bootstrap and JavaScript. In this example, we have used the chart.js file for creating a chart. The data is created according to the type of chart. The following chart has the type “line” with 2 different data both for working hours vs free hours.
HTML
< html > < link rel = type = "text/css" /> < script src = < script src = type = "text/javascript" ></ script > < script src = < script src = < style > .container { width: 70%; margin: 15px auto; } body { text-align: center; color: green; } h2 { text-align: center; font-family: "Verdana", sans-serif; font-size: 30px; } </ style > < body > < div class = "container" > < h2 >Line Chart</ h2 > < div > < canvas id = "myChart" ></ canvas > </ div > </ div > </ body > < script > var ctx = document.getElementById("myChart").getContext("2d"); var myChart = new Chart(ctx, { type: "line", data: { labels: [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday", ], datasets: [ { label: "work load", data: [2, 9, 3, 17, 6, 3, 7], backgroundColor: "rgba(153,205,1,0.6)", }, { label: "free hours", data: [2, 2, 5, 5, 2, 1, 10], backgroundColor: "rgba(155,153,10,0.6)", }, ], }, }); </ script > </ html > |
Output:

line chart with working and free hours
Example 2: In the following example, we created a donut chart by using bootstrap and JavaScript. In this example also, we have used the chart.js file for creating a donut chart. Doughnut charts are the modified version of Pie Charts with the area of center cut out.
HTML
< html > < script src = < link rel = "stylesheet" href = /> < link rel = type = "text/css" /> < script src = </ script > < script src = </ script > < script src = </ script > < style > body { text-align: center; color: green; } h2 { text-align: center; font-family: "Verdana", sans-serif; font-size: 40px; } </ style > < body > < div class = "col-xs-12 text-center" > < h2 >Donut Chart</ h2 > </ div > < div id = "donut-chart" ></ div > < script > var chart = bb.generate({ data: { columns: [ ["Blue", 2], ["orange", 4], ["green", 3], ], type: "donut", onclick: function (d, i) { console.log("onclick", d, i); }, onover: function (d, i) { console.log("onover", d, i); }, onout: function (d, i) { console.log("onout", d, i); }, }, donut: { title: "70", }, bindto: "#donut-chart", }); </ script > </ body > </ html > |
Output:

Doughnut chart