talksik/financeCategories
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

charts work

Browse Source
This commit is contained in:
Sajal Sharma
2017-09-15 22:44:16 -07:00
parent 3e059c2b58
commit 833f2eeb97
2 changed files with 35 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mainJs.js
+34 -7
View File
@@ -1,22 +1,49 @@
google.charts.load('current', {'packages':['corechart']}); google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart); google.charts.setOnLoadCallback(drawChart);
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawBarChart);
function drawChart() { function drawChart() {
var data = google.visualization.arrayToDataTable([ var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'], ['Task', 'Amount'],
['Work', 11], ['Food and Dining', 11],
['Eat', 2], ['Transportation', 2],
['Commute', 2], ['Utilities', 2],
['Watch TV', 2], ['Clothing', 2],
['Sleep', 7] ['Entertainment', 2],
['Other', 7]
]); ]);
var options = { var options = {
title: 'My Daily Activities' title: 'Spending Breakdown'
}; };
var chart = new google.visualization.PieChart(document.getElementById('piechart')); var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options); chart.draw(data, options);
} }
function drawBarChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'You', 'Average 18 Year Old'],
['Food and Dining', 1000, 400],
['Transportation', 1170, 460],
['Utilities', 660, 1120],
['Clothing', 1030, 540],
['Entertainment', 1030, 540],
['Other', 1030, 540]
]);
var options = {
chart: {
title: 'Spending Comparison',
subtitle: 'Compared to other 18 year olds',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
profile.html
+1 -1
View File
@@ -5,6 +5,6 @@
</head> </head>
<body> <body>
<div id="piechart" style="width: 900px; height: 500px;"></div> <div id="piechart" style="width: 900px; height: 500px;"></div>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body> </body>
</html> </html>