Skip to content

Commit

Permalink
working on mpg graph
Browse files Browse the repository at this point in the history
  • Loading branch information
@imkevinxu
imkevinxu committed Jun 9, 2013
1 parent 175f50b commit 4becf02
Show file tree
Hide file tree
Showing 7 changed files with 161 additions and 37 deletions.
42 changes: 38 additions & 4 deletions prototype/media/css/application.css
View file
Expand Up @@ -193,6 +193,29 @@ footer {
padding-bottom: 20px;
}

#graph {
background-color: #9b59b6;
border: 4px solid #9b59b6;
margin-top: 20px;
padding-left: 20px;
}

#graph .header {
color: white;
padding-bottom:10px;
}

#graph .data {
text-align: center;
background-color: white;
}

#myChart {
margin-left: -48px;
margin-top: 20px;
margin-bottom: 20px;
}

#scores {
background-color: #E74C3C;
border: 4px solid #E74C3C;
Expand Down Expand Up @@ -246,7 +269,7 @@ a[data-toggle="tooltip"] {



#sidebar {
#sidebar, #dummydata {
position: absolute;
left: 0;
top: 103px;
Expand All @@ -255,17 +278,17 @@ a[data-toggle="tooltip"] {
border-left: none;
}

#sidebar ul {
#sidebar ul, #dummydata ul {
list-style-type: none;
margin: 0;
}

#sidebar li {
#sidebar li, #dummydata li {
padding: 10px 20px;
text-transform: uppercase;
}

#sidebar a {
#sidebar a, #dummydata a {
text-decoration: none;
color: white;
}
Expand All @@ -274,6 +297,17 @@ a[data-toggle="tooltip"] {
background-color: #7F8C8D;
}

#dummydata {
top: 250px;
background-color: #e74c3c;
border: 4px solid #c0392b;
border-left: none;
}

#dummydata a:hover li, #dummydata li.active {
background-color: #c0392b;
}


#map-canvas {
margin-top: 20px;
Expand Down
39 changes: 39 additions & 0 deletions prototype/media/js/Chart.min.js
View file

Large diffs are not rendered by default.

57 changes: 29 additions & 28 deletions prototype/media/js/application.js
View file
Expand Up @@ -152,37 +152,38 @@ jQuery.fn.slideRightIn = function(speed, easing, callback) {
var ctx = $("#myChart").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.

var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(29, 221, 184, 0.5)",
strokeColor : "#1ABC9C",
pointColor : "#1ABC9C",
pointStrokeColor : "#fff",
data : [70,56,60,66,70,90,88]
}
]
}
var myNewChart = new Chart(ctx).Line(data);
var options = {
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Lato'",

//Number - Scale label font size in pixels
scaleFontSize : 20,

//String - Scale label font weight style
scaleFontStyle : "normal",

var catx = $("#analyticsgraph").get(0).getContext("2d");
//This will get the first returned node in the jQuery collection.

var datanew = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(29, 221, 184, 0.5)",
strokeColor : "#1ABC9C",
pointColor : "#1ABC9C",
pointStrokeColor : "#fff",
data : [70,56,60,66,70,90,88]
}
]
//String - Scale label font colour
scaleFontColor : "#34495e",
}
var anal = new Chart(catx).Bar(datanew);
var myNewChart = new Chart(ctx).Line(data, options);



// var catx = $("#analyticsgraph").get(0).getContext("2d");
// //This will get the first returned node in the jQuery collection.

// var datanew = {
// labels : ["January","February","March","April","May","June","July"],
// datasets : [
// {
// fillColor : "rgba(29, 221, 184, 0.5)",
// strokeColor : "#1ABC9C",
// pointColor : "#1ABC9C",
// pointStrokeColor : "#fff",
// data : [70,56,60,66,70,90,88]
// }
// ]
// }
// var anal = new Chart(catx).Bar(datanew);
});

1 change: 1 addition & 0 deletions prototype/prototype_app/appurls.py
View file
Expand Up @@ -17,6 +17,7 @@ def smartlogin(request, **kwargs):
url(r'^$', 'prototype_app.views.home', name='home'),
url(r'^dashboard$', 'prototype_app.views.dashboard'),
url(r'^analytics$', 'prototype_app.views.analytics'),
url(r'^dummydata$', 'prototype_app.views.dummydata'),

# url(r'^index$', 'prototype_app.views.index', name='index'),

