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

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

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

Mon, 16 January 2023 06:58

Eclipse User

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 267 times)

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

Mon, 16 January 2023 09:47

Eclipse User

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

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

Mon, 16 January 2023 09:54

Eclipse User

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 224 times)

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

Mon, 16 January 2023 14:12

Eclipse User

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

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

Goto Forum:

-=] Back to Top [=-

Current Time: Sat Jul 05 16:30:52 EDT 2025

.:: Contact :: Home ::.

Breadcrumbs

Sign up to our Newsletter