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.

put values in pie chart

Thread ID:

Created:

Updated:

Platform:

Replies:

132129 Aug 15,2017 05:28 PM Aug 17,2017 05:58 AM ASP.NET MVC 3
loading
Tags: Chart
Miranda Johnson
Asked On August 15, 2017 05:28 PM

How do I put the value for the number into a pie chart?
here is the controller code
RadioButtonAnswers rba = new RadioButtonAnswers();
rba.SurveyNumber = SurveyNumber;
rba.GroupNumber = 10;
List<GetRadioAnswerOccurances_Result> IdeasRadio = rba.RadioAnswers();
ViewBag.PieIdeas = IdeasRadio;
comments.GroupNumber = 10;
comments.SurveyNumber = SurveyNumber;

Here is the code for my my view
<div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
        @(Html.EJ().Chart("PieChartContainer1")
              .CommonSeriesOptions(cr => cr.Type(SeriesType.Pie))
              .Series(sr =>
              {
                  sr.Explode(true)
                  
                  .XName("ResponseText")
                  .Marker(mr => mr.DataLabel(dl => dl.Visible(true)
                        .TextMappingName("ResponseText")
                        .Font(fn => fn.Color("black"))
                        )
                    )
                  .YName("NumOccurance")
                  .DataSource(ViewBag.PieIdeas)
                  .LabelPosition(ChartLabelPosition.OutsideExtended)
                  .EnableSmartLabels(true) 
                  .Add();

              })
             .Title(title => title.Text("How Ideas Get Shared"))
             .IsResponsive(true)
        )
    </div>
</div>

Attachment: webpagepiechart_f030b748.zip

Dharanidharan Dharmasivam [Syncfusion]
Replied On August 16, 2017 08:47 AM

Hi Miranda, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. Your requirement can be achieved as a workaround using annotation feature in the load event of chart. In this event, got the data source and depends upon the length of the data source we have added annotation dynamically. Find the code snippet to achieve this requirement. 

ASP.NET MVC: 

@(Html.EJ().Chart("PieChartContainer1") 
  //... 
  .Load("chartLoad") 
) 


function chartLoad(sender) { 
        //Get the data source 
        var chartData = sender.model.series[0].dataSource; 
        for (var i = 0; i < chartData.length; i++) { 
            //Created div element dynamically 
            var divElement = document.createElement('div'); 
            divElement.id = 'annotation' + i; 
            divElement.style.display = "none"; 
            divElement.innerText = chartData[i].InstanceUsed 
            document.getElementsByTagName('body')[0].appendChild(divElement); 
            //Added annotation dynamically 
            sender.model.annotations[i] = {}; 
            sender.model.annotations[i].visible = true; 
            sender.model.annotations[i].content = 'annotation' + i; 
            sender.model.annotations[i].coordinateUnit = "points"; 
            sender.model.annotations[i].x = i; 
            sender.model.annotations[i].y = chartData[i].NumOccurance; 
        } 
    } 

You can add the required content form the data source as in the above highlighted code example. 

Screenshot: 
 


Sample for reference can be find from below link.
http://www.syncfusion.com/downloads/support/forum/132129/ze/chart642664589  

For more information on annotation, kindly find the help document. 

Thanks, 
Dharani. 


Miranda Johnson
Replied On August 16, 2017 01:41 PM

Thank you    Upon inspection of your solution I saw that you were assigning an ID value to the divs  and realized that with multiple pie charts that I would need to name all of these id's differently  and would also need to have multiple javascript functions in order to have proper values in each section of the various pie charts.   So here is what I ended up doing.  Anyway it works   so thanks.  


1st pie chart  

@(Html.EJ().Chart("PieChartContainer1") 
  //... 
  .Load("chartLoad") 
)  


2nd and 3rd pie charts
@(Html.EJ().Chart("PieChartContainer2") 
  //... 
  .Load("chartLoad2") 
) 

@(Html.EJ().Chart("PieChartContainer3") 
  //... 
  .Load("chartLoad3") 
) 

