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

d

Browse Source
This commit is contained in:
Arjun Patel
2017-09-16 04:05:08 -07:00
parent f227c084c5
commit f9ce963c37
4 changed files with 84 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mainJs.js
+3 -19
View File
@@ -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('barchart_material'));
var chart = new google.charts.Bar(document.getElementById('age_chart'));
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('barchart_material'));
var chart = new google.charts.Bar(document.getElementById('income_chart'));
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('barchart_material'));
var chart = new google.charts.Bar(document.getElementById('city_chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
prof.css
+26
View File
@@ -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
+22
View File
@@ -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
+33 -1
View File
@@ -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>