Html Question posted in
Some basic documentation can be found here.

my javascript bar chart doesn't come up on my index.html page

Heyy, I’ve been working on my web app project and I needed to do a graph so I tried it separately in another file and it works so well but when I paste in the index.html it doesn’t I don’t know why

the one pie chart is working perfectly but not the bar chart. I’ve been trying to change the version, etc but nothing works at all.

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>˚₊‧ Welcome Page ‧₊˚</title>
<link href="indexstyle.css" rel="stylesheet" type="text/css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
</head>
<body>
<h1>Welcome, <b>𐙚 ♡</b></h1>
<div class="topsection">
<div class="leftside">
<h2>Active Population</h2>
<ul id="activepopulation"><li onclick="populationfunction('AIs',2020)">AIs - F2020 (2)</li>
<li onclick="populationfunction('AIs',2021)">AIs - S2021 (2)</li>
<li onclick="populationfunction('CS',2020)">CS - F2020 (4)</li>
<li onclick="populationfunction('CS',2021)">CS - S2021 (3)</li>
<li onclick="populationfunction('DSA',2020)">DSA - F2020 (7)</li>
<li onclick="populationfunction('DSA',2021)">DSA - S2021 (4)</li>
<li onclick="populationfunction('ISM',2020)">ISM - F2020 (4)</li>
<li onclick="populationfunction('ISM',2021)">ISM - S2021 (3)</li>
<li onclick="populationfunction('SE',2020)">SE - F2020 (4)</li>
<li onclick="populationfunction('SE',2021)">SE - S2021 (4)</li></ul>
</div>
<div id="rightside">
<div id="piechart">
<canvas height="400" id="pieChart" width="400"></canvas>
<script>
var data = [
  {
      value: 4,
      color:"#fcedf5",
      highlight: "#e9cdfa",
      label: "AIs"
  },
  {
      value: 7,
      color: "#fad7e9",
      highlight: "#e9cdfa",
      label: "CS"
  },
  {
      value: 11,
      color: "#fcbdde",
      highlight: "#e9cdfa",
      label: "DSA"
  },
  {
      value: 7,
      color: "#ffb0d9",
      highlight: "#e9cdfa",
      label: "ISM"
  },
  {
      value: 8,
      color: "#fc9acd",
      highlight: "#e9cdfa",
      label: "SE"
  }];
var ctx = document.getElementById("pieChart").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);
</script>
</div>
</div>
</div>
<div class="bottomsection">
<div class="leftside">
<h2>Overall atendance</h2>
<ul id="attendance"><li onclick="populationfunction('AIs',2020)">AIs - F2020 (69%)</li>
<li onclick="populationfunction('AIs',2021)">AIs - S2021 (78%)</li>
<li onclick="populationfunction('CS',2020)">CS - F2020 (70%)</li>
<li onclick="populationfunction('CS',2021)">CS - S2021 (67%)</li>
<li onclick="populationfunction('DSA',2020)">DSA - F2020 (68%)</li>
<li onclick="populationfunction('DSA',2021)">DSA - S2021 (76%)</li>
<li onclick="populationfunction('ISM',2020)">ISM - F2020 (71%)</li>
<li onclick="populationfunction('ISM',2021)">ISM - S2021 (66%)</li>
<li onclick="populationfunction('SE',2020)">SE - F2020 (74%)</li>
<li onclick="populationfunction('SE',2021)">SE - S2021 (68%)</li></ul>
</div>
<div id="rightside">
<div id="barChart">
<canvas height="400" id="barChart" width="400"></canvas>
<script>
var data = {
    labels: ["AIs", "CS", "DSA", "ISM", "SE"],
        datasets: [{
            label: "2020 Intake",
            data: [0.69, 0.7, 0.68, 0.71, 0.74],
            backgroundColor: ["#fcedf5", "#fad7e9", "#fcbdde", "#ffb0d9", "#fc9acd"],
            borderColor: "#fff",
             borderWidth: 1
        },{
            label: "2021 Intake",
            data: [0.78, 0.67, 0.76, 0.71, 0.74],
            backgroundColor: ["#fcedf5", "#fad7e9", "#fcbdde", "#ffb0d9", "#fc9acd"],
            borderColor: "#fff",
            borderWidth: 1
        }]
    };

var ctx = document.getElementById("barChart").getContext("2d");
var myNewChart = new Chart(ctx, {
    type: 'bar',
    data: data,
        options: {
            indexAxis: 'y',
            scales: {
            x: {
                min: 0,
                max: 1,
                ticks: {
                callback: function(value) {
                return (value * 100) + "%";
                }}}}}
        });</script>
</div>
</div>
</div>
<p class="footer">Website last generation 10th Feb 2024 ₍ᐢ.  ̫.ᐢ₎ </p>
<script crossorigin="anonymous" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    function populationfunction(population,year){
        $.ajax({
            url: "http://localhost:8001/students",
            type: "GET",
            data: {
                key1: population,
                key2: year
            },
            error: function(xhr, status, error){
                alert('Error: ' + xhr.status) 
            }
        })
    }
</script>
</body>
</html>
Tags:

3

Answers


  1. 0

    The issue is with your version of the Chart.js CDN.

    Use this instead and it should work:

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    Login or Signup to reply.
  2. 0

    Make sure that you put the first <script> into head, the <canvas> into the <body>, and the second <script> below <body>.

    Login or Signup to reply.
  3. 0

    So that’s how I got it working:

    <!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>˚₊‧ Welcome Page ‧₊˚</title>
  <link href="indexstyle.css" rel="stylesheet" type="text/css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

  <!--<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>-->


