Make this code better

HELP ME PLEASE

It is a mess, I need to fix the variables and make two charts appear and work on the page. PLEASE HELP ME.

index.html
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); google.charts.setOnLoadCallback(drawChart2); //first chart function drawChart() { mygender = document.getElementById("thedropdown").value; info = [{gender: "male", work: 40, eat: 8, commute: 2, tv: 3, sleep: 7}, {gender: "female", work: 45, eat: 9, commute: 3, tv: 5, sleep: 8} ]; for(i=0; i<info.length; i++) { //gets the total, adds both lines together in the dataset if(mygender == "total") { work = info[0].work + info[1].work; eat = info[0].eat + info[1].eat; commute = info[0].commute + info[1].commute; tv = info[0].tv + info[1].tv; sleep = info[0].sleep + info[1].sleep; } else if(mygender == info[i].gender) { work = info[i].work; eat = info[i].eat; commute = info[i].commute; tv = info[i].tv; sleep = info[i].sleep; }// end if } // end for var data = google.visualization.arrayToDataTable([ ['Country', 'Happiness Rank'], ['Norway', norway], ['Denmark', denmark], ['Iceland', iceland], ['Switzerland', switzerland], ['Finland', finland] ]); var options = { title: 'Happiness Rank' }; var chart = new google.visualization.PieChart(document.getElementById('piechart')); chart.draw(data, options); } //second chart - function needs a unique name function drawChart2() { mycity = document.getElementById("thedropdown2").value; info = [{city: "Austin", gender: "male", work: 40, eat: 8, commute: 2, tv: 3, sleep: 7}, {city: "Austin", gender: "female", work: 45, eat: 9, commute: 3, tv: 5, sleep: 8}, {city: "Boulder", gender: "male", work: 50, eat: 7, commute: 5, tv: 8, sleep: 6}, {city: "Boulder", gender: "female", work: 32, eat: 5, commute: 6, tv: 10, sleep: 6} ]; for(i=0; i<info.length; i++) { if(mycity == info[i].city && info[i].gender=="male") { workmale = info[i].work; eatmale = info[i].eat; commutemale = info[i].commute; tvmale = info[i].tv; sleepmale = info[i].sleep; }// end if else if(mycity == info[i].city && info[i].gender=="female") { workfemale = info[i].work; eatfemale = info[i].eat; commutefemale = info[i].commute; tvfemale = info[i].tv; sleepfemale = info[i].sleep; }// end if } // end for var data = google.visualization.arrayToDataTable([ ['Element', 'Male', 'Female'], ['work', workmale, workfemale], ['eat', eatmale, eatfemale], ['commute', commutemale, commutefemale], ['tv', tvmale, tvfemale], ['sleep', sleepmale, sleepfemale] ]); var options = { title: 'Weekly Activities', }; var chart = new google.visualization.BarChart(document.getElementById('div_chart')); chart.draw(data, options); } </script> <style> #piechart { height: 600px; } #div_chart { height: 400px; } .chart { width: 100%; } </style> </head> <body> <!-- First Chart in HTML, calls drawChart --> <form id="form1" onchange="drawChart()" > <select id="thedropdown"> <option value="total">Total</option> <option value="male">Male</option> <option value="female">Female</option> </select> </form> <div class="chart"> <div id="piechart"></div> </div> <!-- 2nd Chart in HTML, calls drawChart2 --> <!-- needs unique ids for form and dropdown --> <form id="form2" onchange="drawChart2()" > <select id="thedropdown2"> <option value="Austin">Austin</option> <option value="Boulder">Boulder</option> </select> </form> <div class="chart"> <div id="div_chart"></div> </div> </body> </html>

Reactions 0 reactions

No reactions yet, be the first: comment or tweak the code

Comment on this code:

Please Login or Register to leave a comment.