d

mainJs.js

@@ -4,9 +4,7 @@ google.charts.load('current', {'packages':['corechart']});
       google.charts.setOnLoadCallback(drawAgeChart);
       google.charts.setOnLoadCallback(drawIncomeChart);
       google.charts.setOnLoadCallback(drawCityChart);
-
       function drawChart() {
-
         var data = google.visualization.arrayToDataTable([
           ['Task', 'Amount'],
           ['Dining',     38.30],
@@ -16,14 +14,10 @@ google.charts.load('current', {'packages':['corechart']});
           ['Entertainment', 20.50],
           ['Other', 320.40]
         ]);
-
-
         var options = {
           title: 'Spending Breakdown'
         };
-
         var chart = new google.visualization.PieChart(document.getElementById('piechart'));
-
         chart.draw(data, options);
       }
 
@@ -37,7 +31,6 @@ google.charts.load('current', {'packages':['corechart']});
           ['Entertainment', 20.50, 24.04],
           ['Other', 320.40, 45.03]
         ]);
-
         var options = {
           chart: {
             title: 'Spending Comparison',
@@ -45,12 +38,9 @@ google.charts.load('current', {'packages':['corechart']});
           },
           bars: 'horizontal' // Required for Material Bar Charts.
         };
-
+        var chart = new google.charts.Bar(document.getElementById('age_chart'));
-        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
-
         chart.draw(data, google.charts.Bar.convertOptions(options));
       }
-
       function drawIncomeChart() {
         var data = google.visualization.arrayToDataTable([
           ['Category', 'You', 'Average Person of Your Income'],
@@ -61,7 +51,6 @@ google.charts.load('current', {'packages':['corechart']});
           ['Entertainment', 20.50, 25.92],
           ['Other', 320.40, 105.25]
         ]);
-
         var options = {
           chart: {
             title: 'Spending Comparison',
@@ -69,9 +58,7 @@ google.charts.load('current', {'packages':['corechart']});
           },
           bars: 'horizontal' // Required for Material Bar Charts.
         };
-
+        var chart = new google.charts.Bar(document.getElementById('income_chart'));
-        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
-
         chart.draw(data, google.charts.Bar.convertOptions(options));
       }
 
@@ -85,7 +72,6 @@ google.charts.load('current', {'packages':['corechart']});
           ['Entertainment', 20.50, 11.42],
           ['Other', 320.40, 104.13]
         ]);
-
         var options = {
           chart: {
             title: 'Spending Comparison',
@@ -93,8 +79,6 @@ google.charts.load('current', {'packages':['corechart']});
           },
           bars: 'horizontal' // Required for Material Bar Charts.
         };
-
+        var chart = new google.charts.Bar(document.getElementById('city_chart'));
-        var chart = new google.charts.Bar(document.getElementById('barchart_material'));
-
         chart.draw(data, google.charts.Bar.convertOptions(options));
       }

prof.css

@@ -41,6 +41,7 @@ div.firstchart {
 
 div.text {
   border-top: 1px solid #45d7e8;
+  z-index: 5;
 }
 
 div.trans {
@@ -77,3 +78,28 @@ div.catRow {
   font-size: 20px;
   text-align: right;
 }
+
+div.bar {
+  overflow: hidden;
+}
+div.barchart {
+  height: 700px;
+  margin-top: -50px;
+}
+div.compareText {
+  font-family: 'Dosis', sans-serif;
+  font-size: 75px;
+  text-align: center;
+  color: grey;
+  border-bottom: 1px solid #45d7e8;
+}
+div.diffGraphs {
+  font-family: 'Dosis', sans-serif;
+  margin: 70px 0 50px 0;
+  color: green;
+  font-size: 30px;
+  text-align: center;
+}
+.btnC {
+  width: 100px;
+}

profJs.js

@@ -0,0 +1,22 @@
+/* $(document).ready({
+  $('#city_chart').hide();
+  $('#income_chart').hide();
+  $('.age').click(function() {
+    $('#age_chart').fadeIn();
+    $('#city_chart').hide();
+    $('#income_chart').hide();
+});
+
+  $('.income').click(function() {
+    $('#income_chart').fadeIn();
+    $('#age_chart').hide();
+    $('#city_chart').hide();
+});
+
+  $('.city').click(function() {
+    $('#city_chart').fadeIn();
+    $('#age_chart').hide();
+    $('#income_chart').hide();
+});
+
+});

profile.html

@@ -4,11 +4,13 @@
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript" src="mainJs.js"></script>
     <link type="text/css" rel="stylesheet" href="prof.css">
+    <script type="text/javascript" src="profJs.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
   </head>
 
   <body>
@@ -134,8 +136,38 @@
         </div>
 
     </div>
+<hr>
+    <div class="container-fluid bar">
+      <div class="row">
+        <div class="col-md-9">
+          <div id="age_chart" class="barchart"></div>
+        </div>
 
-    <div id="barchart_material" style="width: 900px; height: 500px;"></div>
+        <div class="col-md-3">
+          <div class="row compareText">
+            <div class="col-xs-12">Compare</div>
+          </div>
+          <div class="row diffGraphs age">
+            <button type="button" class="btn btn-info btnC age"><div class="col-xs-12"><font size="5px">Age</font></div></button>
+          </div>
+          <div class="row diffGraphs city">
+            <button type="button" class="btn btn-info btnC city"><div class="col-xs-12"><font size="5px">City</font></div></button>
+          </div>
+          <div class="row diffGraphs income">
+            <button type="button" class="btn btn-info btnC income"><div class="col-xs-12"><font size="5px">Income</font></div></button>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6">
+          <div id="income_chart" class="barchart"></div>
+        </div>
+
+        <div class="col-md-6">
+          <div id="city_chart" class="barchart"></div>
+        </div>
+      </div>
+    </div>
 
   </body>