stackoom
  简体   繁体   中英

How to add dynamic value in Google Chart

 原文  2017-04-25 04:11:28  4   1    javascript/ html/ css/ graph

Question

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>

1 answers

solution1
 0 ACCPTED  2017-04-25 04:59:50

What's up! Solved! All your values were string! These were called errors it's also called errors like this

Uncaught Error: Bootstrap tooltips require

and you must add script before bootstrap.min.js

link()

this must be like this 

<head>
    <title>YourTitle</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
    <!-- Custom CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
    <!-- <link href="css/style.css" rel="stylesheet"> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <!-- Bootstrap Core JavaScript -->
    <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.js"></script>
</head>


 <!DOCTYPE html> <html> <head> <title>YourTitle</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> <!-- Custom CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" /> <!-- <link href="css/style.css" rel="stylesheet"> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/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); var invested_cash1 = 1; var contributed_cash1 = 2; var non_cash1 = invested_cash1 * 51.14; var contribution_cash1 = contributed_cash1 * 4; var your_share1 = non_cash1 + contribution_cash1; var invested_cash2 = 2; var contributed_cash2 = 2; var non_cash2 = invested_cash2 * 51.14; var contribution_cash2 = contributed_cash2 * 4; var your_share2 = non_cash2 + contribution_cash2; var invested_cash3 = 2; var contributed_cash3 = 2; var non_cash3 = invested_cash3 * 51.14; var contribution_cash3 = contributed_cash3 * 4; var your_share3 = non_cash3 + contribution_cash3; var invested_cash4 = 2; var contributed_cash4 = 2; 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 = parseFloat(share1); var value2 = parseFloat(share2); var value3 = parseFloat(share3); var value4 = parseFloat(share4); alert("" + value1 + " " + typeof(value1)); alert("" + value2 + " "); alert("" + value3 + " "); alert("" + value4 + " "); 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>

Hope it helps you!

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Google chart add max value Dynamic Google chart depends on AngularJS $scope value How to make Google Link Chart Dynamic How to populate google chart with this dynamic array? How to use google chart in angularjs with dynamic data How to use dynamic icon with google map chart How to load dynamic data into google pie chart? How do I set dynamic value in Google chart wrap.setOptions? How to add a map popup with dynamic updating chart Google Line Chart - Dynamic add columns / rows from arraydatatable
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM