//tile
<section class="tile">
//tile header
<div class="tile-header">
<h1 class="big-thin">Statistics</h1>
<div class="controls">
<a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
<a href="#" class="remove"><i class="fa fa-times"></i></a>
</div>
</div>
// /tile header
//tile widget
<div class="tile-widget color greensea">
//generate chart here
<div id="statistics-chart" class="chart statistics" style="height: 250px;"></div>
</div>
// /tile widget
//tile body
<div class="tile-body">
// row
<div class="row">
<ul class="inline divided">
<li class="col-md-8 col-sm-12 col-xs-12 text-center">
<h5 class="underline text-left">Actual Statistics</h5>
//pie chart container
<div class="inner-container inline">
//generate pie chart
<div data-percent="100" data-size="140" class="pie-chart inline" data-scale-color="false" data-track-color="#ffffff" data-bar-color="a2d200" data-line-width="5" style="width: 140px; height: 140px;">
<div class="text-center">
<i class="fa fa-usd fa-5x green-text"></i>
</div>
</div>
<p class="chart-overall text-center medium-thin uppercase nomargin"><span class="green-text big-thin animate-number" data-value="6175" data-animation-duration="2500">0</span> Sales</p>
<p class="chart-overall text-center little-thin uppercase"><span class="green-text">18% <i class="fa fa-arrow-up "></i></span> this month</p>
</div>
// /pie chart container
//pie chart container
<div class="inner-container inline">
//generate pie chart
<div data-percent="85" data-size="140" class="pie-chart inline" data-scale-color="false" data-track-color="#ffffff" data-bar-color="ffc100" data-line-width="5" style="width: 140px; height: 140px;">
<div class="text-center">
<span><i class="fa fa-eye fa-5x orange-text"></i></span>
</div>
</div>
<p class="chart-overall text-center medium-thin uppercase nomargin"><span class="orange-text big-thin animate-number" data-value="8213" data-animation-duration="2500">0</span> Visits</p>
<p class="chart-overall text-center little-thin uppercase"><span class="red-text">2% <i class="fa fa-arrow-down"></i></span> this month</p>
</div>
// /pie chart container
</li>
<li class="col-md-4 col-sm-12 col-xs-12">
<h5 class="underline">Visitors Statistics</h5>
//progress bars
<ul class="progress-list">
<li>
<div class="details">
<div class="title">America</div>
<div class="description">Visitors from America</div>
</div>
<div class="status pull-right">
<span class="animate-number" data-value="40" data-animation-duration="1500">0</span>%
</div>
<div class="clearfix"></div>
<div class="progress progress-little no-radius">
<div class="progress-bar progress-bar-green animate-progress-bar" data-percentage="40%" style="width: 0%;"></div>
</div>
</li>
<li>
<div class="details">
<div class="title">Europe</div>
<div class="description">Visitors from Europe</div>
</div>
<div class="status pull-right">
<span class="animate-number" data-value="38" data-animation-duration="1000">0</span>%
</div>
<div class="clearfix"></div>
<div class="progress progress-little no-radius">
<div class="progress-bar progress-bar-cyan animate-progress-bar" data-percentage="35%" style="width: 0%;"></div>
</div>
</li>
<li>
<div class="details">
<div class="title">Asia</div>
<div class="description">Visitors from Asia</div>
</div>
<div class="status pull-right">
<span class="animate-number" data-value="12" data-animation-duration="800">0</span>%
</div>
<div class="clearfix"></div>
<div class="progress progress-little no-radius">
<div class="progress-bar progress-bar-amethyst animate-progress-bar" data-percentage="12%" style="width: 0%;"></div>
</div>
</li>
<li>
<div class="details">
<div class="title">Africa</div>
<div class="description">Visitors from Africa</div>
</div>
<div class="status pull-right">
<span class="animate-number" data-value="7" data-animation-duration="600">0</span>%
</div>
<div class="clearfix"></div>
<div class="progress progress-little no-radius">
<div class="progress-bar progress-bar-orange animate-progress-bar" data-percentage="7%" style="width: 0%;"></div>
</div>
</li>
<li>
<div class="details">
<div class="title">Other</div>
</div>
<div class="status pull-right">
<span class="animate-number" data-value="6" data-animation-duration="400">0</span>%
</div>
<div class="clearfix"></div>
<div class="progress progress-little no-radius">
<div class="progress-bar progress-bar-red animate-progress-bar" data-percentage="6%" style="width: 0%;"></div>
</div>
</li>
</ul>
// /progress bars
</li>
</ul>
</div>
// /row
</div>
// /tile body
</section>
// /tile
//****************************//
//*********** jquery *********//
//****************************//
//this settings you will find in charts.js file
$(function(){
var d1 =[ [1, 715],
[2, 985],
[3, 1525],
[4, 1254],
[5, 1861],
[6, 2621],
[7, 1987],
[8, 2136],
[9, 2364],
[10, 2851],
[11, 1546],
[12, 2541]
];
var d2 =[ [1, 463],
[2, 578],
[3, 327],
[4, 984],
[5, 1268],
[6, 1684],
[7, 1425],
[8, 1233],
[9, 1354],
[10, 1200],
[11, 1260],
[12, 1320]
];
var months = ["January", "February", "March", "April", "May", "Juny", "July", "August", "September", "October", "November", "December"];
// flot chart generate
var plot = $.plotAnimator($("#statistics-chart"),
[
{
label: 'Sales',
data: d1,
lines: {lineWidth:3},
shadowSize:0,
color: '#ffffff'
},
{ label: "Visits",
data: d2,
animator: {steps: 99, duration: 1500, start:200, direction: "left"},
lines: {
fill: .3,
lineWidth: 0
},
color:['#ffffff']
},{
label: 'Sales',
data: d1,
points: { show: true, fill: true, radius:6,fillColor:"#078e74",lineWidth:3 },
color: '#fff',
shadowSize:0
},
{ label: "Visits",
data: d2,
points: { show: true, fill: true, radius:6,fillColor:"rgba(255,255,255,.5)",lineWidth:3 },
color: '#fff',
shadowSize:0
}
],{
xaxis: {
tickLength: 0,
tickDecimals: 0,
min:1,
ticks: [[1,"JAN"], [2, "FEB"], [3, "MAR"], [4, "APR"], [5, "MAY"], [6, "JUN"], [7, "JUL"], [8, "AUG"], [9, "SEP"], [10, "OCT"], [11, "NOV"], [12, "DEC"]],
font :{
lineHeight: 24,
weight: "300",
color: "#ffffff",
size: 14
}
},
yaxis: {
ticks: 4,
tickDecimals: 0,
tickColor: "rgba(255,255,255,.3)",
font :{
lineHeight: 13,
weight: "300",
color: "#ffffff"
}
},
grid: {
borderWidth: {
top: 0,
right: 0,
bottom: 1,
left: 1
},
borderColor: 'rgba(255,255,255,.3)',
margin:0,
minBorderMargin:0,
labelMargin:20,
hoverable: true,
clickable: true,
mouseActiveRadius:6
},
legend: { show: false}
});
// tooltips showing
$("#statistics-chart").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0],
y = item.datapoint[1];
$("#tooltip").html('<h1 style="color: #16a085">' + months[x - 1] + '</h1>' + '<strong>' + y + '</strong>' + ' ' + item.series.label)
.css({top: item.pageY+5, left: item.pageX+5})
.fadeIn(200);
} else {
$("#tooltip").hide();
}
});
//tooltips options
$("<div id='tooltip'></div>").css({
position: "absolute",
//display: "none",
padding: "10px",
"background-color": "#ffffff",
"z-index":"99999"
}).appendTo("body");
//generate actual pie charts
$('.pie-chart').easyPieChart();
//animate progress bars
$('.animate-progress-bar').css('width', function(){ return ($(this).attr('data-percentage')+'%')});
})
