2 dynamic charts that adjust to have the same vertical axis hieght/values

2 posts, 0 answers
  1. Davin
    Davin avatar
    7 posts
    Member since:
    Feb 2013

    Posted 09 Jul 2013 Link to this post

    I have 2 different charts and I want them to reach the vertical axis values. I want the shorter one to adjust to whatever the taller chart's axis value is.

    So if chart 1's tallest bar is $100 and chart 2's is only $50, I want chart 2's axis to rise to $100 as well. Bascially this allows easier comparison between the 2 side by side charts.

    How would I set this up? 

    I am Using MVC and below are the 2 charts I am using...

    chart 2...

    <div class="chart-wrapper">
                        @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
            .Name("LabourUtilizationCategory1Chart")
            .Title("Labour Utilization Categories")
            .Legend(legend => legend
                .Visible(false)
            )

        .DataSource(ds => ds.Read(read => read.Action("_GetTop3CatUtilization", "Report")
                                                .Data("function(){return _GetAttr(1);}")))
                                                .AutoBind(false)

            .Series(series =>
            {
                series.Column(model => model.Value)
                    .Name("Waste")
                    .Color("#FF0000")
                    .Overlay(ChartBarSeriesOverlay.None)
                    .Labels(labels => labels.Format("{0:N0}%").Visible(false))
                    .Gap(.3);
            })

            .CategoryAxis(axis => axis
                .Categories(model => model.Date)
                .Line(line => line.Visible(true))
                .MajorGridLines(lines => lines.Visible(false))
                .MinorGridLines(lines => lines.Visible(false))
                .Labels(labels => labels.Rotation(-45)
                                        .Padding(0, 0, 0, -35)
                                        .Step(2))
            )

            .ValueAxis(axis => axis.Numeric()
                .Title("Efficiency")
                .Labels(labels => labels.Format("{0:N0}%"))
                .MajorGridLines(lines => lines.Visible(false))
                .MinorGridLines(lines => lines.Visible(false))
            )
                    .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:N0}%")
            )
            .ChartArea(chartArea => chartArea.Background("Transparent"))
        )
                    </div>

    chart2...

                    <div class="chart-wrapper">
                        @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
            .Name("LabourUtilizationCategory2Chart")
            .Title("Labour Utilization Categories")
            .Legend(legend => legend
                .Visible(false)
            )

        .DataSource(ds => ds.Read(read => read.Action("_GetTop3CatUtilization", "Report")
                                                .Data("function(){return _GetAttr(2);}")))
                                                .AutoBind(false)

            .Series(series =>
            {
                series.Column(model => model.Value)
                    .Name("Waste")
                    .Color("#FF0000")
                    .Overlay(ChartBarSeriesOverlay.None)
                    .Labels(labels => labels.Format("{0:N0}%").Visible(false))
                    .Gap(.3);
            })

            .CategoryAxis(axis => axis
                .Categories(model => model.Date)
                .Line(line => line.Visible(true))
                .MajorGridLines(lines => lines.Visible(false))
                .MinorGridLines(lines => lines.Visible(false))
                .Labels(labels => labels.Rotation(-45)
                                        .Padding(0, 0, 0, -35)
                .Step(2))
            )

            .ValueAxis(axis => axis.Numeric()
                .Title("Efficiency")
                .Labels(labels => labels.Format("{0:N0}%"))
                .MajorGridLines(lines => lines.Visible(false))
                .MinorGridLines(lines => lines.Visible(false))
            )
                    .Tooltip(tooltip => tooltip
                .Visible(true)
                .Format("{0:N0}%")
            )
            .ChartArea(chartArea => chartArea.Background("Transparent"))
        )
                    </div>
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 11 Jul 2013 Link to this post

    Hi Davin,

    In order to achieve this you could set equal min / max values to both of the charts. For example: 

    @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
       .Name("LabourUtilizationCategory1Chart")
        //...
        .ValueAxis(axis => axis.Numeric()
           .Title("Efficiency")
           //...
           .Min(10)
           .Max(100)
         )
    //....
    )
     
    //....
    @(Html.Kendo().Chart<OPS.Models.BreakoutCategoryModel>()
         .Name("LabourUtilizationCategory2Chart")
          //....
         .ValueAxis(axis => axis.Numeric()
            .Title("Efficiency")
             //....
             .Min(10)
             .Max(100)
          )
    //....
     )
    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