[Logo] OLD FORUM - Use new one: https://www.CaptainCasa.online/forum
  [Search] Search   [Recent Topics] Recent Topics   [Members]  Member Listing   [Groups] Back to home page 
[Register] Register / 
[Login] Login 
Pie Chart configuration  XML
Forum Index -> Development
Author Message
rstoyanov



Joined: 15/04/2024 14:02:35
Messages: 4
Offline

Hello,

I am working on a page that was requested from us. I have a mock up on how the page needs to look like and I have a question about the “Pie Chart” component. On the mock up it is shown that the center of the pie chart needs to contain text, I integrated the default pie chart from CaptainCasa, but I want to know is there a way to make it look like it's shown in the mock up. I attach a screenshot.
 Filename Pie chart.PNG [Disk] Download
 Description
 Filesize 66 Kbytes
 Downloaded:  210 time(s)

CaptainCasa

Power User
[Avatar]

Joined: 21/11/2007 12:23:06
Messages: 5555
Offline

Hi,

the CaptainCasa RADIAL component is similar - but not the same

One easy way to overcome is:

1. Render the pie chart server side as SVG image.
2. Embed the SVG image as IMAGE into the dialog, use e.g. TempFileManager of BufferedContentMgr to make it available as URL.

3. Use OVERLAYAREA component to draw text in front of image.

Code:
 ROW
   OVERLAYAREA
     OVERLAYREABASEITEM
       IMAGE image="...reference to the dynamically generated image..."
     OVERLAYREAITEM bloundsanchor=centermidde x=50% y=50% z=10
       PANE
         ROW 
           LABEL
         ROW
           LABEL
 


For creating the server side SVG I cannot name a library, but there must be one somewhere. Or you directly write the SVG on your own... ;-)

Kind regards! Björn

Björn Müller, CaptainCasa GmbH
rstoyanov



Joined: 15/04/2024 14:02:35
Messages: 4
Offline

Hi,
I was able to create the component by using the chart with "type: doughnut" and then add some CSS styling. But now I have a different mock up and I need to be able to change the style of the labels inside the chart. By using BRIDGEPAGE "eclnt/risc/ext_chartjs/ext_chartjs_280_datalabels_060.html" I added the actual lables, but I want to know is there any way to change their style as described in the mock up.
Thank you
 Filename Mock Up.PNG [Disk] Download
 Description
 Filesize 59 Kbytes
 Downloaded:  217 time(s)

 Filename My version.PNG [Disk] Download
 Description
 Filesize 28 Kbytes
 Downloaded:  227 time(s)

CaptainCasa

Power User
[Avatar]

Joined: 21/11/2007 12:23:06
Messages: 5555
Offline

...sorry - this is an external framework which we embed. We cannot check for this kind of details ourselves! ;-) - Kind regards! Björn

Björn Müller, CaptainCasa GmbH
 
Forum Index -> Development
Go to:   
Powered by JForum 2.1.6 © JForum Team