When I add dynamic value in Google graph, it does not display the graph. Value successfully add in table in the console but graph did not display. Why? There any mistake that I done here?
Please read my code and give me some solution about it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<br/>
<div class="container">
<h2>Enter Information Here..</h2>
<form method="post">
<table border="1">
<tr>
<th>Position</th>
<th>Member 1</th>
<th>Member 2</th>
<th>Member 3</th>
<th>Member 4</th>
</tr>
<tr>
<td>Name</td>
<td><input class="form-control" name="name" type="text" id="name1"></td>
<td><input class="form-control" type="text" id="name2"></td>
<td><input class="form-control" type="text" id="name3"></td>
<td><input class="form-control" type="text" id="name4"></td>
</tr>
<tr>
<td>Opportunity Cost/ Salary</td>
<td><input class="form-control" name="salary" type="text" id="salary1"></td>
<td><input class="form-control" type="text" id="salary2"></td>
<td><input class="form-control" type="text" id="salary3"></td>
<td><input class="form-control" type="text" id="salary4"></td>
</tr>
<tr>
<td>Hours worked</td>
<td><input class="form-control" name="hours" type="text" id="hours1"></td>
<td><input class="form-control" type="text" id="hours2"></td>
<td><input class="form-control" type="text" id="hours3"></td>
<td><input class="form-control" type="text" id="hours4"></td>
</tr>
<tr>
<td>Invested Cash</td>
<td><input class="form-control" name="icash" type="text" id="invested_cash1"></td>
<td><input class="form-control" type="text" id="invested_cash2"></td>
<td><input class="form-control" type="text" id="invested_cash3"></td>
<td><input class="form-control" type="text" id="invested_cash4"></td>
</tr>
<tr>
<td>Contributed Cash</td>
<td><input class="form-control" name="ccash" type="text" id="contributed_cash1"></td>
<td><input class="form-control" type="text" id="contributed_cash2"></td>
<td><input class="form-control" type="text" id="contributed_cash3"></td>
<td><input class="form-control" type="text" id="contributed_cash4"></td>
</tr>
<tr>
<td>Date joined the project</td>
<td><input class="form-control" name="date" type="date" id="date1"></td>
<td><input class="form-control" type="date" id="date2"></td>
<td><input class="form-control" type="date" id="date3"></td>
<td><input class="form-control" type="date" id="date4"></td>
</tr>
<tr>
<td>Your Share $</td>
<td><input class="form-control" name="share" type="text" id="share$_1"></td>
<td><input class="form-control" type="text" id="share$_2"></td>
<td><input class="form-control" type="text" id="share$_3"></td>
<td><input class="form-control" type="text" id="share$_4"></td>
<td><input class="form-control" type="text" id="share$_total"></td>
</tr>
<tr>
<td>Your Share %</td>
<td><input class="form-control" name="yshare" type="text" id="share_1"></td>
<td><input class="form-control" type="text" id="share_2"></td>
<td><input class="form-control" type="text" id="share_3"></td>
<td><input class="form-control" type="text" id="share_4"></td>
<td><input class="form-control" type="text" id="share_total"></td>
</tr>
</table>
<br/>
<div class="form-group row">
<button type="button" onclick="getPrice(); drawChart();" class="btn btn-primary">Calcuate</button>
<!-- <input type="submit" name="submit" value="Append" class="btn btn-primary">-->
</div>
</form>
</div>
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
var share1;
var share2,share3,share4;
function getPrice() {
/* Get salary */
var salary1 = parseFloat(document.getElementById("salary1").value);
var salary2 = parseFloat(document.getElementById("salary2").value);
var salary3 = parseFloat(document.getElementById("salary3").value);
var salary4 = parseFloat(document.getElementById("salary4").value);
/* Get Hours */
var hours1 = parseFloat(document.getElementById("hours1").value);
var hours2 = parseFloat(document.getElementById("hours2").value);
var hours3 = parseFloat(document.getElementById("hours3").value);
var hours4 = parseFloat(document.getElementById("hours4").value);
/* Get Invested Cash */
var invested_cash1 = parseFloat(document.getElementById("invested_cash1").value);
var invested_cash2 = parseFloat(document.getElementById("invested_cash2").value);
var invested_cash3 = parseFloat(document.getElementById("invested_cash3").value);
var invested_cash4 = parseFloat(document.getElementById("invested_cash4").value);
/* Get Contributed Cash */
var contributed_cash1 = parseFloat(document.getElementById("contributed_cash1").value);
var contributed_cash2 = parseFloat(document.getElementById("contributed_cash2").value);
var contributed_cash3 = parseFloat(document.getElementById("contributed_cash3").value);
var contributed_cash4 = parseFloat(document.getElementById("contributed_cash4").value);
var invested_cash1 = hours1;
var contributed_cash1 = contributed_cash1;
var non_cash1 = invested_cash1 * 51.14;
var contribution_cash1 = contributed_cash1 * 4
var your_share1 = non_cash1 + contribution_cash1;
var invested_cash2 = hours2;
var contributed_cash2 = contributed_cash2;
var non_cash2 = invested_cash2 * 51.14;
var contribution_cash2 = contributed_cash2 * 4
var your_share2 = non_cash2 + contribution_cash2;
var invested_cash3 = hours3;
var contributed_cash3 = contributed_cash3;
var non_cash3 = invested_cash3 * 51.14;
var contribution_cash3 = contributed_cash3 * 4
var your_share3 = non_cash3 + contribution_cash3;
var invested_cash4 = hours4;
var contributed_cash4 = contributed_cash4;
var non_cash4 = invested_cash4 * 51.14;
var contribution_cash4 = contributed_cash4 * 4
var your_share4 = non_cash4 + contribution_cash4;
var invested_cash = hours1 + hours2 + hours3 + hours4;
var contributed_cash = contributed_cash1 + contributed_cash2 + contributed_cash3 + contributed_cash4;
var non_cash = invested_cash * 51.14;
var contribution_cash = contributed_cash * 4
var your_share = non_cash + contribution_cash;
document.getElementById("share$_1").value = "$" + your_share1.toFixed(2);
document.getElementById("share$_2").value = "$" + your_share2.toFixed(2);
document.getElementById("share$_3").value = "$" + your_share3.toFixed(2);
document.getElementById("share$_4").value = "$" + your_share4.toFixed(2);
var total = your_share1 + your_share2 + your_share3 + your_share4;
document.getElementById("share$_total").value = total.toFixed(2);
share1 = ((your_share1/total) * 100).toFixed(2);
share2 = ((your_share2/total) * 100).toFixed(2);
share3 = ((your_share3/total) * 100).toFixed(2);
share4 = ((your_share4/total) * 100).toFixed(2);
var share_total = parseFloat(share1) + parseFloat(share2)+ parseFloat(share3)+ parseFloat(share4);
document.getElementById("share_1").value = share1 + "%";
document.getElementById("share_2").value = share2 + "%";
document.getElementById("share_3").value = share3 + "%";
document.getElementById("share_4").value = share4 + "%";
document.getElementById("share_total").value = Math.round(share_total) + "%";
drawChart();
}
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var value1 = share1;
var value2 = share2;
var value3 = share3;
var value4 = share4;
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', value1],
['Eat', value2],
['Commute', value3],
['Watch TV', value4]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>
