Hi there,
I have a bar chart and a pie chart next to each other. In each case they come from a model with a property of 'category' for displaying the each item falls into. The pie chart displays the legend correctly, but the bar chart simply states 'Share' instead of a correct legend (see attached screenshot) - it seems it can't read the datasource correctly in the legend but can in the rest of the chart (I have got the x-axis labels switched off but when switched on the categories are being rendered correctly).
This is my view code (pie chart, then bar chart) :-
@( Html.Kendo().Chart<Models.SitesSurveyedPieChartModel>()
.Name("sitesSurveyed")
.ChartArea(chartArea => chartArea.Background("#F5F5F5"))
.Title(title => title
.Text("Sites Surveyed")
.Position(ChartTitlePosition.Top))
.HtmlAttributes(new { @class = "small-chart" })
.Legend(legend => legend
.Visible(true)
.Position(ChartLegendPosition.Bottom)
)
.DataSource(ds =>
{
ds.Read(read => read.Action("SitesSurveyedPieChart", "Reporting"));
ds.Sort(sort => sort.Add(model => model.SiteSurveyed).Ascending());
}
)
.Tooltip(tooltip => tooltip
.Visible(false)
)
.Series(series => series
.Pie(model => model.Share, model => model.SiteSurveyed.ToString(), model => model.Color)
.Padding(0)
.Labels(labels => labels
.Visible(true)
.Template("#= value # (#= kendo.format('{0:P}', percentage)#)")
.Align(ChartPieLabelsAlign.Column)
.Position(ChartPieLabelsPosition.Center)
)
)
.Events(events => events
.SeriesClick("onSeriesClick_sitesSurveyed")
)
)
@( Html.Kendo().Chart<Models.RiskItemsBarChartModel>()
.Name("riskItems")
.ChartArea(chartArea => chartArea.Background("#F5F5F5"))
.Title(title => title
.Text("Risk Items")
.Position(ChartTitlePosition.Top))
.DataSource(ds => ds
.Read(read => read.Action("RiskItemsBarChart", "Reporting")) // Specify the action method and controller name
)
.Series(series => series
.Bar(d => d.Share, d => d.Color)
.Labels(labels => labels
.Visible(true)
.Template("#= value # (#= dataItem.PercentageField #)")
.Position(ChartBarLabelsPosition.InsideBase)
)
)
.CategoryAxis(axis => axis
.Categories(model => model.category)
.Visible(false)
)
.Tooltip(tooltip => tooltip
.Visible(false)
)
.Legend(legend => legend
.Visible(true)
.Position(ChartLegendPosition.Bottom)
)
)
These are my models for each of above respectively (and are definitely being populated correctly) :-
public class SitesSurveyedPieChartModel
{
public Surveyed SiteSurveyed { get; set; }
public int Share { get; set; }
public bool VisibleInLegend { get; set; }
public string Color { get; set; }
public string category { get; set; } ....
public class RiskItemsBarChartModel
{
public int Share { get; set; }
public bool VisibleInLegend { get; set; }
public string Color { get; set; }
public string category { get; set; }
public int SortOrder { get; set; }
public string PercentageField { get; set; } ......
The image of what I'm getting rendered is attached. Any help getting this sorted out would be appreciated.
Thanks, Mark