Customizing FlexPie

You can customize how the FlexPie control, in Cloud Business App Edition, is displayed and adjust its shape using JavaScript. Following examples demonstrate how you can modify the shape of a FlexPie to create a doughnut pie, and adjust the offset of pie chart slices to display an exploded pie through JavaScript.

The following examples use ApplicationData.CountrySales data from a local database file ApplicationData.mdf.

Doughnut Pie

FlexPie has an innerRadius property that enables you to customize your pie chart to create a doughnut chart. By default, the value of this property is zero, thereby enabling you to create a pie chart. However, if you set this property to a value greater than zero, then a hole of the specified radius is created at the centre of the pie chart, that makes a doughnut chart.

The following image shows how the FlexPie appears after setting inner radius to 0.5.

To write code in JavaScript:

JavaScript	Copy Code
myapp.PieCustom.FlexPie_render = function (element, contentItem) { var pie = new c1.cba.FlexPie($(element), contentItem); var collectionView = new c1.cba.LightSwitchCollectionView(contentItem); pie.wjControl.itemsSource = collectionView; myapp.pie = pie.wjControl; }; myapp.PieCustom.InnerRadius_render = function (element, contentItem) { $("<select><option>0</option><option>0.25</option><option>0.5</option><option>0.75</option></select>") .appendTo($(element)) .change(function () { myapp.pie.innerRadius = Number($(this).val()); }); };

JavaScript

Copy Code

myapp.PieCustom.FlexPie_render = function (element, contentItem) {
        var pie = new c1.cba.FlexPie($(element), contentItem);
        var collectionView = new c1.cba.LightSwitchCollectionView(contentItem);
        pie.wjControl.itemsSource = collectionView;
        myapp.pie = pie.wjControl;
};
myapp.PieCustom.InnerRadius_render = function (element, contentItem) {
        $("<select><option>0</option><option>0.25</option><option>0.5</option><option>0.75</option></select>")
        .appendTo($(element))
        .change(function () {
                myapp.pie.innerRadius = Number($(this).val());
        });
};

Exploded Pie

FlexPie has an offset property that enables you to customize your pie chart to create an exploded pie. Use this property to adjust the offset of slices from the centre of the pie chart. This makes the pie slices appear separated from each other as per a specified offset value.

The following image shows how the FlexPie appears after setting the offset value to 0.2.

To write code in JavaScript:

JavaScript	Copy Code
myapp.PieExploded.FlexPie_render = function (element, contentItem) { var pie = new c1.cba.FlexPie($(element), contentItem); var collectionView = new c1.cba.LightSwitchCollectionView(contentItem); pie.wjControl.itemsSource = collectionView; myapp.pie = pie.wjControl; }; myapp.PieExploded.Offset_render = function (element, contentItem) { $("<select><option>0</option><option>0.1</option><option>0.2</option><option>0.3</option><option>0.4</option><option>0.5</option></select>") .appendTo($(element)) .change(function () { myapp.pie.offset = Number($(this).val()); }); };

JavaScript

Copy Code

myapp.PieExploded.FlexPie_render = function (element, contentItem) {
        var pie = new c1.cba.FlexPie($(element), contentItem);
        var collectionView = new c1.cba.LightSwitchCollectionView(contentItem);
        pie.wjControl.itemsSource = collectionView;
        myapp.pie = pie.wjControl;
        };
myapp.PieExploded.Offset_render = function (element, contentItem) {
        $("<select><option>0</option><option>0.1</option><option>0.2</option><option>0.3</option><option>0.4</option><option>0.5</option></select>")
        .appendTo($(element))
        .change(function () {
                myapp.pie.offset = Number($(this).val());
        });
};