CarlosMarch 30, 2016 at 9:43 am #6078
I would like to know how to customize each of the radial progress from the “radial progress plugin.” For example, I want the first arc (the bigger) to be at 80% then the second to be 40% and the 3rd to be 60%. How can I do that? and which file should I modify? I am very confused.
Thanks a lot,
CarlosvizulyMarch 30, 2016 at 9:54 am #6079
I am not totally sure I understand your question, but I think you are talking about how to set the values for the 3 different radial progress bars so they show different values.
If you want to change those values individually, look at the changeData() function in the radialprogress_test.js file.
The test container is looping through all three progress gauges and setting the same value.
You can modify that to set whatever values you want.
– TomdawJune 27, 2016 at 3:29 am #6243
I would like to know how to limit progress gauge to only 2 and value can be anything in the range of 1-10k.vizulyJune 27, 2016 at 9:24 am #6246
I am not sure I understand your question. Are you asking if you can set a range of values between 1 to 10,000 and want the progress arc to show a value of 2? Or are you asking how to show 2 arcs with those values?
– TomdawJune 27, 2016 at 7:52 pm #6253
Thanks for quick reply.I would like to know how to show only 2 arc irrespective of the value if its more than 100.vizulyJune 28, 2016 at 6:47 am #6261
The Radial Progress shows additional arcs when the actual value has exceeded the max property which is set as the viz.max(myMaxValue) property.
If you would like to show only two arcs, then you would want to adjust the viz.max() property so it is is both less than your actual value and greater than half your actual value.
For instance setting the following would yield two arcs with the second one being halfway full:
I hope that helps.
– TomdawJune 28, 2016 at 8:33 pm #6268
Thanks for quick response this is what i was looking for.One more thing i wanted to ask how can i use only 180 angle arc in my project i don’t want to use other two(110,150).vizulyJune 29, 2016 at 5:36 am #6272
You can set the start and end angle for the radial progress through the viz.startAngle() and viz.endAngle(), expressed in angles. 0 degrees starts at 12 o’clock and is at dead top. If you wanted a pure 180 degrees across the horizontal plane you would do viz.startAngle(270).endAngle(90). But you can play with any angles you want.
– TomJohnDecember 13, 2016 at 5:35 am #6786
Is there a way to make the Radial Progress svg automatically fit the size of its container? So when I make its parent container smaller/bigger it also adjusts. Thanks!vizulyDecember 13, 2016 at 7:11 am #6787
Unfortunately, SVG (and D3 as a result) do not offer a way to set relative sizing with percentages (like width=”100%”.) So you will manually need to roll your own. What I found works best is responding to the body onresize() event. Based on that event you determine the current container size in question and set the component to the desired relative side. I find it helpful to use a little delay buffer between 25ms-250ms so the component is being resized multiple times while the user is changing the window size.
For some of the resize logic, just look at the Test Container code that comes with Radial Progress that takes screen measurements.
I hope that helps.
Changing Radial Progress
© 2017 — vizuly.io