</head>

<body>
  <h1>Welcome, <b>𐙚 ♡</b></h1>
  <div class="topsection">
    <div class="leftside">
      <h2>Active Population</h2>
      <ul id="activepopulation">
        <li onclick="populationfunction('AIs',2020)">AIs - F2020 (2)</li>
        <li onclick="populationfunction('AIs',2021)">AIs - S2021 (2)</li>
        <li onclick="populationfunction('CS',2020)">CS - F2020 (4)</li>
        <li onclick="populationfunction('CS',2021)">CS - S2021 (3)</li>
        <li onclick="populationfunction('DSA',2020)">DSA - F2020 (7)</li>
        <li onclick="populationfunction('DSA',2021)">DSA - S2021 (4)</li>
        <li onclick="populationfunction('ISM',2020)">ISM - F2020 (4)</li>
        <li onclick="populationfunction('ISM',2021)">ISM - S2021 (3)</li>
        <li onclick="populationfunction('SE',2020)">SE - F2020 (4)</li>
        <li onclick="populationfunction('SE',2021)">SE - S2021 (4)</li>
      </ul>
    </div>
    <div id="rightside">
      <div id="piechart">
        <canvas height="400" id="pieChartCanvas" width="400"></canvas>
        <script>
          var data = [{
              value: 4,
              color: "#fcedf5",
              highlight: "#e9cdfa",
              label: "AIs"
            },
            {
              value: 7,
              color: "#fad7e9",
              highlight: "#e9cdfa",
              label: "CS"
            },
            {
              value: 11,
              color: "#fcbdde",
              highlight: "#e9cdfa",
              label: "DSA"
            },
            {
              value: 7,
              color: "#ffb0d9",
              highlight: "#e9cdfa",
              label: "ISM"
            },
            {
              value: 8,
              color: "#fc9acd",
              highlight: "#e9cdfa",
              label: "SE"
            }
          ];
          var ctx = document.getElementById("pieChartCanvas").getContext("2d");
          var myNewChart = new Chart(ctx).PolarArea(data);
        </script>
      </div>
    </div>
  </div>
  <div class="bottomsection">
    <div class="leftside">
      <h2>Overall atendance</h2>
      <ul id="attendance">
        <li onclick="populationfunction('AIs',2020)">AIs - F2020 (69%)</li>
        <li onclick="populationfunction('AIs',2021)">AIs - S2021 (78%)</li>
        <li onclick="populationfunction('CS',2020)">CS - F2020 (70%)</li>
        <li onclick="populationfunction('CS',2021)">CS - S2021 (67%)</li>
        <li onclick="populationfunction('DSA',2020)">DSA - F2020 (68%)</li>
        <li onclick="populationfunction('DSA',2021)">DSA - S2021 (76%)</li>
        <li onclick="populationfunction('ISM',2020)">ISM - F2020 (71%)</li>
        <li onclick="populationfunction('ISM',2021)">ISM - S2021 (66%)</li>
        <li onclick="populationfunction('SE',2020)">SE - F2020 (74%)</li>
        <li onclick="populationfunction('SE',2021)">SE - S2021 (68%)</li>
      </ul>
    </div>
    <div id="rightside">
      <div id="barChart" style="height: auto; width: 500px;">
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>
        <canvas id="barChartCanvas"></canvas>
        <script>
          var data = {
            labels: ["AIs", "CS", "DSA", "ISM", "SE"],
            datasets: [{
              label: "2020 Intake",
              data: [0.69, 0.7, 0.68, 0.71, 0.74],
              backgroundColor: ["#fcedf5", "#fad7e9", "#fcbdde", "#ffb0d9", "#fc9acd"],
              borderColor: "#fff",
              borderWidth: 1
            }, {
              label: "2021 Intake",
              data: [0.78, 0.67, 0.76, 0.71, 0.74],
              backgroundColor: ["#fcedf5", "#fad7e9", "#fcbdde", "#ffb0d9", "#fc9acd"],
              borderColor: "#fff",
              borderWidth: 1
            }]
          };

          var ctx = document.getElementById("barChartCanvas").getContext("2d");
          var myNewChart = new Chart(ctx, {
            type: 'bar',
            data: data,
            options: {
              indexAxis: 'y',
              scales: {
                x: {
                  min: 0,
                  max: 1,
                  ticks: {
                    callback: function(value) {
                      return (value * 100) + "%";
                    }
                  }
                }
              }
            }
          });
        </script>
      </div>
    </div>
  </div>
  <p class="footer">Website last generation 10th Feb 2024 ₍ᐢ. ̫.ᐢ₎ </p>
  <script crossorigin="anonymous" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    function populationfunction(population, year) {
      $.ajax({
        url: "http://localhost:8001/students",
        type: "GET",
        data: {
          key1: population,
          key2: year
        },
        error: function(xhr, status, error) {
          alert('Error: ' + xhr.status)
        }
      })
    }
  </script>
</body>

</html>

    Changes:

    1. changed the id of barChart to barChartCanvas, as getContext() gave an error as it tried to get the context of the div element. (Though it worked for the first graph I also changed it there)

    2. Added the link to the javascript file you provided in the code before you showed the index file directly above the barChartCanvas. I tried putting it into the head, but then the first graph didn’t show up. I suspect that one is overwrighting the other in some way, but don’t know how.

    3. added style="width:500px height:auto" to barChart, as adding witdh and height to the barChartCanvas didn’t work (maybe due to the other library)

    It’s not perfect but it works, and maybe with that you know how to improve it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search