Eclipse Community Forums: Eclipse Scout » 180 degree (or half) dougnhut chart

Help

Home

Home » Eclipse Projects » Eclipse Scout » 180 degree (or half) dougnhut chart(How to create a half doughnut chart)

Show: Today's Messages :: Show Polls :: Message Navigator

180 degree (or half) dougnhut chart [message #1857077]

Mon, 16 January 2023 11:58

J D

Messages: 100
Registered: February 2021

Senior Member

Hi there everyone,

Here's wishing you all a very happy and prosperous 2023.

I'm trying to create a 180 degree (or half) doughnut chart to represent some data that form parts of a whole. Is this possible in Scout, and how do I do it?

I know how to create a full doughnut chart, so all I want is half of that, just like in the screenshot.

index.php/fa/42847/0/

Thanks for your assistance,

JD

Attachment: finished_donut-875791847.jpeg
(Size: 7.35KB, Downloaded 160 times)

Report message to a moderator

Re: 180 degree (or half) dougnhut chart [message #1857081 is a reply to message #1857077]

Mon, 16 January 2023 14:47

Matthias Villiger

Messages: 232
Registered: September 2011

Senior Member

Hi J D

Thank you very much and the same to you!

You can try chart type 'Speedo'. See the Scout Widgets Demo App for a sample (you have to switch to chart type 'speedo' in the demo app).

Kind regards
Mat

Report message to a moderator

Re: 180 degree (or half) dougnhut chart [message #1857082 is a reply to message #1857077]

Mon, 16 January 2023 14:54

Fritz Schinkel

Messages: 7
Registered: January 2022

Junior Member

Hi JD,

happy new year :)
There is no Scout-chart-property to achieve this, but as pie- and doughnut-charts are rendered using chart.js you can use all properties chart.js provides (here is the description for doughnut charts).
I think you look for the properties circumference and rotation. You can try them out in the widgets app using the custom chart properties box.

{
  "options": {
    "circumference": 180,
    "rotation": -90
  }
}

will give you
index.php/fa/42848/0/

.

In your Java code you can use these properties in the chart config object like this:

BEANS.get(IChartConfig.class)
  .withProperty("options.circumference", 180)
  .withProperty("options.rotation", -90);

Kind regards,
Fritz

Attachment: circumference_and_rotation.png
(Size: 175.76KB, Downloaded 116 times)

Report message to a moderator

Re: 180 degree (or half) dougnhut chart [message #1857090 is a reply to message #1857082]

Mon, 16 January 2023 19:12

J D

Messages: 100
Registered: February 2021

Senior Member

Wonderful! Thanks a lot for your replies. It works perfectly.

Thank you Fritz for showing how to access the Chart.js features. I don't know JavaScript but I was wondering how to do it.

Cheers,

JD

Report message to a moderator

Previous Topic:	Hide Status on TablePage inside PageField
Next Topic:	Displaying useful messages to users after failed authentication

Goto Forum:

-=] Back to Top [=-

[ Syndicate this forum (XML) ] [

]

Current Time: Wed May 08 20:12:01 GMT 2024

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter