Working With Telerik Charts In ASP.NET MVC

In my previous articles, I explained the following things in MVC:

1. Creating And Calling A Web API From A .NET Client In ASP.NET Web API 2
2. Creating Cascading DropDownList In MVC Using Entity Framework And ADO.NET 
3. Displaying Image In WebGrid And Changing Background Color Of Webgrid Row On Mouse Hover
   
4. Using DHTMLX Scheduler in MVC
   
5. ASP.NET MVC Drag and Drop Multiple Image Upload Using DropZone
   
6. Working With Telerik Grid In MVC
   
7. How to Upload Image and Save Image in Project Folder in MVC

In this tutorial, I will explain how to work with the different Telerik Charts.

For this, I have created an MVC project. Now, I will add the Telerik Extension for MVC from NuGet Package.



Now, it will add the following CSS and DLL to the Project.



Here is the DLL.



Now, create the following Controller in the Project.

public ActionResult chat()
{
    List<Sales> li = new List<Sales>();
    li.Add(new Sales { Year = 2004, production = 8000 });
    li.Add(new Sales { Year = 2005, production = 6000 });
    li.Add(new Sales { Year = 2006, production = 10000 });
    li.Add(new Sales { Year = 2008, production = 8000 });
    li.Add(new Sales { Year = 2010, production = 12000 });
    return View(li);
}

Here is my Sale Model.

using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Tellerik_grid.Models
{
    public class Sales
    {
        public int Year { get; set; }
        public int production { get; set; }
    }
}

Now, I will generate a Line Chart in the View, using:

@model IEnumerable<Tellerik_grid.Models.Sales>
           @using Telerik.Web.Mvc.UI;
@using System.Collections;

@{
    ViewBag.Title = "chat";
}

<link href="~/fonts/ss1.css" rel="stylesheet" />
<h2>chart</h2>

@{
    ArrayList alyear1 = new ArrayList();
    ArrayList alprod1 = new ArrayList();


    foreach (var x in Model)
    {

        alyear1.Add(Convert.ToInt32(x.Year));
        alprod1.Add(Convert.ToInt32(x.production));
    }

    Html.Telerik().Chart()
        .Name("mychart")
        .Title("Production Chart")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom))
             .Series(series =>
             {
                 series.Line(alyear1).Name("Years");
                 series.Line(alprod1).Name("Total production");
             })
             .ChartArea(area => area
        .Background("#00FFFF")

    )

        .CategoryAxis(axis => axis
            .Categories(alyear1)
       )
        .Render();

        @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Add("telerik.hay.min.css").Combined(true).Compress(true)))
        @(Html.Telerik().ScriptRegistrar())

}

Now, it will form the graph, shown below:


Now, the code is given below to generate Bar Graph:

@model IEnumerable<Tellerik_grid.Models.Sales>
 @using Telerik.Web.Mvc.UI;
@using System.Collections;

@{
    ViewBag.Title = "chat";
}

<link href="~/fonts/ss1.css" rel="stylesheet" />
<h2>chart</h2>
@{
        ArrayList alyear = new ArrayList();
        ArrayList alprod = new ArrayList();


        foreach(var x in Model)
        {

            alyear.Add(Convert.ToInt32(x.Year));
            alprod.Add(Convert.ToInt32(x.production));
        }

        Html.Telerik().Chart()
            .Name("mychart")
            .Title("Production Chart")


             .Tooltip(true)
            .Legend(legend => legend
                .Position(ChartLegendPosition.Bottom))
                 .Series(series =>
                 {
                     series.Bar(alyear).Name("Years");
                     series.Bar(alprod).Name("Total production");
                 })
            .CategoryAxis(axis => axis
                .Categories(alyear)
           )
            .Render();

             @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Add("telerik.hay.min.css").Combined(true).Compress(true)))
        @(Html.Telerik().ScriptRegistrar())

    }

Similarly, if you want to do an Area Chart, change the series to area for the following graph.

@{
    ArrayList alyear1 = new ArrayList();
    ArrayList alprod1 = new ArrayList();


    foreach (var x in Model)
    {

        alyear1.Add(Convert.ToInt32(x.Year));
        alprod1.Add(Convert.ToInt32(x.production));
    }

    Html.Telerik().Chart()
        .Name("mychart")
        .Title("Production Chart")
        .Legend(legend => legend
            .Position(ChartLegendPosition.Bottom))
             .Series(series =>
             {
                 series.Area(alyear1).Name("Years");
                 series.Area(alprod1).Name("Total production");
             })
             .Tooltip(true)




        .CategoryAxis(axis => axis
            .Categories(alyear1)
       )
        .Render();

        @(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.windows7.css").Add("telerik.hay.min.css").Combined(true).Compress(true)))
        @(Html.Telerik().ScriptRegistrar())

}

Thus, in this way, we can work with various Types of Telerik chat controls. I hope you liked this tutorial.