score:1
Accepted answer
you need to initialize all variables into the function of button click, instead of the outside that function.
what happening in your case is, all variables are loading only once when main.js is loading and at that time your input field's values will be blank. so, your all variables will be loaded with blank values, that's why the chart is blank.
check below code:
document.queryselector("button").addeventlistener("click", () => {
let timespend = document.queryselector("#time_spend").value;
let breaktime = document.queryselector("#break_time").value;
let fsubject = document.queryselector("#first_subjects").value;
let ssubject = document.queryselector("#second_subjects").value;
let tsubject = document.queryselector("#third_subjects").value;
let mostcon = document.queryselector("#first_percentage").value;
let seccon = document.queryselector("#second_percentage").value;
let thirdcon = document.queryselector("#third_percentage").value;
let fsubjectv = (mostcon / 100) * (timespend + breaktime);
let ssubjectv = (seccon / 100) * (timespend + breaktime);
let tsubjectv = (thirdcon / 100) * (timespend + breaktime);
const canvasele = document.createelement("canvas");
canvasele.id = "mychart";
let mychart = canvasele.getcontext("2d");
const firstele = document.getelementsbyclassname("container")[0].children[0];
if (firstele) {
document
.getelementsbyclassname("container")[0]
.replacechild(canvasele, firstele);
} else {
document.getelementsbyclassname("container")[0].appendchilde(canvasele);
}
let piechart = new chart(mychart, {
type: "pie",
data: {
labels: ["time spend", "break time", fsubject, ssubject, tsubject],
datasets: [
{
label: "plan",
data: [timespend, breaktime, mostcon, seccon, thirdcon],
backgroundcolor: ["black", "red", "orange", "green", "blue"]
}
]
},
options: {}
});
});
.container{
height:500px;
width:500px;
}
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.1/chart.min.js"></script>
<link rel="stylesheet" href="css/main-style.css" />
<title>student planner</title>
</head>
<body>
<header>
<div class="title">
<h1>the student planner</h1>
</div>
<div class="sub_header">
<h3>a simple planner to organise your time</h3>
<h3>let's plan your session</h3>
</div>
</header>
<main>
<input type="number" id="time_spend" class="text-box" placeholder="how much time do you have?" />
<input type="number" id="break_time" class="text-box" placeholder="how many breaks do you want to have?" />
<br>
<input type="text" id="first_subjects" class="subjects-box" placeholder="most confident subject?" />
<input type="number" id="first_percentage" class="percantage_subject" placeholder="understand percentage ">
<input type="text" id="second_subjects" class="subjects-box" placeholder="second confident subject?" />
<input type="number" id="second_percentage" class="percantage_subject" placeholder="understand percentage ">
<input type="text" id="third_subjects" class="subjects-box" placeholder="third subject?" />
<input type="number" id="third_percentage" class="percantage_subject" placeholder="understand percentage ">
<br>
<button type="button" class="button">finished</button>
<div class="container">
<canvas id="mychart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.7.1/chart.min.js"></script>
<script src="js/main.js"></script>
</main>
<footer>
<p>© dk_code</p>
<p>12/3/2022</p>
</footer>
</body>
</html>
Source: stackoverflow.com
Related Query
- Can't find the way to calculate and output it
- Is there any way to change the font color and size of labels in Chartjs 3.0.0
- displaying the output on chart.js using Django and HTML
- How can I calculate a value and place it inside the last bar in a Chart.JS bar chart?
- Is there a way to align title and legend on the same line?
- I am using chart js to draw a chart. I did everything right but i don't know why the x axis and y axis label is not comming in chart. code below
- What is the correct way to send 2 parameters in socket.io using lambdas? (I get undefined when printing in client and server)
- Calculate the average distance between two data sets of X and Y (in JS)
- What's the most effective way to implement a radar plot with 50 points at arbitrary locations using chart.js
- ChartJS and jsPDF - why the background is black?
- How to change the color of legend in chartjs and be able to add one more legend?
- Resize the width and height of the ng2-charts
- charts.js straight lines - i cant find a solution
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart.js - mixing bar and line graphs - can I get the lines to fill the full column?
- Remove the label and show only value in tooltips of a bar chart
- what is the correct way to destructure a nested json object with fetch?
- chart.js LIne Graphs: Fill area above line as opposed to below and to the right
- Chart js: how can I align the legend and the title
- What is the syntax for require.config for chartjs-plugin-streaming and dependencies using RequireJS?
- Find intersection between the chart lines in chartjs
- ChartJS Line chart cut off at the top and bottom
- How can I display the xAxes and yAxes data in the tooltip, Chart JS?
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- unable to add background color to the canvas using jspdf and chartjs
- How to get the actual chart width and height in chart.js
- increase the gap between y-axis and first x-axis value chart.js
- How to Increase the label font size and decrease the size of my pie using chart.js?
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- How to draw a needle on a custom donut chart and add datapoints to the needle?
More Query from same tag
- How to create chart.js vertical bar chat with rounded corners in angular 6?
- How to use custom rendering methods of chartJs through ng2-charts angular?
- Charts.js not using the right colors
- Chart.js LineChart how to show only part of dataset and support horizontal scrolling
- Charts js only showing 2 data points on sparkline
- ChartJS scatterplot multi-line tooltip, one box
- Multiple chart on one page using chart.js and Flask app
- Chart.js colors in bar chart not showing
- Multi dataset line graph from table
- Pass Data From Node/Express to Front-End Javascript
- ChartJS pie chart with simple parsing options doesn't render, only works when set as bar/line chart
- Why my ajax function does not work on yii2
- Angular Chart JS prevent x label causing overflow
- Chart.js 2.9.4 - howto set a margin for axes min\max and time axis label separation
- ChartJS showing old values when mouse over on Doughnut after updating values
- functional component not re-rendering after setState update hook
- ChartJS - Set different hover-text than x-axis description
- Unexpected behavior with chart.js
- How to display average line in chart.js
- ChartJS, merge legends for multiple charts
- Chart JS add max value to legend
- Change color according to data in pie chart.js
- ReactJs issues with setstate on array in ChartJs
- Chartjs - tooltip - different corner radius
- Example: Doughnut | Error: Uncaught ReferenceError: Utils is not defined
- Dynamic Chart.js goes blank on resize
- How to include adapters and plugins with ChartJS
- How to set min max for x axis depend on data with Chartjs and Spring Boot?
- How to add ChartJS code in Html2Pdf to view image
- Chart JS: Set Spacing Between Ticks on Y-Axis