Datasource for pie graph with colours

[Pradeep]

This is the raw code that I used to test my pie graph
pieGraph.ejChart(
        {
            series: [{
                points: [{ x: 'Campaign 1', y: 13, text: '', interior: 'rgb(4,57,91)' },
                         { x: 'Campaign 2', y: 25, text: '', interior: 'rgb(3,97,167)' },
                         { x: 'Campaign 3', y: 12, text: '', interior: 'rgb(0,134,187)' },
                         { x: 'Campaign 4', y: 7,  text: '', interior: 'rgb(59,187,237)' },
                         { x: 'Campaign 5', y: 10, text: '', interior: 'rgb(130,205,237)' },
                         { x: 'Campaign 6', y: 14, text: '', interior: 'rgb(193,227,239)' },
                         { x: 'Campaign 7', y: 10, text: '', interior: 'rgb(179,222,202)' },
                         { x: 'Campaign 8', y: 10, text: '', interior: 'rgb(113,198,167)' }
                ],
               
                //labelPosition: 'outside',
                //marker: { textOffset: 40 },
                animation: true,
                name:'pie', type: 'pie',
                //pieOptions: { text: { font: { size: '13px', fontFamily: 'Open Sans', color: '#333333'}}}
            }],
            pointRegionClick: function (sender) {
                alert(sender.Data.Region.Region.PointIndex);
            },
            margin: { top: 0, bottom: 30, left: 0, right: 0 },
            size: { height: scrollH, width: scrollH },
            legend: { visible: false }
        });

which renders like this
https://www.dropbox.com/s/qlotjeuw6bxelht/question_12_1_graph_pie_datasource.jpg

No I want to convert the points to a data source such as
dataSource: { data: graphTotalData, xName: ["x"], yNames: ["y"] },

Now assume that the graphTotalData is returning a json formatted as below
[{ x: 'Campaign 1', y: 13, text: '', interior: 'rgb(4,57,91)' },
{ x: 'Campaign 2', y: 25, text: '', interior: 'rgb(3,97,167)' },
{ x: 'Campaign 3', y: 12, text: '', interior: 'rgb(0,134,187)' },
{ x: 'Campaign 4', y: 7,  text: '', interior: 'rgb(59,187,237)' },
{ x: 'Campaign 5', y: 10, text: '', interior: 'rgb(130,205,237)' },
{ x: 'Campaign 6', y: 14, text: '', interior: 'rgb(193,227,239)' },
{ x: 'Campaign 7', y: 10, text: '', interior: 'rgb(179,222,202)' },
{ x: 'Campaign 8', y: 10, text: '', interior: 'rgb(113,198,167)' }
]

How do I specify the text and the interior color into the data source
property of the pie graph. I'm open to other ways of doing this, if it
is possible? but I want to be able to specify custom color for each data,
and I have about 30 colors. I also would like to be able to take the text off.

[Gowrimathi S]

Hi Pradeep,

 

Thanks for using Syncfusion product

 

It is not possible to set the text and interior for a point  in the datasource directly, but you can make use of the “preRender”  event in the chart to assign text and interior for each point.

 

For your convenience we have created sample based on the query and your  json data (graphTotalData) is referred in the “jsondatachart.js”.  Please find the sample from the attachment

 

Thanks

Gowrimathi S

 

pieInterior_3196bbb2.zip

[Pradeep]

Oh thanks :). That worked perfectly.

cheers
Pradeep

[Gowrimathi S]

Hi Pradeep

 

Thanks for your update,  kindly let us know if you need any further assistance on this.

 

Thanks

Gowrimathi S

[Gowrimathi S]

Hi pradeep,

Sample link provided in our previous update is broken. please find the sample from below attachment

Thanks
Gowri

pieInterior_f08d2c5c.zip