Spacing on 3D Pie Chart

[Eugene]

Is it possible to add spaces between the different Pie slices of the Pie chart ?

[CoopperBackpack]

Hello @Eugene,

Since Caspio uses the Highcharts library to render Chart DataPages, I have checked the Highcharts documentation https://api.highcharts.com/highcharts/ 

I was able to find the solution that allows to add spaces between slices for the usual Pie Chart (not 3D Pie Chart).

 

You may paste this code to the Footer section on the  "Chart Wizard - Configure Chart Options" screen of your DataPage. 

Do not forget to disable the HTML editor on the Advanced tab before pasting the code.

I put the borderWidth as 3, please use the value that you need.

<script>
document.addEventListener('DataPageReady', chartUpdateHandler)

function chartUpdateHandler(event) {

	var cleaner = function (interv) {
		clearInterval(interv);
	}

	let interv = setInterval(() => {

		var chart = Highcharts.charts[0];
		if (!chart) return;
		chart.update({
			plotOptions: {
				pie: {
					borderWidth: 3
				}
			}
		});

		cleaner(interv);

	}, 200);
} 
</script>

 

Here is the result:

 

Maybe this information is helpful for you. Unfortunately, I could not find the property that allows adding the space between slices for the 3D Pie Chart.

Regards,

 

[futurist]

On 4/9/2021 at 6:02 AM, CoopperBackpack said:

Hello @Eugene,

Since Caspio uses the Highcharts library to render Chart DataPages, I have checked the Highcharts documentation https://api.highcharts.com/highcharts/ 

I was able to find the solution that allows to add spaces between slices for the usual Pie Chart (not 3D Pie Chart).

 

You may paste this code to the Footer section on the  "Chart Wizard - Configure Chart Options" screen of your DataPage. 

Do not forget to disable the HTML editor on the Advanced tab before pasting the code.

I put the borderWidth as 3, please use the value that you need.

<script>
document.addEventListener('DataPageReady', chartUpdateHandler)

function chartUpdateHandler(event) {

	var cleaner = function (interv) {
		clearInterval(interv);
	}

	let interv = setInterval(() => {

		var chart = Highcharts.charts[0];
		if (!chart) return;
		chart.update({
			plotOptions: {
				pie: {
					borderWidth: 3
				}
			}
		});

		cleaner(interv);

	}, 200);
} 
</script>

 

Here is the result:

 

Maybe this information is helpful for you. Unfortunately, I could not find the property that allows adding the space between slices for the 3D Pie Chart.

Regards,

 

Hi, sharing in here a script that I found that allows you to check if an element exists (followed by your code if that element in fact exists) instead of using a timer (setInterval):

 

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}

 

 

 

 

To use it:

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});