Skip to content
Related Articles

Related Articles

Improve Article

How to create chart using bootstrap ?

  • Last Updated : 09 Jul, 2021
Geek Week

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="https://d3js.org/d3.v4.min.js"></script>
  <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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :