Live Chart Navigation

index.html

.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

Live Chart Navigation.markdown

Live Chart Navigation

Smooth CSS/jQuery Navigation with Chart.js Canvas

A Pen by Oliver Knoblich on CodePen.

License.

script.js

$(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)

scripts

<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>

style.css

@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;
}