How to incorporate chart.js in jsp file-CodePudding

I am new in javascript and have to use the libraries of Chart.js I have in a jsp file the following instruction for a button

window.open("test.jsp", "width=" 800 "height=" 580);

and in the test.jsp file this code:

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>test</title>

<script type=“text/javascript”>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/Chart.min.js"></script>
<script type=“test.jsp”>

<script type=“text/javascript”>


var ctx = document.getElementById('myChart');

var stars = [135850, 52122, 148825, 16939, 9763];
var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];

var myChart = new Chart(ctx, {
 type: 'bar',
 data: {
    labels: frameworks,
    datasets: [{
        label: 'Github Stars',
        data: stars
    }]
 },
})
</head>
<body>
 <canvas id="myChart" width="800" height="400"></canvas>

</body>
</html>

I am able to open the new window but I can't see anything inside. I would like to all the code runs in jsp file, without delegating to js and html files outside.

CodePudding user response：

There are different problems in your code.

The referenced Chart.js library does not exist. Instead of ...Chart.min.js, write ...chart.min.js (lowercase).
Define your custom JS code in a function and execute it only once the body and its canvas are fully loaded (<body onl oad="drawChart()">).

Please take a look at below runnable HTML code, it should run similarly with JSP.

<!DOCTYPE html>
<html lang="en">

<head>
  <title>test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>

  <script type="text/javascript">
    function drawChart() {
      var stars = [135850, 52122, 148825, 16939, 9763];
      var frameworks = ['React', 'Angular', 'Vue', 'Hyperapp', 'Omi'];
      new Chart('myChart', {
        type: 'bar',
        data: {
          labels: frameworks,
          datasets: [{
            label: 'Github Stars',
            data: stars
          }]
        },
      });
    }
  </script>
</head>

<body onload="drawChart()">
  <canvas id="myChart" width="800" height="400"></canvas>
</body>

</html>