KPI Cards for Dashboards
This Plug & Play KPI cards are the easiest way to visualize/demonstrate Key points of your data on dashboards with some extra details just around the corner!
Installation
Add the provided files:
jquery.dynamic_kpi.js
cards.css
to your project directory
Add below tags in your HTML files
Usage
Create a
<div>
in your HTML and assign wrapper id to it
Call following function on your
<div>
passing your data as parameter
;
Thats it!
Supported Data Format
var datum = data: Application:"name":"app1"count:630"name":"app2"count:260"name":"app3"count:1000"name":"app4"count:300"name":"app5"count:290"name":"app6"count:190 Sectors: "name":"sec1"count:110"name":"sec2"count:2100"name":"sec3"count:190"name":"sec4"count:200 Rules: "nm":"rule1"ct:440"nm":"rule2"ct:280"nm":"rule3"ct:990 Tables: "nm":"tab1"ct:400"nm":"tab2"ct:180"nm":"tab3"ct:900 /* • You Must use the object name as 'data' • Pass your data as array of objects, as key value pairs • Keys and values can be anything, so you can change names as per your choice*/
Styling
Change below values for background colors, text color and font family of cards
Change positioning of cards You must change following css properties to move all cards to left or right