Yes, this setting can be found in the attached CSS stylesheet. You could also override it directly by selecting that arc with D3, and setting the fill color.
Hello Rodrigo, for the actual percentage label you can change the .label CSS declaration in the style.css file to whatever color, font, size etc you would like.
Hi, big thanks for this very nice script! I want to add a threshold mark, how could I make that? In best case I would only have to add the value in the script (e.g. ’60’) and then there would be a mark at 60% shown. You know what I mean? Thanks a lot!
Do you mean the inner part of the circle where the percentage is displayed? If so, you would want to actually add a svg:circle element and give it a fill style.
Thanks for your apply. yes, I want to highlight inner circle and outer circle both. So I will need to add 2 svg:circle element in the javascript. Please correct if my understanding is not right.
Yes, you need to append an additional svg circle with .attr(“fill”,”red”) or with .attr(“class”, “base”) and give the circle a color and other attributs with css
Can you please tell me how can I set different max values for each circle?
Example: I want the first and last circles to be complete at the value 50 and the second and third at 400. I figured it out how to change the max value globally, but have no idea how to change it for each circle…
This example was just designed to show what happens if the measured value exceeds the max limit. The way this is designed now there is no easy way to set separate values. You could either create another circle via D3 and SVG, or a possible hack is to have two radial progress components, one inside the other, and set two values that way. This was really just designed as an example. We are looking at making a more robust component that can do what you are asking and more.
This works perfectly on all browsers except Internet Explorer. For some reason, the percentage inside the radials and the labels underneath the Radials dont show on IE. Any idea why?
This component was really just a quick proof of concept and not tested on IE (I would play around with the CSS for IE and see if that fixes it.)
On another note, we are in the process of releasing a new version of this component (and others) that is production ready, has a full component api, can use different skins, and works across all browsers. They will sell for $29-$39. If you are interested in can put you on the mailing list.
Hi there, Im having a problem with the Rectangle element appearing as black, when I remove it I can see the progress circle but it too is just a big black circle, where am I going wrong? Testing on Chrome, also using Bootstrap(conflict?)
Hi Leigh, it most likely has something to do with your CSS. Makes sure all of the styles declared in the example are still valid. Using tbe chrome debugger can be really helpful with this if you aren’t already using it.
I am having the same problem. Did you ever get a breakthrough? Does not appear to be the CSS. As I can remove all of it and still have the black rectangles.
Hi All, we are in the middle of re-vamping this component to make it a full-fledged component. You can track the progress here: http://vizuly.io. It will still be offered as an open source component. In the mean time, MAKE SURE that your code still references the style.css file – or you manually implement those styles. This will prevent the black box effect.
Great piece of code. I’ve had a lot of fun customizing it too. I changed the code to show more precise #s (e.g. 50.2) by removing the math.round function. The problem I’m having is that when the page loads, the graph counts from 0 to 50.2 but with A LOT of trailing decimal places. I’ve dug through the JS and can’t seem to fix this. ideas?
nevermind, in the radialProgress.js file I simply commented out “label.transition().duration(_duration) . tween(“text”,labelTween);” so there is no animation on the # being displayed. the radial colored bar still is animated though.
What a great demo! Thanks for posting it. Being somewhat new to D3 and SVG generally, I’ve had a bit of a hard time with formatting. Is there a relatively easy way to make the arcs thinner? If so, it would make my life so much easier. Thanks again for putting this out there!
With that component, there is a arcThickness parameter built into the api, which allows you to adjust the arc thickness as a percentage of the total radius of the gauge.
Thanks for reply i’ve one issue i want to show remaining arc if the value is more than 100 but less than 200. In current scenario this is happening for the first arc but not for the second arc.Second arc only showing the filled area not the remaining area.
Hello, you can change the color value? For example where said “130%”
Yes, this setting can be found in the attached CSS stylesheet. You could also override it directly by selecting that arc with D3, and setting the fill color.
Thanks Tom, but I can not change the color of the percentage, I checked the file style.css but I could not change color
Hello Rodrigo, for the actual percentage label you can change the .label CSS declaration in the style.css file to whatever color, font, size etc you would like.
I changed the file “radial_progress\styles\style.css” :
.label {
font-family: Myriad, “Helvetic Neue”, Helvetica, Arial;
text-anchor: middle;
color: red;
}
but the percentage is displayed in black and not red
Thank you very much for your help
Hello Rodrigo,
Since this is an SVG Text element, you will want to use the css declaration “fill” not “color”, that should do the trick.
– Tom
can you help me please?
thanks!!!
Please see above.
Thanks!!! I had not seen your answer.
Hi, big thanks for this very nice script! I want to add a threshold mark, how could I make that? In best case I would only have to add the value in the script (e.g. ’60’) and then there would be a mark at 60% shown. You know what I mean? Thanks a lot!
How can i make arc of the circle solid, I tried changing below css but it still shows it as plain
.arc {
stroke-weight: 0.3;
fill: #4e8fff;
border-style: solid;
border-width: 1px;
stroke-width: 2px;
}
Hi Young,
Do you mean the inner part of the circle where the percentage is displayed? If so, you would want to actually add a svg:circle element and give it a fill style.
– Tom
Hi Tom,
Thanks for your apply. yes, I want to highlight inner circle and outer circle both. So I will need to add 2 svg:circle element in the javascript. Please correct if my understanding is not right.
Yes, you need to append an additional svg circle with .attr(“fill”,”red”) or with .attr(“class”, “base”) and give the circle a color and other attributs with css
If you want 2 circles you need to append two circles
How do I install this d3? I put the files in the C: \ Program Files (x86) \ MicroStrategy \ Web ASPx \ plugins \ radial_progress and did not work
Hello Tom,
Can you please tell me how can I set different max values for each circle?
Example: I want the first and last circles to be complete at the value 50 and the second and third at 400. I figured it out how to change the max value globally, but have no idea how to change it for each circle…
Hi Valeriu,
This example was just designed to show what happens if the measured value exceeds the max limit. The way this is designed now there is no easy way to set separate values. You could either create another circle via D3 and SVG, or a possible hack is to have two radial progress components, one inside the other, and set two values that way. This was really just designed as an example. We are looking at making a more robust component that can do what you are asking and more.
– Tom
Thanks for the quick reply! Can you also please tell me how can I insert a text inside of a circle, just below the number?
Hi,
some one please help me to implement the above radial gauge UI. I am not bale to implement.
Regards
Heena
Hello,
This works perfectly on all browsers except Internet Explorer. For some reason, the percentage inside the radials and the labels underneath the Radials dont show on IE. Any idea why?
Thank you,
Dan
Hi Dan,
This component was really just a quick proof of concept and not tested on IE (I would play around with the CSS for IE and see if that fixes it.)
On another note, we are in the process of releasing a new version of this component (and others) that is production ready, has a full component api, can use different skins, and works across all browsers. They will sell for $29-$39. If you are interested in can put you on the mailing list.
– Tom
Hello Tom,
Thank you for the quick response! I will play around with CSS and let you know.
I am very interested in the new version, please add me to the mailing list.
– Dan
Hi there, Im having a problem with the Rectangle element appearing as black, when I remove it I can see the progress circle but it too is just a big black circle, where am I going wrong? Testing on Chrome, also using Bootstrap(conflict?)
Hi Leigh, it most likely has something to do with your CSS. Makes sure all of the styles declared in the example are still valid. Using tbe chrome debugger can be really helpful with this if you aren’t already using it.
I am having the same problem. Did you ever get a breakthrough? Does not appear to be the CSS. As I can remove all of it and still have the black rectangles.
Hi All, we are in the middle of re-vamping this component to make it a full-fledged component. You can track the progress here: http://vizuly.io. It will still be offered as an open source component. In the mean time, MAKE SURE that your code still references the style.css file – or you manually implement those styles. This will prevent the black box effect.
Great piece of code. I’ve had a lot of fun customizing it too. I changed the code to show more precise #s (e.g. 50.2) by removing the math.round function. The problem I’m having is that when the page loads, the graph counts from 0 to 50.2 but with A LOT of trailing decimal places. I’ve dug through the JS and can’t seem to fix this. ideas?
nevermind, in the radialProgress.js file I simply commented out “label.transition().duration(_duration) . tween(“text”,labelTween);” so there is no animation on the # being displayed. the radial colored bar still is animated though.
Hi Jonathan, I faced the same issue and I overcome that by a simple change in the labelTween function.
All I had to do is to change
this.textContent = Math.round(i(t));
to
this.textContent = (i(t)).toFixed(2);
@Pathum I recently came across some good rounding options from this web link. http://www.jacklmoore.com/notes/rounding-in-javascript/
Hi How to send externally data value to radial-progress charts
What a great demo! Thanks for posting it. Being somewhat new to D3 and SVG generally, I’ve had a bit of a hard time with formatting. Is there a relatively easy way to make the arcs thinner? If so, it would make my life so much easier. Thanks again for putting this out there!
Hi John,
Check out the production version we have of this code at http://vizuly.io/product/radial-progress/?demo=bp-forum.
With that component, there is a arcThickness parameter built into the api, which allows you to adjust the arc thickness as a percentage of the total radius of the gauge.
– Tom
Very cool! Thanks for the quick response and plain old awesome-ness!
Is it possible to change the start and end angle of the graph , also need to append a text the end of the graph
Hello Neetz, Check out our production version of this component a http://vizuly.io. It has parameters you can adjust to do that.
Is it possible to indicate a threshold value to the radial graph , for example at value 60 i need to draw a line.Can you please assist me with this.
Hi Tom
Is it possible to thinner the arc without using vizuly. i tried using stroke-width but it did not change anything.
Hello Dpk,
The arc is a svg path element which has both a fill and stroke. To make it thinner you would want to alter the actual shape of the path.
– Tom
Hi Tom,
Thanks for reply i’ve one issue i want to show remaining arc if the value is more than 100 but less than 200. In current scenario this is happening for the first arc but not for the second arc.Second arc only showing the filled area not the remaining area.