This is a migrated thread and some comments may be shown as answers.

Bar chart legend just says 'Share'

4 Answers 139 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 12 Aug 2015, 11:15 AM

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

4 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 14 Aug 2015, 10:45 AM
Hello Mark,

The legend items are shown per series for bar charts and you have a single series so a single legend item will be shown. You should use separate series for each bar if you wish to show separate legend items for each one. With your current setup, this can be achieved by grouping on the category field. You should also enable stacking and set the series categoryField so that each bar is show in the center of its corresponding category e.g.
.DataSource(ds => ds
    .Read(read => read.Action("RiskItemsBarChart", "Home"))
    .Group(g => g.Add(d => d.category))
)
.Series(series => series
    .Bar(d => d.Share, d => d.Color).CategoryField("category")
    .Name("#:group.value#")       
    .Stack(true)
    ...



Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 17 Aug 2015, 08:21 AM

Hi Daniel,

Thanks for the reply.  I made the changes and it fixed the legend, but now the graph only shows the 1st grouping rather than all 4.  I've posted a screenshot of how the graph looked before the changes (with 4 bars, and now how it looks after with just 1 bar showing).  Please can you advise.

Thanks, Mark

0
Accepted
Daniel
Telerik team
answered on 19 Aug 2015, 07:27 AM
Hi again Mark,

Sorry, I forgot to mention that you should remove the categoryAxis field configuration:
.CategoryAxis(axis => axis
    .Visible(false)
)
Also, in order for the legend item marker color to match the bar color, you will need to use the dataBound event to set the series color option from the data e.g.
function dataBound(e) {
    var series = this.options.series;
    for (var i = 0; i < series.length; i++) {
        series[i].color = series[i].data[0].Color;
    }
}


Regards,
Daniel
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mark
Top achievements
Rank 1
answered on 19 Aug 2015, 10:26 AM

Worked perfectly, thanks!

Mark

Tags
Charts
Asked by
Mark
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Mark
Top achievements
Rank 1
Share this question
or