Added comparrison chart

2017-09-15 22:12:56 -07:00
parent fbe2fa1467
commit 54423d0d97
2 changed files with 64 additions and 14 deletions
@@ -1,18 +1,60 @@
 google.charts.load('current', {'packages':['corechart']});
 google.charts.setOnLoadCallback(drawChart);
+google.charts.load('current', {'packages':['bar']});
+google.charts.setOnLoadCallback(drawChart);

 function drawChart() {

-  var data = google.visualization.arrayToDataTable([
-    ['Task', 'Hours per Day'],
-    ['Food and Dining',     11],
-    ['Clothing',  2],
-    ['Entertainment', 2],
-    ['Transportation',    7],
-    ['Other',   1]
-  ]);
+    var data = google.visualization.arrayToDataTable([
+        ['Task', 'Hours per Day'],
+        ['Food and Dining',     11],
+        ['Clothing',  2],
+        ['Entertainment', 2],
+        ['Transportation',    7],
+        ['Other',   1]
+    ]);

-  var options = {
-    title: 'Spending'
-    is3D: true
-  };
+    var options = {
+        title: 'Spending'
+        is3D: true
+    }
+};
+
+function drawChart() {
+    var data = google.visualization.arrayToDataTable([
+        ['Category', 'You', 'Average 18 Year Old'],
+        ['Food and Dining', 1000, 400],
+        ['Utilities', 1170, 460],
+        ['Clothing', 660, 120],
+        ['Entertainment', 1030, 540],
+        ['Transportation', 1030, 540],
+        ['Other', 1030, 540]
+    ]);
+
+    var options = {
+        chart: {
+            title: 'Comparing Spending Habits',
+            subtitle: 'Based on other 18 year olds',
+        },
+        bars: 'horizontal', // Required for Material Bar Charts.
+        hAxis: {
+            format: 'decimal'
+        },
+        height: 400,
+        colors: ['#1b9e77', '#d95f02', '#7570b3']
+    };
+
+    var chart = new google.charts.Bar(document.getElementById('chart_div'));
+
+    chart.draw(data, google.charts.Bar.convertOptions(options));
+
+    var btns = document.getElementById('btn-group');
+
+    btns.onclick = function(e) {
+
+        if (e.target.tagName === 'BUTTON') {
+            options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
+            chart.draw(data, google.charts.Bar.convertOptions(options));
+        }
+    }
+}
@@ -1,11 +1,19 @@
 <html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
-
    </head>

    <body>
-      <div id="piechart" style="width: 900px; height: 500px;"></div>
+        <div id="piechart" style="width: 900px; height: 500px;"></div>
+        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+        <div id="chart_div"></div>
+        <br/>
+        <div id="btn-group">
+            <button class="button button-blue" id="none">No Format</button>
+            <button class="button button-blue" id="scientific">Scientific Notation</button>
+            <button class="button button-blue" id="decimal">Decimal</button>
+            <button class="button button-blue" id="short">Short</button>
+        </div>
    </body>

 </html>