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.
There are different problems in your code.
...Chart.min.js, write ...chart.min.js (lowercase).function and execute it only once the body and its canvas are fully loaded (<body onload="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>