How to design Circle bar chart in your web template?
Md Abul Bashar | 4,776 views | July 30, 2017 | Tips And Tricks | No | 11:53 AM |
Hi Today i will show, how to design circle bar chart in your website, it’s need HTML, CSS, jQuery for design circle bar chart, so let go to work.
here is HTML
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="724px" height="400px" overflow="visible" xml:space="preserve"> <g id="circleBarCharts"> <!-- Web Circle Bar Chart --> <g id="circleBar-web-group" transform="translate(0,0)"> <image id="circleBar-web-icon" opacity="0" x="166" y="112" overflow="visible" width="98" height="77" xlink:href="http://www.frank-designs.com/images/icon_web.png" /> <text id="circleBar-web-text" opacity="0" x="200" y="143">WEB</text> <g id="circleBar-web-chart" transform="translate(215,150)"></g> <clippath id="circleBar-web-clipPath"> <rect id="circleBar-web-clipLabels" x="205" y="215" width="180" height="0"></rect> </clippath> <g id="circleBar-web-legend" clip-path="url(#circleBar-web-clipPath)"> <text id="circleBar-web-values" transform="translate(222,225)"></text> <text id="circleBar-web-labels" transform="translate(277,225)"></text> </g> </g> <!-- END: Web Circle Bar Chart --> <!-- Mobile Circle Bar Chart --> <g id="circleBar-mobile-group" transform="translate(362,0)"> <image id="circleBar-mobile-icon" opacity="0" x="195" y="112" overflow="visible" width="40" height="77" xlink:href="http://www.frank-designs.com/images/icon_mobile.png" /> <text id="circleBar-mobile-text" opacity="0" x="187" y="155">MOBILE</text> <g id="circleBar-mobile-chart" transform="translate(215,150)"></g> <clippath id="circleBar-mobile-clipPath"> <rect id="circleBar-mobile-clipLabels" x="205" y="215" width="150" height="0"></rect> </clippath> <g id="circleBar-mobile-legend" clip-path="url(#circleBar-mobile-clipPath)"> <text id="circleBar-mobile-values" transform="translate(222,225)"></text> <text id="circleBar-mobile-labels" transform="translate(277,225)"></text> </g> </g> <!-- END: Mobile Circle Bar Chart --> </g> </svg>
Here is CSS
body { position: relative; margin-left:15px; background-color:#eee; } #circleBar-web-text, #circleBar-mobile-text{ font-family: 'FranklinGothic-Book' "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size:16px; fill:#000; } #circleBar-web-labels tspan, #circleBar-mobile-labels tspan { font-family: 'FranklinGothic-Book' "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size:10px; fill:#6D6E71; } #circleBar-web-values tspan, #circleBar-mobile-values tspan { font-family: 'FranklinGothic-Book' "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif; font-size: 9px; font-weight:bold; fill:#000; } #circleBar-web-values tspan { fill: #7D3A4D; } #circleBar-mobile-values tspan { fill: #684E88; }
Here is jQuery
var chartData = { "barCircleMobile":[ {"index":0.3, "value":17436920, "fill":"#231F20", "label":"WebMd Health"}, {"index":0.4, "value":10884799, "fill":"#494551", "label":"Livestrong.com"}, {"index":0.5, "value":10257432, "fill":"#564965", "label":"Everyday Health"}, {"index":0.6, "value":6110024, "fill":"#574270", "label":"About.com"}, {"index":0.7, "value":3895612, "fill":"#4D2D77", "label":"Drugs.com"}, {"index":0.8, "value":3414585, "fill":"#684E88", "label":"Alliance Health"}, {"index":0.9, "value":3099372, "fill":"#846F9D", "label":"Lifescript.com"}, {"index":1, "value":2897520, "fill":"#A494B7", "label":"Health.com"}, {"index":1.1, "value":2772679, "fill":"#CBC3D6", "label":"Health Grades"}, {"index":1.2, "value":2636126, "fill":"#F1EFF4", "label":"Healthline"} ], "barCircleWeb":[ {"index":0.3, "value":31588490, "fill":"#231F20", "label":"WebMD Health"}, {"index":0.4, "value":26260662, "fill":"#403437", "label":"Everyday Health"}, {"index":0.5, "value":24263463, "fill":"#53363C", "label":"Livestrong.com"}, {"index":0.6, "value":12795112, "fill":"#5E2C3A", "label":"About.com Health Section"}, {"index":0.7, "value":11959167, "fill":"#660E34", "label":"Healthline"}, {"index":0.8, "value":10408917, "fill":"#7D3A4D", "label":"HealthGrades"}, {"index":0.9, "value":10317462, "fill":"#96606B", "label":"Yahoo! Health"}, {"index":1, "value":9765589, "fill":"#B28A91", "label":"Lifescript.com"}, {"index":1.1, "value":7734964, "fill":"#D3BCBF", "label":"Health.com"}, {"index":1.2, "value":7504000 , "fill":"#EDE4E5", "label":"Drugs.com"} ] }; function drawBarCircleChart(data,target,values,labels){ var w = 362, h = 362, size = data[0].value * 1.15, radius = 200, sectorWidth = .1, radScale = 25, sectorScale = 1.45, target = d3.select(target), valueText = d3.select(values), labelText = d3.select(labels); var arc = d3.svg.arc() .innerRadius(function(d,i){return (d.index/sectorScale) * radius + radScale; }) .outerRadius(function(d,i){return ((d.index/sectorScale) + (sectorWidth/sectorScale)) * radius + radScale; }) .startAngle(Math.PI) .endAngle(function(d) { return Math.PI + (d.value / size) * 2 * Math.PI; }); var path = target.selectAll("path") .data(data); //TODO: seperate color and index from data object, make it a pain to update object order path.enter().append("svg:path") .attr("fill",function(d,i){return d.fill}) .attr("stroke","#D1D3D4") .transition() .ease("elastic") .duration(1000) .delay(function(d,i){return i*100}) .attrTween("d", arcTween); valueText.selectAll("tspan").data(data).enter() .append("tspan") .attr({ x:50, y:function(d,i){return i*14}, "text-anchor":"end" }) .text(function(d,i){return data[i].value}); labelText.selectAll("tspan").data(data).enter() .append("tspan") .attr({ x:0, y:function(d,i){return i*14} }) .text(function(d,i){return data[i].label}); function arcTween(b) { var i = d3.interpolate({value: 0}, b); return function(t) { return arc(i(t)); }; } } // Animation Queue setTimeout(function(){drawBarCircleChart(chartData.barCircleWeb,"#circleBar-web-chart","#circleBar-web-values","#circleBar-web-labels")},500); setTimeout(function(){drawBarCircleChart(chartData.barCircleMobile,"#circleBar-mobile-chart","#circleBar-mobile-values","#circleBar-mobile-labels")},800); d3.select("#circleBar-web-icon") .transition() .delay(500) .duration(500) .attr("opacity","1"); d3.select("#circleBar-web-text") .transition() .delay(750) .duration(500) .attr("opacity","1"); d3.select("#circleBar-web-clipLabels") .transition() .delay(600) .duration(1250) .attr("height","150"); d3.select("#circleBar-mobile-icon") .transition() .delay(800) .duration(500) .attr("opacity","1"); d3.select("#circleBar-mobile-text") .transition() .delay(1050) .duration(500) .attr("opacity","1"); d3.select("#circleBar-mobile-clipLabels") .transition() .delay(900) .duration(1250) .attr("height","150");
You can check on codepen, just click here
And You can check another one, Click Here
You have to enjoy this articel? Don't forget subscribes this site.
If you want to get our update article, then please subscribe this site.
This title last post
4,776 views | July 30, 2017 | 11:53 AM