1. Home
  2. Forum
  3. ASP.NET MVC
  4. Example chart column

Example chart column

Hi good day
You who know everything, can help and guide me to make a graphic like the following image.


Thank you very much, and I'm sorry for my English

7 Replies
DD Dharanidharan Dharmasivam Syncfusion Team January 22, 2018 05:48 AM UTC

Hi Norberto, 

Thanks for using our Syncfusion products. 

We have analyzed your query. We have prepared a sample, using grid component we have displayed the data in table format and using the chart component we have displayed the same data. Kindly find the sample from below location. 

 
Screenshot: 
 

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

For more information on grid component, kindly find the help document from below. 

Kindly revert us, if you have any concern. 

Thanks, 
Dharani. 



NO Norberto January 22, 2018 09:41 PM UTC

Hello 
Dharanidharan Dharmasivam, Thanks for your reply.

I followed his example and I have a problem. Here is my code

Controller



View


Error


Help me, thank you very much

DD Dharanidharan Dharmasivam Syncfusion Team January 23, 2018 04:37 AM UTC

Hi Norberto, 
 
Thanks for the update. 
 
On analyzing with the provided screenshot we found that, you have mapped XName property of series to “XName”, but in the data source there is no such data with the mapped key(XName), so the reported issue has occurred. Here you need to bind “Nombre” to XName property of series. We have prepared a sample with respect to this. Kindly find the codes snippet below to achieve this. 
 
ASP.NET MVC 

@(Html.EJ().Chart("chartContainer") 
      .Series(sr => 
        { 
             sr.DataSource(ViewBag.datasource).XName("Nombre").YName("Excelente").Add(); 
             sr.DataSource(ViewBag.datasource).XName("Nombre").YName("Bueno").Add(); 
             //... 
        }) 
        //... 
) 


You can change this with respect to your requirement. 

Screenshot: 
 

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

Thanks, 
Dharani. 


NO Norberto January 23, 2018 07:57 PM UTC

Hello Dharani,
Thank you very much, you are the best !!, your answers helped me a lot.

My last question, I would like to calculate the percentage of the columns.
Again, thank you very much Dharani

DD Dharanidharan Dharmasivam Syncfusion Team January 24, 2018 11:54 AM UTC

Hi Norberto, 
 
Thanks for the update. 
 
We have analyzed your query. We suspect that your requirement is to calculate the percentage value for the columns alone and need to display as data label for example finding the percentage value for the highlighted columns only from the below screenshot. 
 
 
We have achieved percentage for the above scenario using the DisplayTextRendering event. Find the code snippet below to achieve this requirement. 
 
ASP.NET MVC: 
 
@(Html.EJ().Chart("chartContainer") 
     // 
   .DisplayTextRendering("dataLabel") 
) 
function dataLabel(sender) { 
            var series = sender.model.series, pointIndex = sender.data.pointIndex, count = 0; 
            for (var i = 0; i < series.length; i++) 
                count += sender.model.series[i].points[pointIndex].y; 
            sender.data.text = (sender.data.series.points[pointIndex].y/count * 100) + "%"; 
        } 
 
Sample for reference can be find from below link. 
 
If this is not your exact requirement, kindly revert us with more information on your query or provide some screenshot of your requirement. 

Thanks, 
Dharani. 



NO Norberto January 24, 2018 08:15 PM UTC

Hello Dharani.
Thank you for your answers.
My last question. The percentage that is shown in the image, that its maximum value is 100.



Thank you Dharani.


DD Dharanidharan Dharmasivam Syncfusion Team January 25, 2018 09:13 AM UTC

Hi Norberto, 
 
Thanks for the update. 
 
From your query we suspect that you are referring the maximum value of y axis labels, i.e  you need to have the maximum value of y axis label is 100%. If this is your case, then we would like to let you know that in column type series, if you have specified label format as p, then depends upon the axis labels, percentage value will be calculated.  
 
However your requirement can be achieved by using stackingColumn100 series type. Here all the series will get stacked and rendered on above the other. In this case you no need to give label format for y axis. Find the code snippet to achieve this requirement. 
 
ASP.NET MVC: 
 
@(Html.EJ().Chart("chartContainer") 
  .Series(sr => 
        { 
            sr.Type(SeriesType.StackingColumn100) 
             //... 
        }) 
        //... 
) 


Screenshot: 
 
Sample for reference can be find from below link. 
 
For more information on chart types, kindly find the help document from below. 

Find the online sample link for 100% stacking column from below. 

If your query is misunderstood at our end, kindly revert us more information on your query. 

Thanks, 
Dharani. 



Loader.
Up arrow icon