Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save dzhang123/af624c02012279ab335a to your computer and use it in GitHub Desktop.
Save dzhang123/af624c02012279ab335a to your computer and use it in GitHub Desktop.
Live Chart Navigation
.wrapper
.nav
.title Last Hour
.chart#p1
%canvas#c1
.title Navigation
.link.i1.active Dashboard
.link.i2 Statistics
.link.i3 Roadmap
.link.i4 Milestones
.link.i5 Tickets
.title Account
.link.i6 Search
.link.i7 Settings
.link.i8 Logout
.main
.desc
Live Chart Navigation
$(document).ready(function() {
$('.link').on('click', function() {
$('.link').removeClass('active');
$(this).toggleClass('active');
});
});
var c1 = document.getElementById("c1");
var parent = document.getElementById("p1");
c1.width = parent.offsetWidth;
c1.height = parent.offsetHeight;
var data1 = {
labels : ["00","10","20","30","40","50","60"],
datasets : [
{
fillColor : "rgba(255,255,255,.1)",
strokeColor : "rgba(255,255,255,1)",
pointColor : "#0af",
pointStrokeColor : "rgba(255,255,255,1)",
data : [150,200,235,290,300,350, 450]
}
]
}
var options1 = {
scaleFontColor : "rgba(255,255,255,1)",
scaleLineColor : "rgba(255,255,255,1)",
scaleGridLineColor : "transparent",
bezierCurve : false,
scaleOverride : true,
scaleSteps : 5,
scaleStepWidth : 100,
scaleStartValue : 0
}
new Chart(c1.getContext("2d")).Line(data1,options1)
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js"></script>
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,700');
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
$w: #eee;
$c: #4a6a8a;
$c2: #0af;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:before, :after {
content: '';
display: block;
position: absolute;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font: 16px/1 'Open Sans', sans-serif;
color: #777;
background: $w;
}
.wrapper {
display: flex;
min-height: 100%;
}
.main {
flex: 1;
box-shadow: 0 0 5px rgba(0,0,0,.8);
}
.nav {
width: 230px;
background: $c;
}
.link {
position: relative;
display: block;
padding-left: 60px;
height: 40px;
line-height: 40px;
font-size: 14px;
font-weight: 700;
color: $w;
&:before {
top: 12px;
left: 23px;
font: 16px fontawesome;
}
&:hover {
background: darken($c, 4%);
}
&.active {
background: darken($c, 8%);
box-shadow: inset 5px 0 0 $c2;
}
&.i1:before { content: '\f00a'; }
&.i2:before { content: '\f012'; }
&.i3:before { content: '\f018'; }
&.i4:before { content: '\f024'; }
&.i5:before { content: '\f08d'; }
&.i6:before { content: '\f002'; }
&.i7:before { content: '\f085'; }
&.i8:before { content: '\f08b'; }
cursor: pointer;
transition: .2s all;
}
.title {
height: 40px;
line-height: 40px;
margin: 10px 0;
padding: 0 22px;
text-transform: uppercase;
color: lighten($c, 20%);
background: darken($c, 4%);
}
.chart {
width: 210px;
margin: 0 auto;
}
.desc {
position: absolute;
top: 50%;
left: 280px;
font-size: 50px;
font-weight: 300;
margin-top: -30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment