Sorting on bar chart not working

[Mark]

Hi there,

My bar chart is not picking up the sort order I am applying.  I am returning Json with 4 categories - High, Medium, Low and Very Low, each returning a sort order to force the graph to display in that correct order.  However, the graph renders in the wrong order.  Please can you assist.  I have attached a screenshot of what is rendered, code below.  Everything else in my chart is working fine.

 === JSON RETURNED ===

[{"Share":3,"VisibleInLegend":true,"Color":"#E8412D","category":"High","SortOrder":4,"PercentageField":"9%"},{"Share":9,"VisibleInLegend":true,"Color":"#ED8132","category":"Medium","SortOrder":3,"PercentageField":"29%"},{"Share":3,"VisibleInLegend":true,"Color":"#FFB400","category":"Low","SortOrder":2,"PercentageField":"9%"},{"Share":16,"VisibleInLegend":true,"Color":"#92CE7A","category":"Very Low","SortOrder":1,"PercentageField":"51%"}]​

=== VIEW ====

 @( 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"))
                    .Group(g => g.Add(d => d.category))
                    .Sort(g => g.Add(d => d.SortOrder))
                )
                .Series(series => series
                    .Bar(d => d.Share, d => d.Color).CategoryField("category")
                    .Name("#:group.value#")
                    .Stack(true)
                    .Labels(labels => labels
                        .Visible(true)
                        .Template("#= value # (#= dataItem.PercentageField #)")
                        .Position(ChartBarLabelsPosition.InsideBase)
                    )
                )
                .CategoryAxis(axis => axis
                    .Visible(false)
                )
                .Tooltip(tooltip => tooltip
                    .Visible(false)
                )
                .Legend(legend => legend
                    .Visible(true)
                    .Position(ChartLegendPosition.Bottom)
                )
                .Events(events => events
                    .SeriesClick("onSeriesClick_riskItems")
                    .DataBound("onDataBound_riskItems")
                )
            )

Thanks, Mark

[Mark]

Apologies - here is the attachment!

Mark

[Iliana Dyankova]

Hi Mark,

If I understand correctly you would like the series order to match the SortOrder field? In order to achieve this I would suggest the following approach:
- Group by the "SortOrder" field;
- Sort by the "category" field;
- Set the category name in the series.name (to get the category values in the legend).
For your convenience here is a dojo which demonstrates the suggested approach in action.

Regards,
Iliana Nikolova
Telerik

 

 

[Mark]

Perfect!  Thanks!

Mark

[NerdBrick]

I was just looking at the dojo sample for a feature I'm working on, and I noticed there is an issue with the sample. The color of the bars don't line up with the colors of the legend. 

Thank you

[Preslav]

Hello,

The reason and the solution for this behavior are outlined in the answer to this forum post:

• http://www.telerik.com/forums/stack-bar-chart

In this case, the workaround code could look like:

dataBound: function(e){
  var chart = e.sender;
  for(var i=0;i<chart.dataSource.data().length;i++){
      chart.options.series[i].color = chart.options.series[i].data[0].Color;
  }
},

I hope the above helps.


Regards,
Preslav
Progress Telerik