We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Datasource for pie graph with colours

Thread ID:

Created:

Updated:

Platform:

Replies:

113800 Oct 9,2013 08:44 PM Jan 20,2014 01:20 AM JavaScript 4
loading
Tags: ejChart
Pradeep
Asked On October 9, 2013 08:44 PM

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 [Syncfusion]
Replied On October 11, 2013 06:06 AM

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
Replied On October 13, 2013 07:00 PM

Oh thanks :). That worked perfectly.

cheers
Pradeep

Gowrimathi S [Syncfusion]
Replied On October 14, 2013 12:00 AM

Hi Pradeep

 

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

 

Thanks

Gowrimathi S


Gowrimathi S [Syncfusion]
Replied On January 20, 2014 01:20 AM

Hi pradeep,

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

Thanks
Gowri


pieInterior_f08d2c5c.zip

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;