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
SIGN IN To post a reply.
7 Replies
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.
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
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.
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.
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.
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.
SIGN IN To post a reply.
