Sorting on bar chart not working

6 posts, 1 answers
  1. Mark
    Mark avatar
    93 posts
    Member since:
    Jul 2014

    Posted 07 Sep 2015 Link to this post

    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

  2. Mark
    Mark avatar
    93 posts
    Member since:
    Jul 2014

    Posted 07 Sep 2015 in reply to Mark Link to this post

    Apologies - here is the attachment!

    Mark

  3. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 09 Sep 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Mark
    Mark avatar
    93 posts
    Member since:
    Jul 2014

    Posted 09 Sep 2015 in reply to Iliana Nikolova Link to this post

    Perfect!  Thanks!

    Mark

  5. NerdBrick
    NerdBrick avatar
    32 posts
    Member since:
    Jan 2013

    Posted 28 Sep in reply to Iliana Nikolova Link to this post

    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
  6. Preslav
    Admin
    Preslav avatar
    233 posts

    Posted 02 Oct Link to this post

    Hello,

    The reason and the solution for this behavior are outlined in the answer to this forum post:
    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top