Kendo Line Chart

In this blog, I will show you how to use the Kendo line chart using ajax to return the data from an MVC controller.

Telerik has a vast amount of documentation on using their products, but sometimes that can cause problems trying to navigate around the literature.

So to help, this short blog will show you how to return a list as JSON from an MVC controller and display the results in a line chart and bar chart.

In this example, I used the following version of Kendo 2020.2.513 and ASP.NET MVC5 using the .NET framework 4.8

To start, I created a ViewModel as the code below shows, and this will hold the data for the Kendo UI line.

using System.Collections.Generic;

namespace KendoDemo.Models.ChartDemoModel
{
    public class DisplayChartAllSalesPerMonthViewModel
    {
        public IEnumerable TotalItemsSoldPerMonth    { get; set; }
    }

    public class AllSalesPerMonthViewModel
    {
        public AllSalesPerMonthViewModel(string month, int monthAsInt, int apple, int android)
        {
            Month       = month;
            MonthAsInt  = monthAsInt;
            Apple       = apple;
            Android     = android;
        }
        public string Month         { get; set; }
        public int MonthAsInt       { get; set; }
        public int Apple            { get; set; }
        public int Android          { get; set; }

    }
}

Controller

Next, I created the controller which will return the data for the line charts; in this example, the data is hardcoded into a list.

using System.Collections.Generic;
using System.Web.Mvc;
using KendoDemo.Models.ChartDemoModel;

namespace KendoDemo.Controllers
{
    public class HomeController : Controller
    {
        [HttpPost]
        public JsonResult MonthlySales()
        {
            List itemsSoldsPerMonth = new List
            {
                new AllSalesPerMonthViewModel(month: "Jan", monthAsInt:1,apple:20,android:60),
                new AllSalesPerMonthViewModel(month: "Feb", monthAsInt:2,apple:45,android:20),
                new AllSalesPerMonthViewModel(month: "Mar", monthAsInt:3,apple:23,android:120),
                new AllSalesPerMonthViewModel(month: "Apr", monthAsInt:4,apple:66,android:15),
                new AllSalesPerMonthViewModel(month: "May", monthAsInt:5,apple:13,android:85)
            };


            var monthlySales = new DisplayChartAllSalesPerMonthViewModel
            {
                TotalItemsSoldPerMonth = itemsSoldsPerMonth
            };

            return Json(new { monthlySales.TotalItemsSoldPerMonth, JsonRequestBehavior.AllowGet });

        }
}

Once you have created the ViewModel and controller, its time for the JavaScript file, the code for this is below, and as you can see it has two charts, Kendo has many types of charts, bar charts, line charts, pie chart etc., but for this example, I have just used the line and bar chart. 

$(document).ready(function() {
    $("#lineChart").kendoChart({
        dataSource: {
            transport: {
                read: {
                    url: "/Home/MonthlySales",
                    type: "POST",
                    dataType: "json"
                }
            },
            schema: {
                data: "TotalItemsSoldPerMonth"
            },
            sort: {
                field: "MonthAsInt",
                dir: "asc"
            }
        },
        title: {
            text: "Monthly Sales"
        },
        legend: {
            position: "top"
        },
        seriesDefaults: {
            type: "line"
        },
        series: [{
                name: "Apple",
                field: "Apple",
                categoryField: "Month"
        },
            {
                name: "Android",
                field: "Android",
                categoryField: "Month"
            }],
        categoryAxis: {
            labels: {
                rotation: 0
            },
            crosshair: {
                visible: true
            }
        },
        valueAxis: {
            labels: {
                format: "N0"
            },
            majorUnit: 10
        },
        tooltip: {
            visible: true,
            shared: true,
            format: "NO"
        }
    });

    //Column
    $("#columnChart").kendoChart({
        dataSource: {
            transport: {
                read: {
                    url: "/Home/MonthlySales",
                    type: "POST",
                    dataType: "json"
                }
            },
            schema: {
                data: "TotalItemsSoldPerMonth"
            },
            sort: {
                field: "MonthAsInt",
                dir: "asc"
            }
        },
        title: {
            text: "Monthly Sales"
        },
        legend: {
            position: "top"
        },
        seriesDefaults: {
            type: "column"
        },
        series: [{
                name: "Apple",
                field: "Apple",
                categoryField: "Month"
            },
            {
                name: "Android",
                field: "Android",
                categoryField: "Month"
            }],
        categoryAxis: {
            labels: {
                rotation: 0
            },
            crosshair: {
                visible: true
            }
        },
        valueAxis: {
            labels: {
                format: "N0"
            },
            majorUnit: 10
        },
        tooltip: {
            visible: true,
            shared: true,
            format: "NO"
        }
    });
});

Kendo line chart Summary

If everything goes to plan and you have copied the code above, you should have something like the image below.

I hope you found this blog about the Kendo chart using .NET MVC and jQuery helpful.