Highlight piece of the pie chart arc

Hi,

I want to highlight a part of the arc of my donut pie chart.

For example, if my goal to retire is 100 and I reached till 50%, then the half part of the donut pie chart should have bigger sized arc then the rest.

Attached image for more clarity.

Also, how can I use javascript to customize the chart before rendering.

If anybody has a tutorial to use AdvancedDataFormat, DatapointFormats and DataSeriesFormats, it will be helpful.

thanks,

Shreyash

https://api.highcharts.com/highcharts/plotOptions


You can try these options to construct the AdvancedDataFormat JSON. 

Hi Shreyash,

I think the donut widget of outsystems is based on a highcharts pie chart, but what you would need is a variable pie.  A pie has a y value, turning into a larger or smaller part of the donut or pie being taken by that datapoint, the variablepie also has a z value, turning into a different thickness for each datapoint in a chart.

Don't know if any of this can be accomplished with the OS chart out of the box by using AdvancedFormat, since the datapoint structure in OS doesn't have a z attribute, don't know how it would have to be done.

You can make your own integration with the higcharts library from scratch, and then you have the whole highcharts API available.

I have looked at a similar question in this post last year, maybe you can get inspiration of how to solve it from that example.


Good Luck,

Dorine

Afaque Shaikh wrote:

Hello Shreyash Maheshwari,

try this 

https://success.outsystems.com/Documentation/11/Developing_an_Application/Design_UI/Patterns/Using_Traditional_Web_Patterns/Numbers/ProgressCircle


OR

Circular Progress Bar forge component, available on https://www.outsystems.com/forge/component-overview/4313/circular-progress-bar.


Regards,

Afaque Shaikh 

Thanks Afaque!

Its great, only issue it accepts integer input. I want to show a decimal value. Since wanted to show retirement goals to needs precision.  


Bas de Jong wrote:

https://api.highcharts.com/highcharts/plotOptions


You can try these options to construct the AdvancedDataFormat JSON. 

Thanks Bas de Jong!

I want to know how to construct the AdvanceFormat object parts, like

DataPointFormats, DataSeriesFormats, if you have an example it will be great.

Also, if I set certain formatting values on DataSeriesFormat then will it be applied to all of my datapoints in that series? One way I'm looking to resolve, on rendering increase the thickness of the arc. Let me know if that is a possibility.

thanks,

Shreyash  


Dorine Boudry wrote:

Hi Shreyash,

I think the donut widget of outsystems is based on a highcharts pie chart, but what you would need is a variable pie.  A pie has a y value, turning into a larger or smaller part of the donut or pie being taken by that datapoint, the variablepie also has a z value, turning into a different thickness for each datapoint in a chart.

Don't know if any of this can be accomplished with the OS chart out of the box by using AdvancedFormat, since the datapoint structure in OS doesn't have a z attribute, don't know how it would have to be done.

You can make your own integration with the higcharts library from scratch, and then you have the whole highcharts API available.

I have looked at a similar question in this post last year, maybe you can get inspiration of how to solve it from that example.


Good Luck,

Dorine

Thanks Dorine!

Since dataPoint only sets y value. How to set z?


Shreyash Maheshwari wrote:


Thanks Dorine!

Since dataPoint only sets y value. How to set z?


I don't think you can with the Outsystems chart widgets, but if anybody knows how to, please correct me.  

See the oml in the post I referred to, the whole chart gets built up with javascript, including the z values.


But if you only want to show a progress percentage like your retirement goal example, I have to agree with Afaque, that's by far the easiest solution, and I'd give in a little on precision.


Good luck,

Dorine