Displaying multiple charts with DataSource

15 posts, 0 answers
  1. Aerion
    Aerion avatar
    13 posts
    Member since:
    Aug 2011

    Posted 26 Feb 2015 Link to this post

    Is it possible to return a model which contains some lists and some integers, and process each as a series, using ASP.NET MVC? I'm wanting to display a scatter chart, line charts, etc.
  2. Aerion
    Aerion avatar
    13 posts
    Member since:
    Aug 2011

    Posted 26 Feb 2015 Link to this post

    (I'm wanting do scatter points and a standard deviation line.)
  3. Kendo UI is VS 2017 Ready
  4. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 02 Mar 2015 Link to this post

    Hello Anthony,

    What is the model definition that you are trying to bind to? Assuming that both are fields of the Foo model, you can bind the chart like this:

        @model Kendo.Mvc.Examples.Models.Foo

        @(Html.Kendo().Chart()
            .Name("chart")
            .Series(series => {
                series.Scatter(Model.PricePerformance);
                series.Line(Model.StandardDeviation);
            }))

     

    Regards,

    Alex Gyoshev

    Telerik

     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Aerion
    Aerion avatar
    13 posts
    Member since:
    Aug 2011

    Posted 02 Mar 2015 Link to this post

    Hi Alex,

    I'd want to have a model passed from DataSource, and not as a Model passed to the view. It would contain:
    - List<ValueViewModel> Values
    - double Mean
    - double StandardDeviation

    The ValueViewModel would at least contain:
    - int Value
    - int Count

    The values would be used to create a bell curve, with vertical standard deviation lines.
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 04 Mar 2015 Link to this post

    Hello Anthony,

    If I understand correctly, only the list of values (Values) needs to be a series, and you can use the chart plot bands to show the mean / standard deviation as lines (as in this demo). If that is your intent, check out the ChartPlotBandsBuilder for a demo how to configure them.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Aerion
    Aerion avatar
    13 posts
    Member since:
    Aug 2011

    Posted 05 Mar 2015 Link to this post

    Hi Alex,

    Do you have an example of how to show the list of values in that data structure in a chart such as a Column?
  8. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 09 Mar 2015 Link to this post

    Hello Anthony,

    If I understand correctly, this example should be what you are looking for -- Dojo snippet (using the Dojo to quickly illustrate the result, the fluent builder syntax is analogous).

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Aerion
    Aerion avatar
    13 posts
    Member since:
    Aug 2011

    Posted 10 Mar 2015 Link to this post

    Hi Alex,

    This example's model is very basic, unlike mine. Is there maybe a way to simplify mine so it works? I need to be able to pass many "ValueViewModel"s as well as other singular primitive types, via DataSource.
  10. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 12 Mar 2015 Link to this post

    Hello Anthony,

    It appears that we are not understanding the problem -- please provide a sample that shows the problematic model that matches your scenario, along with some sample data, so that we can reach a solution.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Aerion
    Aerion avatar
    13 posts
    Member since:
    Aug 2011

    Posted 12 Mar 2015 Link to this post

    I need to get a Model from DataSource called ValueChartViewModel. It contains:

    - List<ValueChartViewModel> Values
    - double Mean
    - double StandardDeviation

    The ValueChartViewModel would contain at least:
    - int value

    I am not sure how to show a Column chart (or any chart) from the List of ValueChartViewModels within the one ViewModel passed by DataSource, using MVC.
  12. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 16 Mar 2015 Link to this post

    Hello Anthony,

    Have you checked out the offline chart demos that ship with the Kendo UI distributions? How does your scenario differ from the local data binding demo? For example, what does the ValueChartViewModel contain? Your last message is the same as the one posted after my first response. Please provide an example, as requested, in order to proceed with this thread. I have changed it to a support ticket so that the project is not visible to the public.

    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Aerion
    Aerion avatar
    13 posts
    Member since:
    Aug 2011

    Posted 19 Mar 2015 in reply to Alex Gyoshev Link to this post

    Hi Alex,

    Sorry, I didn't realize you wanted a sample project of it. Here is one: 
    https://drive.google.com/file/d/0B4WPGvXqtHMdb1FuVk5PaG5LazQ/view?usp=sharing
  14. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 23 Mar 2015 Link to this post

    Hello Anthony,

    You cannot bind directly to this type of object. However, you have these options to create such a chart:

    • You can have the standard deviation via the built-in functionality, as shown in this demo. This will alleviate the need to serialize it from the server:

         @(Html.Kendo().Chart(Model.WinningPlayerNetValues)
                .Name("net-value-chart")
                .Series(series =>
                {
                    series.Column(model => model).CategoryField("value")
                        .ErrorBars(errorBars => errorBars.Value("stderr"));
                }))
    • You can add the mean/standard deviation values to the NetValuesViewModel and then bind the Chart to an IEnumerable of NetValuesViewModel. This will serialize the mean/value in every data item, and the line chart can be bound to them. I'm attaching the adjusted project to illustrate the idea.
    Regards,
    Alex Gyoshev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. Aerion
    Aerion avatar
    13 posts
    Member since:
    Aug 2011

    Posted 23 Mar 2015 in reply to Alex Gyoshev Link to this post

    Hi Alex,

    By "You cannot bind directly to this type of object" do you mean you can't use DataSource (Ajax) but you can pass it directly to the page? This is not ideal, as it could make the whole page take a while to load up. Is there any chance of this functionality being added at some point?
  16. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 25 Mar 2015 Link to this post

    Hello Anthony,

    This functionality is not scheduled for implementation in the ASP.NET MVC wrappers. However, you can achieve it by manually fetching the data from the server and instantiating the chart on the client-side:

    $.ajax({ url: "/winners", success: function(data) {
        $("#chart").kendoChart({
            dataSource: data[0].winners
            // define plot bands or line series by parsing other data
        });

    });

    Regards,
    Alex Gyoshev
    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