I'm new to .js programming and I have a problem with google charts in javascript. I'm using a simple HTML form where I enter some data, then on button click my script runs.
I would like the code to re-draw (or update) the chart on every button click.
The problem seems to be, that once the google library has finished loading for the first time, my script stops executing at the point where the command for loading is.
I tried the solution from this post Google chart redraw onclick, but it didn't work for me.
The file looks like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id="form">
<!------------------------------------------------------------------------------------------------------>
<div id="gender">
<h3>Gender</h3>
<fieldset>
<input type="radio" id="male" name="gender_select" class="optGender" value="männlich" checked><span class="optGender">male</span></input><br>
<input type="radio" id="female" name="gender_select" class="optGender" value="weiblich" ><span class="optGender">female</span></input><br>
Bodyweight: <input type="text" id="bodyweight"></input>
</fieldset>
</div>
<!------------------------------------------------------------------------------------------------------>
<div id="chart">
</div>
<!------------------------------------------------------------------------------------------------------>
<div id="squat">
<p>
<h3>Squat</h3>
<fieldset>
<span class="spreps">Reps</span><input type="text" id="reps_squat" required><br>
<span class="spweight">Weight</span><input type="text" id="weight_squat" required><br>
<span class="spmax">Calculated Max</span><input type="text" id="total_squat" readonly><br>
</fieldset>
</p>
</div>
<!------------------------------------------------------------------------------------------------------>
<!------------------------------------------------------------------------------------------------------>
<div id="bench">
<p>
<h3>Benchpress</h3>
<fieldset>
<span class="spreps">Reps</span><input type="text" id="reps_bench" required><br>
<span class="spweight">Weight</span><input type="text" id="weight_bench" required><br>
<span class="spmax">Calculated Max</span><input type="text" id="total_bench" readonly><br>
</fieldset>
</p>
</div>
<!------------------------------------------------------------------------------------------------------>
<!------------------------------------------------------------------------------------------------------>
<div id="deadlift">
<p>
<h3>Deadlift</h3>
<fieldset>
<span class="spreps">Reps</span><input type="text" id="reps_deadlift" required><br>
<span class="spweight">Weight</span><input type="text" id="weight_deadlift" required><br>
<span class="spmax">Calculated Max</span><input type="text" id="total_deadlift" readonly><br>
</fieldset>
</p>
</div>
<!------------------------------------------------------------------------------------------------------>
<p>
<input type="button" alt="Berechnen" class="button" id="btn_calcTotal" value="Total berechnen" onclick="initialize()">
</p>
<!------------------------------------------------------------------------------------------------------>
<div id="total">
<p>
<h3>calculated Total</h3>
<input type="text" id="total_all" readonly>
</p>
</div>
<!------------------------------------------------------------------------------------------------------>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<!------------------------------------------------------------------------------------------------------>
<script>
function initialize() {
// delete old entries
document.getElementById("total_squat").value = "";
document.getElementById("total_bench").value = "";
document.getElementById("total_deadlift").value = "";
document.getElementById("total_all").value = "";
// read weight
var dWeight = parseFloat(document.getElementById("bodyweight").value);
// read gender & get weightclass
var sGender = "";
if (document.getElementById("male").checked == true ) {
sGender = document.getElementById("male").value;
}
else {
sGender = document.getElementById("female").value;
}
// read exercise values
var irepsSquat = parseFloat(document.getElementById("reps_squat").value.replace(',','.'));
var dweightSquat = parseFloat(document.getElementById("weight_squat").value.replace(',','.'));
var irepsBench = parseFloat(document.getElementById("reps_bench").value.replace(',','.'));
var dweightBench = parseFloat(document.getElementById("weight_bench").value.replace(',','.'));
var irepsDeadlift = parseFloat(document.getElementById("reps_deadlift").value.replace(',','.'));
var dweightDeadlift = parseFloat(document.getElementById("weight_deadlift").value.replace(',','.'));
// check if reps & weight are valid -> calculate (Squat)
if (check(irepsSquat) || check(dweightSquat)) {
window.alert("Bitte Wiederholungen & Übungsgewicht eintragen");
return;
}
else {
var total_sq = calculate(irepsSquat, dweightSquat);
}
// check if reps & weight are valid -> calculate (Benchpress)
if (check(irepsBench) || check(dweightBench)){
window.alert("Bitte Wiederholungen & Übungsgewicht eintragen");
return;
}
else {
var total_bp = calculate(irepsBench, dweightBench);
}
// check if reps & weight are valid -> calculate (Deadlift)
if (check(irepsBench) || check(dweightBench)){
window.alert("Bitte Wiederholungen & Übungsgewicht eintragen");
return;
}
else {
var total_dl = calculate(irepsDeadlift, dweightDeadlift);
}
// calculate total & wilk points -> write it
document.getElementById("total_squat").value = total_sq;
document.getElementById("total_bench").value = total_bp;
document.getElementById("total_deadlift").value = total_dl;
var total_all = (parseFloat(total_sq) + parseFloat(total_bp) + parseFloat(total_dl)).toFixed(2);
document.getElementById("total_all").value = total_all;
// Load the Visualization API
google.charts.load("current", {packages:['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(loadChartData(total_all));
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Checks ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function check(val) {
if (isNaN(val)) {
return true;
}
else {
return false;
}
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ calculate 1RM ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function calculate(iReps, dWeightE) {
return (dWeightE/(1.0278-(0.0278*iReps))).toFixed(2);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function loadChartData(total_all) {
var dnorm1 = 300;
var dnorm2 = 450;
// Create the data table
var data = new google.visualization.DataTable();
data.addColumn('string', 'label');
data.addColumn('number', 'Weight');
data.addRows([
['Own Total', parseFloat(total_all)],
['Kadernorm 1', parseFloat(dnorm1)],
['Kadernorm 2', parseFloat(dnorm2)]
]);
drawChart(data);
}
function drawChart(data) {
// Instantiate new chart
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
// Set chart options
var options = {'title':'Comparison of own Total vs. national team levels in kg',
'width':700,
'height':400,
};
// Draw chart, passing in some options
chart.draw(data, options);
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
</script>
</form>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire