DataSource different sorting causes Chrome to mess up Stacked, Grouped, Barcharts

5 posts, 0 answers
  1. Carsten Koster
    Carsten Koster avatar
    25 posts
    Member since:
    Sep 2006

    Posted 23 Aug 2013 Link to this post

    Hey there,

    I spent the last half day or so hunting a really annoying problem.  Maybe this Information can provide others meanings to get this sorted out quicker...

    I created a Barchart which is filled by a  grouped DataSource. The Barchart is configured to stack the dataitems and group them by a category.  So far so good.

    The Chart is displayed in Firefox without a problem, everything adds up and the stacks are correctly aligned. But when I display the same chart with Chrome the stacks are wrong. Meaning that the stack of category A contains elements with category B and vice versa.
    After thorough investigation we narrowed the problem down to the default sort of the datasource. It seems that the chart depends on data that is correctly sorted by the category field, so that the items of every group are in the SAME ORDER. In Firefox that is the case, probably because my original data was already sorted in that way, but in Chrome (which apparently uses QuickSort (for arrays with 10 or less elements ) => NOT STABLE) the order for one entity is wrong. And so the elements in the chart are mixed up. If you ask me the charts implementation for dividing the categories MUST NOT rely on correctly sorted Datasources or if so it should enforce are correct sorting.

    We fixed the problem by explicitly providing a sort-clause to the datasource specifying both the group field and after that the category field.
    Heres a Fiddle to reproduce the issue:
    http://jsfiddle.net/zaCPt/3/
    Use Chrome if you want to see the difference! Or look at the attached screenshot, both charts use the same data. Top is unsorted datasource, Bottom is sorted
    Chrome Version is 28.0.1500.95 m

    Regards,
    Kristoffer Witt


  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 23 Aug 2013 Link to this post

    Hi,

    I'm afraid this is a long-standing issue with the V8 JS engine. And it doesn't look like it will ever be fixed.

    We can work around it in the data source, but this would result in unacceptable performance degradation.

    Our recommendation is to do exactly what you did - sort all fields explicitly. If this is not possible, introduce an ordinal field and sort by it.

    Regards,
    T. Tsonev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. INFOLINE BILGI TEKNOLOJILERI
    INFOLINE BILGI TEKNOLOJILERI avatar
    7 posts
    Member since:
    Oct 2014

    Posted 09 Jun 2015 Link to this post

    Say that we want to sort the array with additional value. Then it goes all weird. 

    Here is the dojo exaple,

    This has no sort by series field

    http://dojo.telerik.com/UPoCu/6

    this one has ToplamHayvanSayisi field to sort

    http://dojo.telerik.com/amAkA

    like you can see all the values are teribly mixed. And it is not chrome to blame.

    as far as I go, I figured that you use the first object of sorted data array, witch is  Karadeniz category for group Arıcılık. But Karadeniz is only comes first for Arıcılık. İn Total it comes in third place. But shome how chart shows it at first place, and it has Ege's data in other groups. 

     

  4. INFOLINE BILGI TEKNOLOJILERI
    INFOLINE BILGI TEKNOLOJILERI avatar
    7 posts
    Member since:
    Oct 2014

    Posted 09 Jun 2015 Link to this post

    To Fix issue I added additional field with has aggregated values. and sorted the chart via that field.

    http://dojo.telerik.com/afANO/3

  5. T. Tsonev
    Admin
    T. Tsonev avatar
    2817 posts

    Posted 10 Jun 2015 Link to this post

    Hello,

    Glad to hear you've managed to get this working. This would be our recommendation as well.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top