This article contains how to draw a horizontal bar graph with d3 JS library. And also this contains displaying different threshold levels for bars. It contains a static data set. You can assign dynamic values and colors using php or any other appropriate language
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bar Chart 3- horizontal</title>
<style>
#barchart { margin: 0; height: 100% }
.bar:hover { fill: #003366 }
/*Text class styling*/
/*.text { fill: white; font-family: sans-serif }*/
</style>
<!-- Reference minified version of D3 -->
<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<div style="height:400px; width:auto">
<div id="barchart" style="width:80%; height:100%">
</div>
</div>
<script>
// Create data array of values to visualize
var dataArray = [63, 61, 54];
var criticalArray = [90, 80, 80];
var warningArray = [75, 70, 70];
var test1Array = [50, 55, 30];
var colArray = ["red","green","blue"];
var txtArray = ["text1","text2","text3"];
// Create variable for the SVG
var svg = d3.select("#barchart").append("svg")
.attr("height","100%")
.attr("width","100%");
// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll("rect") // d=data, i=index
.data(dataArray)
.enter().append("rect")
.attr("class", "bar")
.style("fill", function(d, i){ return colArray[i]; })
.attr("width", function(d, i) {return (d * 3)})
.attr("height","40")
.attr("y", function(d, i) {return (i * 60) + 20})
.attr("x", function(d, i) {return (60*1)})
svg.selectAll("rect2") // d=data, i=index // warningArray
.data(dataArray)
.enter().append("rect")
.attr("class", "bar")
.style("fill", function(d, i){ return "orange"; })
.attr("width", function(d, i) {return (2 * 1)})
.attr("height","44")
.attr("y", function(d, i) {return (i * 60) + 20 -1 })
.attr("x", function(d, i) {return 60+warningArray[i]*3}); /**/
svg.selectAll("rect3") // d=data, i=index // test1Array
.data(dataArray)
.enter().append("rect")
.attr("class", "bar")
.style("fill", function(d, i){ return "#22aa88"; })
.attr("width", function(d, i) {return (2 * 1)})
.attr("height","44")
.attr("y", function(d, i) {return (i * 60) + 20 -1 })
.attr("x", function(d, i) {return 60+test1Array[i]*3}); /**/
svg.selectAll("rect3") // d=data, i=index // 100%
.data(dataArray)
.enter().append("rect")
.attr("class", "bar")
.style("fill", function(d, i){ return "#b0b0b0"; })
.attr("width", function(d, i) {return (2 * 1)})
.attr("height","44")
.attr("y", function(d, i) {return (i * 60) + 20 -1 })
.attr("x", function(d, i) {return 60+100*3}); /**/
// Select, append to SVG, and add attributes to text
svg.selectAll("text") // colored value %
.data(dataArray)
.enter().append("text")
.text(function(d) {return d+"%"})
.attr("class", "text")
.style("fill", function(d, i){ return colArray[i]; })
.attr("y", function(d, i) {return (i * 60) + 36})
.attr("x", function(d, i) {return 5 });
svg.selectAll("text2") // colored text
.data(dataArray)
.enter().append("text")
.text(function(d, i) {return txtArray[i]})
.attr("class", "text")
.style("fill", function(d, i){ return colArray[i]; })
.attr("y", function(d, i) {return (i * 60) + 48})
.attr("x", function(d, i) {return 5 });/**/
svg.selectAll("text3") // colored text
.data(dataArray)
.enter().append("text")
.text(function(d, i) {return "100%"})
.attr("class", "text")
.style("fill", function(d, i){ return "#b0b0b0"; })
.attr("y", function(d, i) {return (i * 60) + 20-1+44})
.attr("x", function(d, i) {return 50+100*3 });/**/
</script>
</body>
</html>
No comments:
Post a Comment