OLD FORUM - Use new one: https://www.CaptainCasa.online/forum

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.

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

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

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