.wrapper
.title
Reporte Global Ventas 2014
.chart#p1
%canvas#c1
.footer
%p
Grfica de reporte global <p>"Ventas -Call Center" <p>(Periodo comprendido Enero 2014 - Noviembre 2014)
@import url('http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:before, :after {
content: '';
display: block;
position: absolute;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
padding: 50px 0;
font: 14px/1 'Open Sans', sans-serif;
color: #777;
background: #ddd;
}
p {
line-height: 1.8;
}
.wrapper {
width: 600px;
margin: 0 auto;
border-radius: 4px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.title {
height: 60px;
padding: 0 30px;
font-size: 18px;
line-height: 60px;
text-align: center;
}
.chart {
height: 300px;
padding: 20px;
background: linear-gradient(to bottom, #345 0%, #234 100%);
}
.footer {
padding: 30px;
text-align: center;
}
var c1 = document.getElementById("c1");
var parent = document.getElementById("p1");
c1.width = parent.offsetWidth - 40;
c1.height = parent.offsetHeight - 40;
var data1 = {
labels : ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov"],
datasets : [
{
fillColor : "rgba(255,255,255,.1)",
strokeColor : "rgba(255,255,255,1)",
pointColor : "#123",
pointStrokeColor : "rgba(255,255,255,1)",
data : [2034373.11,1112097.89,1798456.78,1259987.59,888682.60,980269.51,134065.53,1362684.42,969072.61,1234133.57,922036.06]
}
]
}
var options1 = {
scaleFontColor : "rgba(255,255,255,1)",
scaleLineColor : "rgba(255,255,255,1)",
scaleGridLineColor : "transparent",
bezierCurve : false,
scaleOverride : true,
scaleSteps : 2,
scaleStepWidth : 1000000,
scaleStartValue : 0
}
new Chart(c1.getContext("2d")).Line(data1,options1)