Expand Down
15 changes: 12 additions & 3 deletions prototype/prototype_app/views.py
View file
Expand Up @@ -51,8 +51,6 @@ def dashboard(request):
facebook_profile = request.user.get_profile().get_facebook_profile()
fb = request.user.get_profile()



# facebook_profile = {'id': "1374900452", "name": "Kevin Xu", "username": "imkevinxu"}
# match_user_profile(facebook_profile['id'])
#read_csv()
Expand All @@ -73,6 +71,7 @@ def dashboard(request):
high_mpg = max(all_mpg)
low_mpg = min(all_mpg)
all_times = [d.timestamp for d in all_drives]
all_times_formatted = [d.strftime('%m/%d/%Y') for d in all_times]
recent_time = max(all_times)
start_of_recent_trip = min([d.timestamp for d in all_drives if d.timestamp.date() == recent_time.date()])
recent_trip_length = recent_time - start_of_recent_trip
Expand Down Expand Up @@ -116,6 +115,14 @@ def dashboard(request):
return render(request, 'dashboard.html', locals())
#return render_to_response('index.html', {'facebook_profile': facebook_profile}, context_instance=RequestContext(request))

def dummydata(request):
fb = request.user.get_profile()
drives = Drive.objects.all()
for d in drives:
d.fb.add(fb)
d.save()
return redirect('/dashboard')

#def match_user_profile(id):
def scores(request):
try:
Expand Down Expand Up @@ -170,7 +177,9 @@ def api(request):
if "mpgs" in parameters.keys():
mpgs = parameters.pop('mpgs')[0].split(',')
for mpg in mpgs:
d = Drive(fb=fb, mpg=mpg)
d = Drive(mpg=mpg)
d.save()
d.fb = [fb]
d.save()
for key, value in parameters.items():
setattr(fb, key, value)
Expand Down
2 changes: 1 addition & 1 deletion prototype/templates/base.html
View file
Expand Up @@ -90,7 +90,7 @@
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<script src="https://raw.github.com/nnnick/Chart.js/master/Chart.min.js"></script>
<script src="{{ MEDIA_URL }}js/Chart.min.js"></script>
<script src="{{ MEDIA_URL }}js/application.js"></script>
<!--[if lt IE 8]>
<script src="js/icon-font-ie7.js"></script>
Expand Down
42 changes: 41 additions & 1 deletion prototype/templates/dashboard.html
View file
Expand Up @@ -38,8 +38,18 @@
</ul>
</div>

{% if high_mpg == 0%}
<div id="dummydata">
<ul>
<a href="/dummydata"><li>USE DUMMY DATA</li></a>
</ul>
</div>
{% endif %}


<div id="dashboard" class="container overview active">


<div class="row">
<div class="span8">
<div id="latest_trip">
Expand Down Expand Up @@ -84,7 +94,7 @@ <h2><span class="score">{%if high_mpg==0%}0{%else%}{{(fb.average_mpg / high_mpg
<div id="averages">
<div class="row header">
<div class="span4">
<h2>OVERALL MPG DATA</h2>
<h2>MPG STATISTICS</h2>
</div>
<div class="span5 offset2" style="text-align: right">
<h2 style="color:rgba(255, 255, 255, 0.7)">{{fb.created_at.strftime('%m/%d/%Y')}} - {{today.strftime('%m/%d/%Y')}}</h2>
Expand Down Expand Up @@ -115,6 +125,21 @@ <h3><span>{{"{0:.2f}".format(high_mpg)}} <small>mpg</small></span></h3>
</div>
</div>

<div id="graph">
<div class="row header">
<div class="span4">
<h2>MPG OVER TIME</h2>
</div>
<div class="span5 offset2" style="text-align: right">
<h2 style="color:rgba(255, 255, 255, 0.7)">{{fb.created_at.strftime('%m/%d/%Y')}} - {{today.strftime('%m/%d/%Y')}}</h2>
</div>
</div>
<div class="row data">
<div class="span12">
<canvas id="myChart" width="932" height="400"></canvas>
</div>
</div>
</div>
</div>

{# <div id="dashboard" class="container recent">
Expand Down Expand Up @@ -366,7 +391,22 @@ <h2>180 Coins</h2>
{% block javascript %}


<script>

var data = {
labels : {{all_times_formatted}},
datasets : [
{
fillColor : "rgba(155, 89, 182, 0.5)",
strokeColor : "#8e44ad",
pointColor : "#8e44ad",
pointStrokeColor : "#fff",
data : {{all_mpg}},
}
]
}

</script>


<!--script type="text/javascript"
Expand Down

0 comments on commit 4becf02

Please sign in to comment.