<div class="charts-container cf">
<div class="chart" id="graph-1-container">
<h2 class="title">Hours worked</h2>
<div class="chart-svg">
<svg class="chart-line" id="chart-1" viewBox="0 0 80 40">
<defs>
<clipPath id="clip" x="0" y="0" width="80" height="40" >
<rect id="clip-rect" x="-80" y="0" width="77" height="38.7"/>
</clipPath>
<linearGradient id="gradient-1">
<stop offset="0" stop-color="#00d5bd" />
<stop offset="100" stop-color="#24c1ed" />
</linearGradient>
<linearGradient id="gradient-2">
<stop offset="0" stop-color="#954ce9" />
<stop offset="0.3" stop-color="#954ce9" />
<stop offset="0.6" stop-color="#24c1ed" />
<stop offset="1" stop-color="#24c1ed" />
</linearGradient>
<linearGradient id="gradient-3" x1="0%" y1="0%" x2="0%" y2="100%">>
<stop offset="0" stop-color="rgba(0, 213, 189, 1)" stop-opacity="0.07"/>
<stop offset="0.5" stop-color="rgba(0, 213, 189, 1)" stop-opacity="0.13"/>
<stop offset="1" stop-color="rgba(0, 213, 189, 1)" stop-opacity="0"/>
</linearGradient>
.
.
.
h1{
font-size:28px;
line-height:40px;
margin-top:20px;
a{
text-decoration:none;
color:$green;
}
p{
font-size:22px;
}
}
#grid{
@include transform(translate(1px,0px));
}
/* GRAPH - 1 */
#graph-1{
stroke:url(#gradient-1);
stroke-width:1.5;
fill:transparent;
stroke-linecap:round;
stroke-linejoin:round;
@include animation (lineani 1.3s linear forwards);
}
#graph-2{
stroke:url(#gradient-2);
stroke-width:1.5;
fill:transparent;
stroke-linecap:round;
stroke-linejoin:round;
@include animation (lineani 1.3s linear forwards);
}
#poly-1{
fill:url(#gradient-3);
}
#poly-2{
fill:url(#gradient-4);
}
@include keyframes (lineani){
to{
stroke-dashoffset:0;
}
}
.underlay{
stroke-width:5;
fill:transparent;
stroke-linecap:round;
stroke-linejoin:round;
stroke:$bgc;
}
#circle-graph-1{
stroke:url(#gradient-1);
stroke-width:5;
fill:transparent;
stroke-linecap:round;
stroke-linejoin:round;
}
.chart-circle{
@include transform(rotate(90deg));
}
#circle-graph-2{
stroke:url(#gradient-2);
stroke-width:5;
fill:transparent;
stroke-linecap:round;
stroke-linejoin:round;
}
body{
background-color: $bgc;
color:white;
text-align:center;
}
.
.
.
/* DRAW GRID */
function drawGrid(graph) {
var graph = Snap(graph);
var g = graph.g();
g.attr('id', 'grid');
for (i = 0; i <= stepX + 2; i++) {
var horizontalLine = graph.path(
"M" + 0 + "," + stepX * i + " " +
"L" + 77 + "," + stepX * i);
horizontalLine.attr('class', 'horizontal');
g.add(horizontalLine);
};
for (i = 0; i <= 14; i++) {
var horizontalLine = graph.path(
"M" + stepX * i + "," + 38.7 + " " +
"L" + stepX * i + "," + 0)
horizontalLine.attr('class', 'vertical');
g.add(horizontalLine);
};
}
drawGrid('#chart-2');
drawGrid('#chart-1');
function drawLineGraph(graph, points, container, id) {
var graph = Snap(graph);
.
.
.
