Multiple axis chart binding

2 posts, 0 answers
  1. Chris Holmes
    Chris Holmes avatar
    4 posts
    Member since:
    Aug 2009

    Posted 18 Jun 2013 Link to this post

    Hi ,

    I will appreciate if someone could help me with this issue.
    I have a Model with the following structure:

    public class PieChartModel
        {
            public string YearMonth { get; set; } //this have a data like 2013.05
            public decimal Balance { get; set; }
            public string ClientName { get; set; }
            public decimal EndingPercentage { get; set; }
        }

    My task is to display this information in a graph that
    contain multiple axis represented like in Image 1

    The code I used to get the graph on Image 1 was this one:

    @(Html.Kendo().Chart<AccutracDashboard.Models.PieChartModel>()
        .Name(Model.ChartName)
        .HtmlAttributes(new {style = "height: 500px"})
        .Title(Model.ChartTitle)
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
            .DataSource(ds => ds.Read(read =>
    read.Action(Model.ChartAction, Model.ChartController))
                                          )        
        .Series(series => {
            series.Column(model =>
    model.Balance)
                .GroupNameTemplate("#= group.value # (#= series.name #)").Labels(false);
            series.Line(model =>
    model.EndingPercentage).Name("Percent")
                .Axis("percent").Labels(false);
        })
        .CategoryAxis(axis => axis
            .Categories(model => model.ClientName)
            .Labels(label => label.Visible(true).Rotation(45))
            .AxisCrossingValue(0, 21)
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels
                .Format("${0}")
            ).Title("Indicator
    $"))
        .ValueAxis(axis => axis
            .Numeric("percent")
                .Title("Frequency")
                .Labels(labels => labels.Format("{0}%"))
                .Min(0).Max(100)
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0:N0}")
        )
    )

    but our client wants each bar to have a different color and
    be shown as a legend in the graph as you can see on Image 2

    Grouping by client I can implement  this request, but then the line graph is not represented properly.
    The code I used to group is almost the same

    @(Html.Kendo().Chart<AccutracDashboard.Models.PieChartModel>()
        .Name(Model.ChartName)
        .HtmlAttributes(new {style = "height: 500px"})
        .Title(Model.ChartTitle)
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom)
        )
            .DataSource(ds => ds.Read(read =>
    read.Action(Model.ChartAction, Model.ChartController))       
    .Group(group => group.Add(model => model.ClientName)))        
        .Series(series => {
            series.Column(model => model.Balance)
                .GroupNameTemplate("#= group.value # (#= series.name #)").Labels(false);
            series.Line(model =>
    model.EndingPercentage).Name("Percent")
                .Axis("percent").Labels(false);
        })
        .CategoryAxis(axis => axis
            .Categories(model => model.ClientName)
            .Labels(label => label.Visible(true).Rotation(45))
            .AxisCrossingValue(0, 21)
        )
        .ValueAxis(axis => axis.Numeric()
            .Labels(labels => labels
                .Format("${0}")
            ).Title("Indicator
    $")
        )
        .ValueAxis(axis => axis
            .Numeric("percent")
                .Title("Frequency")
                .Labels(labels => labels.Format("{0}%"))
                .Min(0).Max(100)
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0:N0}")
        )
    )

    What do I need to do in order to show the data in the graph displaying the bars with different color and showing  a legend per client,   and at the same time be able to see properly the line chart?

    Please let me know if you need more information.

    Thanks, Ainel



  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 20 Jun 2013 Link to this post

    Hello Ainel,

    I have already replied to the same question in your support ticket, however I am pasting my reply here too so the other users who are following this thread can read it:

    If I understand correctly your scenario you would like to have Kendo UI Chart with column and line serieswhere the column series are created from the ClientNames and the line series are created from  EndingPercentages. For this scenario I can suggest the following approach:

    • Group the DataSource by ClientName field -> this will create separate series for each of the ClientNames;
    • Pass the EndingPercentages as an array in the Line series (as shown in this online demo);
    • Specify different field for the CategoryAxis, not ClientName.

    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. UI for ASP.NET MVC is VS 2017 Ready
Back to Top