javascript functions
function chartLoad(sender){
    var chartData = sender.model.series[0].dataSource; 
    for (var i = 0; i < chartData.length; i++) { 
        var divElement = document.createElement('div'); 
        divElement.id = 'annotation' + i; 
        divElement.style.display = "none"; 
        divElement.innerText = chartData[i].NumOccurance 
        document.getElementsByTagName('body')[0].appendChild(divElement); 
        //Added annotation dynamically 
        sender.model.annotations[i] = {}; 
        sender.model.annotations[i].visible = true; 
        sender.model.annotations[i].content = 'annotation' + i; 
        sender.model.annotations[i].coordinateUnit = "points"; 
        sender.model.annotations[i].x = i; 
        sender.model.annotations[i].y = chartData[i].NumOccurance; 

    }
}
function chartLoad2(sender){
    var chartData = sender.model.series[0].dataSource; 
    for (var i = 0; i < chartData.length; i++) { 
        var divElement = document.createElement('div'); 
        divElement.id = 'annotation2' + i; 
        divElement.style.display = "none"; 
        divElement.innerText = chartData[i].Instances 
        document.getElementsByTagName('body')[0].appendChild(divElement); 
        //Added annotation dynamically 
        sender.model.annotations[i] = {}; 
        sender.model.annotations[i].visible = true; 
        sender.model.annotations[i].content = 'annotation2' + i; 
        sender.model.annotations[i].coordinateUnit = "points"; 
        sender.model.annotations[i].x = i; 
        sender.model.annotations[i].y = chartData[i].NumOccurance; 

    }
}
function chartLoad3(sender){
    var chartData = sender.model.series[0].dataSource; 
    for (var i = 0; i < chartData.length; i++) { 
        var divElement = document.createElement('div'); 
        divElement.id = 'annotation3' + i; 
        divElement.style.display = "none"; 
        divElement.innerText = chartData[i].Instances 
        document.getElementsByTagName('body')[0].appendChild(divElement); 
        //Added annotation dynamically 
        sender.model.annotations[i] = {}; 
        sender.model.annotations[i].visible = true; 
        sender.model.annotations[i].content = 'annotation3' + i; 
        sender.model.annotations[i].coordinateUnit = "points"; 
        sender.model.annotations[i].x = i; 
        sender.model.annotations[i].y = chartData[i].NumOccurance; 

    }
}


Dharanidharan Dharmasivam [Syncfusion]
Replied On August 17, 2017 05:58 AM

Hi Miranda, 

Thanks for the update. 

In case of having multiple charts, you no need to use different javascript function(load event) for adding annotation. Instead you can use the same function for all the chart, here you need to assign unique id to each annotation div element. To achieve this, you can assign the chart id to the annotation div element as highlighted in the below code snippet. 


@(Html.EJ().Chart("PieChartContainer1") 
//... 
.Load("chartLoad") 
) 
        @(Html.EJ().Chart("PieChartContainer2") 
//... 
.Load("chartLoad") 
) 
@(Html.EJ().Chart("PieChartContainer3") 
//... 
.Load("chartLoad") 
) 
 
 
function chartLoad(sender) { 
        var chartData = sender.model.series[0].dataSource; 
        for (var i = 0; i < chartData.length; i++) { 
            var divElement = document.createElement('div'); 
            divElement.id = 'annotation' + i + this._id; 
            divElement.style.display = "none"; 
            divElement.innerText = chartData[i].InstanceUsed 
            document.getElementsByTagName('body')[0].appendChild(divElement); 
            sender.model.annotations[i] = {}; 
            sender.model.annotations[i].visible = true; 
            sender.model.annotations[i].content = 'annotation' + i + this._id; 
            sender.model.annotations[i].coordinateUnit = "points"; 
            sender.model.annotations[i].x = i; 
            sender.model.annotations[i].y = chartData[i].NumOccurance; 
        } 
    } 


Sample for reference can be find form below link. 
 
Kindly revert us, if you have any concerns. 

Thanks, 
Dharani. 


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.

;