Download Flot.js and link these the files in you html file like below.
<script language="javascript" type="text/javascript" src="/Scripts/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="/Scripts/jquery.flot.pie.js"></script>
i will explain u a basic , there are more designs u could refer from the link below.
<html>
<head>
<style>
.demo-placeholder {
width: 100%;
height: 100%;
font-size: 14px;
line-height: 1.2em;
}
.demo-container {
box-sizing: border-box;
width: 300px;
height: 300px;
padding: 20px 15px 15px 15px;
/*margin: 15px auto 30px auto;*/
border: 1px solid #ddd;
background: #fff;
background: linear-gradient(#f6f6f6 0, #fff 50px);
background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}
</style>
<script>
var data = [];
data.push({ label: "option 1", data:"57" });
data.push({ label: "option 2", data: "14" });
data.push({ label: "option 3", data: "29" });
var placeholder = $("#placeholder");
placeholder.unbind();
$.plot(placeholder, data, {
series: {
pie: {
show: true,
radius: 1,
label: {
show: true,
radius: 3 / 4,
formatter: labelFormatter,
background: {
opacity: 0.5,
color: "#000"
}
}
}
},
legend: {
show: false
}
});
});
function labelFormatter(label, series) {
return "<div style='font-size:8pt; text-align:center; padding:2px; color:white;'>" + label + "<br/>" + Math.round(series.percent) + "%</div>";
}
</script>
</head>
<body>
<div class="demo-container" >
<div id="placeholder" class="demo-placeholder"></div>
</div>
</body>
</html>
More info on : http://www.flotcharts.org/flot/examples/series-pie/index.html
No comments:
Post a Comment