jquery-kpiwidgets
Version:
Inneractive jQuery widgets for presenting data in a KPI box
90 lines (75 loc) • 2.79 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>KPIWidgets Sample Page</title>
<script src="lib/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="lib/jquery-ui.min.js" type="text/javascript"></script>
<link type="text/css" href="css/generalKPI.css" rel="stylesheet"/>
<link type="text/css" href="css/numTrendKPI.css" rel="stylesheet"/>
<link type="text/css" href="css/topThreeKPI.css" rel="stylesheet"/>
<link type="text/css" href="css/percentageKPI.css" rel="stylesheet"/>
<script type="text/javascript" src="js/numTrendKPI.js"></script>
<script type="text/javascript" src="js/topThreeKPI.js"></script>
<script type="text/javascript" src="js/percentageKPI.js"></script>
<script>
$(document).ready(function () {
var kpiWidget = $("#numAndTrendKPI").NumTrendKPI({
title: "TOTAL REVENUE",
footer: "GOAL SET: $3500/WEEK",
data: {
value: 49000,
trend: "up",
symbol: "$"
},
clickHandler: function () {
alert("this is a click");
}
});
var topThreeKPI = $("#topThreeKPI").TopThreeKPI({
title: "TOP GROSSING APPS",
footer: "GOAL SET: $2400/DAY",
data: [{
name: "My App",
value: 1000.23,
symbol: "$",
trend: "up"
//delta: 2 - change delta - optional
}, {
name: "Another App of mine",
value: 20000,
symbol: "$",
trend: "down"
}, {
name: "My Third App",
value: 300,
symbol: "$",
trend: "up"
}],
clickHandler: function () {
alert("this is a click");
}
});
var percentageKPI = $("#percentage").PercentageKPI({
title: "TOP GROSSING AGE GROUP",
footer: "3,334 users",
data: {
value: "18-25",
partial: 1234,
total : 3334
},
clickHandler: function(){
alert("this is a click");
}
});
});
</script>
</head>
<body>
<div class="kpi-container-div">
<div id="numAndTrendKPI" class="kpi-item" style="padding-left: 0px;"></div>
<div id="topThreeKPI" class="kpi-item"></div>
<div id="percentage" class="kpi-item"></div>
</div>
</body>
</html>