Changing Radial Progress

← Back to discussions

In Progress

Posted in: Product Support
Carlos

March 30, 2016 at 9:43 am #6078

Dear all,

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,
Carlos

vizuly

March 30, 2016 at 9:54 am #6079

Hi Carlos,

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.

– Tom

daw

June 27, 2016 at 3:29 am #6243

Hi Tom

I would like to know how to limit progress gauge to only 2 and value can be anything in the range of 1-10k.

vizuly

June 27, 2016 at 9:24 am #6246

Hello Daw,

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?

– Tom

daw

June 27, 2016 at 7:52 pm #6253

Hi Tom

Thanks for quick reply.I would like to know how to show only 2 arc irrespective of the value if its more than 100.

vizuly

June 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:

viz.min(0).max(1000).data(1500)

I hope that helps.

– Tom

daw

June 28, 2016 at 8:33 pm #6268

Hi Tom

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

vizuly

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

– Tom

John

December 13, 2016 at 5:35 am #6786

Hi,

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!

vizuly

December 13, 2016 at 7:11 am #6787

Hello John,

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.

– Tom

Anuradha

February 6, 2017 at 1:44 am #7282

Hi,

I want to chnage color (fill and storke). But it is not happening. can any one suggest

Anuradha

February 6, 2017 at 1:50 am #7283

how to change the fill color and stoke color

vizuly

February 6, 2017 at 8:24 am #7285

Hello Anuradha,

You can change these settings in the src/theme/radialprogress.js file.

Each theme has several different skins with attribute settings, such as ‘track_fill’, ‘arc-fill’, and ‘arc-stroke’. You can change these settings for a specific skin, create a new skin, or make other modifications in the “applyTheme” function.

I hope that helps.

– Tom

jkattuku

October 20, 2017 at 7:25 am #8071

Hi,

I’d like to display additional numerical information below the data that is already present in the center of the radials. To be more clear, I’d like 2 numbers in the center of the radial instead of just one – the number that I’m trying to add should be below the number that is already present in the radial. How would I go about doing this? I tried using a new line character to separate the two numbers into 2 lines, but that did not work.
vizuly

October 20, 2017 at 7:31 am #8072

Hello,

There are a couple of ways to do what you want. But adding a newline character won’t work as these number labels are svg.text fields (which DON’T have native multi-line support)

Probably the easiest way to do this is to modify the src/viz/radialprogress.js source code and add an additional label in the update() function.

Look for the following lines of code in the update function:
```
var label = labelPlot.selectAll('.vz-radial_progress-label').data([scope.data]);
		label.enter().append('text').attr('class', 'vz-radial_progress-label').style('text-anchor', 'middle');
		label.exit().remove();

		label = labelPlot.selectAll('.vz-radial_progress-label');

		label.attr('x', size.width / 2)
			.attr('y', size.height / 2)
			.text(function (d, i) {
				return scope.label(d, i)
			});
```
Then using the same d3.js enter/update/exit pattern add a second label positioned below the first one with your value in there.

I hope that helps point you in the right direction.

Cheers,

Tom
jkattuku

October 23, 2017 at 10:13 am #8074

Thanks for the quick reply Tom

I took a look at the file you mentioned, and I discovered that it’s actually one of the debug source scripts that are commented out in my HTML file. Making changes in this file won’t affect my design. I tried removing the comments on the debug source scripts and removing the references to lib/vizuly_core.min.js and lib/vizuly_radialprogress.min.js (as suggested in http://vizuly.io/docs-getting-started/), but I can’t go forward with that since I made a great deal of necessary modifications in the 2 aforementioned files. Removing the references to those 2 files would remove all of the modifications I made.

So, my question now is, is there a way to make the change you mentioned earlier in any of the two files I mentioned above?

vizuly

October 23, 2017 at 10:27 am #8075

Hi,

Please check out our Getting Started doc which describes in more detail how to debug and modify the source code (the first step is removing references to those minified files.) In general, minified files are never designed to be modified directly.

My suggestion to follow the same steps I mention above, but do it directly in the minified files you edited.

In the next release of Vizuly the downloads will actually not reference the minified files and directly reference the source files to avoid the confusion you just encountered and make it more obvious how to modify the code.

Good Luck,
Tom

Nahabwe

October 25, 2017 at 12:53 am #8076

Hello.
I am new to using vizuly and i see it really makes nice radial progress charts.
I would like to come up with radial progress charts but am using json data which i query from the server to used as data inside the data function. And also to shape the each radial progress to display its own content with its own title from data.

Another thing i would to know is how to override some functions so that i can create as many charts as possible with repeating some functions forexample making the divs, themes and vizs generic without creating them manually each time i want to create a viz chart.

Thanks so for your help.. Am hoping to using Vizuly so many times as possible.

jkattuku

November 8, 2017 at 11:06 am #8086

Hi,

Thanks for your advice from earlier. I used the source files and made the necessary modifications, and everything is working well so far. I’d like to make one last change to the radials though. Instead of having the circles drawn within each other, I would like the circles to be concentric (drawn on top of each other).

For examples, if “125%” was passed into one of the radials, it would show one full circle, with the first 25% of it a different colour, due to the extra 25%. How would I change this in the source code?
vizuly

November 8, 2017 at 2:09 pm #8089

Hello,

To do what you are asking would require a small modification to the core viz/radialprogress.js file.

You would first make sure you are pointing to the core source files (versus the minified versions) as described in our getting started article. Then you would want to modify the “measure()” function in the viz/radialprogress.js file.

Currently you will see these two lines:
```
   arc.outerRadius(scope.radius-(arcThickness*i));
   arc.innerRadius(scope.radius-(arcThickness*(i+1)));
```
You would want to change them to this:
```
   arc.outerRadius(scope.radius);
   arc.innerRadius(scope.radius-arcThickness);
```
Good Luck!

Tom
jkattuku

November 9, 2017 at 6:10 am #8090

Thank you so much Tom! It worked perfectly!

The last thing I need to change is the progress tracks. The additional progress tracks that appear when the number exceeds 100% and 200% are still present, and I would like to remove them since I only have one radial now. Please note that I still want the progress track for the first 100%, but no progress tracks for anything after 100%. How would I go about doing this?

jkattuku

November 10, 2017 at 1:15 pm #8091

Hey,

I’ve tried changing a few things to fix the issue I mentioned above, but nothing seems to work. How would I make it so that only one progress track appears?
vizuly

November 10, 2017 at 1:32 pm #8092

Hello,

I must have missed your last question. To make only a single background progress track, look for this code in the update function:
```
  arcTrack.outerRadius(scope.radius)
            .cornerRadius(arcThickness*scope.capRadius/2)
            .innerRadius(scope.radius-arcThickness*arcs.length)
```
And change it to this:
```
  arcTrack.outerRadius(scope.radius)
            .cornerRadius(arcThickness*scope.capRadius/2)
            .innerRadius(scope.radius-arcThickness)
```
Cheers,

Tom
|

Viewing 20 reply threads

You must be logged in to reply to this topic.

Search Forums

Premium Support