Bringing Data to Life

Bringing Data to Life

Radial Progress Source Code

Register below to get all source code (html, js, css) and data files.

html


javascript


Comments

  1. Hello, you can change the color value? For example where said “130%”

    Reply

  2. Thanks Tom, but I can not change the color of the percentage, I checked the file style.css but I could not change color

    Reply

  3. 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

    Reply

  4. 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

    Reply

  5. can you help me please?

    thanks!!!

    Reply

  6. Thanks!!! I had not seen your answer.

    Reply

  7. 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!

    Reply

  8. 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;
    }

    Reply

    • 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

      Reply

  9. 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.

    Reply

  10. 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

    Reply

  11. 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…

    Reply

    • 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

      Reply

      • 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?

        Reply

  12. Hi,
    some one please help me to implement the above radial gauge UI. I am not bale to implement.

    Regards
    Heena

    Reply

  13. 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

    Reply

    • 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

      Reply

      • 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

        Reply

  14. 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?)

    Reply

    • 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.

      Reply

    • 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.

      Reply

    • 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.

      Reply

  15. 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?

    Reply

  16. Hi How to send externally data value to radial-progress charts

    Reply

  17. 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!

    Reply

  18. Very cool! Thanks for the quick response and plain old awesome-ness!

    Reply

  19. Is it possible to change the start and end angle of the graph , also need to append a text the end of the graph

    Reply

  20. 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.

    Reply

  21. Hi Tom

    Is it possible to thinner the arc without using vizuly. i tried using stroke-width but it did not change anything.

    Reply

    • 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

      Reply

    • 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.

      Reply

Leave a reply

Leave a Reply