Pie charts - Bar of a Pie OR Pie in Pie

1

Hi - has anyone ever created a Bar in Pie chart or a Pie of Pie chart or even just an exploding pie chart? Is it even possible?

Thank you

2

Hi,

Can you explain a bit more what you’re trying to do? It’s not quite clear what is requested.

thanks.

3

Hi - I wanted to try to to create an exploding pie chart like you an do in excel.

4

Exploding as in a pulled slice?

Erik

pulled-pie-slice

5

The pulled slice requires a little trick. As you may or may not know the graphs in Connect are powered by the amCharts library. This library has many option of which a subset is exposed in the user interface of the Designer. These options are found in the Chart Properties dialog. This dialog also includes a Source tab which provides direct access to the JSON configuration of the chart. This can be utilized to drive features what are not show in the interface of the Designer.

AmChart’s “pulledField” property for pie charts
In the amChart documentation I found the “pulledField” property. See: AmPieChart | JavaScript Charts v. 3 | amCharts

“Name of the field in chart’s dataProvider which holds a boolean value telling the chart whether this slice must be pulled or not.”

How to set the pulledField in your template
To pull a field requires us to mark the desired field by setting a custom property and tell the amChart library which property to look for.

  1. Add the “pulledField” option to the Chart Properties and set its value to something like: “thePulledField”. This is the property that will be used to ‘pull’ fields.

pie-properties-pulled-field
pie-properties-pulled-field934×360 54.2 KB

  1. The Designer stores the configuration and data of the chart in the data-amchart attribute on the pie chart element. The following script retrieves this information and sets the “thePulledField” property of the first data entry to true. This results in the pie chart image shown in my previous post.

The User script
Selector: #pie

var data = JSON.parse( results.attr( 'data-amchart' ) );
data.dataProvider[0].thePulledfield = true;
results.attr( 'data-amchart', JSON.stringify( data ) );

Admittedly it is not trivial but hope it is of some help.

Erik

favorite-type-of-movie-pie.OL-template (8.2 KB)

6

Awesome - Thank you for the information. I will start working on this to see if I can get it to work.