Total Pageviews

Saturday, 23 May 2015

Creating Bar chart using Kendo Controls

<div class="chart-wrapper">
    @(Html.Kendo().Chart(Model)
        .Name("chart")
        .Title("No of Request")
        .Legend(legend => legend
            .Position(Kendo.Mvc.UI.ChartLegendPosition.Bottom)
        )
                .SeriesDefaults(seriesDefaults =>
                    seriesDefaults.Bar().Stack(true)
                )
                .Series(series =>
                {
                    series.Column(new int[] { 10, 18, 27, 9, 15 }).Name("App1").Stack(true);
                    series.Column(new int[] { 21, 3, 7, 10, 6 }).Name("App2").Stack(true);
                    series.Column(new int[] { 4, 16, 4, 29, 21 }).Name("App3").Stack(true);
                })

                .SeriesColors(
                    "#cd1533", "#4db9e3", "#8e1100f"
                )


        .CategoryAxis(axis => axis
            .Categories("Mon", "Tue", "Wed", "Thr", "Fri")
        )
        .ValueAxis(axis => axis
            .Numeric()
        )
        .Tooltip(tooltip => tooltip
            .Visible(true)
            .Format("{0}%")
        )
    )
</div>

No comments:

Post a Comment