Stacked Chart via Dropdown

4 posts, 1 answers
  1. David
    David avatar
    16 posts
    Member since:
    Aug 2014

    Posted 08 May Link to this post

    I am attempting to create a dynamic stacked chart. The user will select if they want a stacked chart via a dropdown list and then the chart will update with their selection. An example is included of something close to what it should be. The uncommented out data is what I would like to use but the commented out data is okay as well. I would like to at least have model remain the same otherwise it would be a different object created each time. 
  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 10 May Link to this post

    Hi David,

    Thank you for contacting Telerik Support.

    Instead of recreating the chart each time, you could simply change the group options of its dataSource, based on the selection from the drop-down. You could review the above approach in the following Dojo example.

    I hope that the above helps you. If you have any further questions, please do not hesitate to contact us.

    Regards,
    Veselin Tsvetanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. David
    David avatar
    16 posts
    Member since:
    Aug 2014

    Posted 11 May Link to this post

    Thank you for the example but it is not working as the client intends. I have included a compressed file of images of what is presented versus what the client is expecting.

    1. (Client Expectation) The client expects to see only two columns since there are only two distinct code descriptions (CodeDesc).
    1a. (Code Currently Displays) This displays what the code currently displays with four columns and three of them are repeating.
    2. (Client Expectation) The client expects to see a stacked chart for the agency/component. This is just an approximation but there should be 3 delineations for agriculture and only the 1 for technical services.
    2a. (Code Currently Displays) This is currently displayed data with no summation and no stacking. It appears that it is just taking the 6.7 million from the last group instead of aggregating the values. It also posts agriculture twice instead of posting technical services as the second stacked bar with a value of 5 million.
    3. (Client Expectation) This is similar to 2 in that a stacked chart should be visible with the data supplied with 3 delineations for agriculture and 1 for technical services.
    3a. (Code Currently Displays) As was in 2a the agriculture is only one bar taking in the data from the last data group and the technical services group is not displaying even the 5 million.
    4. (Client Expectation) Showing an approximate stacked chart for groups for both agriculture and technical services.
    4a. (Code Currently Displays) Two data sets appear to be retrieved but the second bar should be Technical Services but instead is displaying Agriculture. In this example the first and third datasets are displayed.

    I hope this is clearer. The client expectation images are rough approximations that were quickly manipulated in MSPaint but should visually relay the end result.

  5. Answer
    Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 12 May Link to this post

    Hi David,

    There are several things, that you should do in order to achieve the desired functionality and appearance of the chart:
    - First of all your input values should be numeric. At the moment the "TotalValue" from your dataSource are string values;
    - You will have to remove the field: "CodeDesc" from your categoryAxis configuration;
    - In the series configuration you will have to set categoryField to "CodeDesc";
    - You will have to add also an aggregate: "sum" to the series configuration;

    The following Dojo example implements the above changes.

    Regards,
    Veselin Tsvetanov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready