Ajax bind multiple stack grouped stacked bar chart

4 posts, 0 answers
  1. Evan
    Evan avatar
    2 posts
    Member since:
    Jun 2012

    Posted 22 Jul 2013 Link to this post

    So im having some difficulty binding multiple stacks via ajax to the grouped stacked bar chart.  Hard coding the values the way you did in the demo works fine.  However I am unable to replicate the results using ajax binding.  I can do the grouped stacked bar chart with one stack, but having multiple stacks per category is eluding me.  Do you have an example where that is done through ajax binding instead of specifying the int[] in the view?  I can format the data in anyway that needs to be done.  You can even use the demo data as an example just need to know how it would be loaded through the ajax binding using the mvc helpers not through creating the chart via script.
    so 
    series
         .Column(m => m.Value).Stack(true);  but how to get this for multiple stacks per category...
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 25 Jul 2013 Link to this post

    Hello Evan,

    Apologies for not getting back to you earlier.

    Generally speaking the main idea when you would like to have grouped chart and multiple stacks is to have as much series as stacks. I.e. if you need two stacks you should create two series. Please check this forum thread which demonstrates the suggested idea for the JavaScript Kendo UI Chart and let me know if this helps.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Evan
    Evan avatar
    2 posts
    Member since:
    Jun 2012

    Posted 25 Jul 2013 Link to this post

    I had previously viewed that post in regards to binding using javascript, that is why in my post I had asked for an implementation using the MVC helpers.  Do you have any examples on that end of how to complete this using the MVC helpers, not javascript to create the multiple series.  Also in regards to this, I cannot use the view model and a loop to create the different series, as the view model is different than the model defined in the chart, and I am refreshing the chart itself, not the view it resides in.  The data needs to be loaded using the ajax bind and MVC helpers..  Do you have any information regarding an implementation for this?
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 29 Jul 2013 Link to this post

    Hi Evan,

    I am afraid what you would like to achieve is not supported by Kendo UI Chart for ASP.NET MVC. The only possible workaround I can suggest you is using JavaScript and in the dataBound event to set series.stack manually via the chart.options. I.e.: 

    @(Html.Kendo().Chart(Model)
      //....
     .Events(ev=>ev.DataBound("onDB"))
    )
     
    <script>
    function onDB() {
      //get reference to the Chart widget  
      var chart = $("#chart").data("kendoChart");
      //get chart options
      var options =  chart.options;
      //get chart series
      var series = options.series
      //set stack to the first series
      series[0].stack = "firstStack"
      //set stack to the second series
      series[1].stack = "firstStack"
      //set stack to the third series
      series[2].stack = "secondStack"
      //....
    }
    </script>
    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top