Looking for an Expert Development Team? Take two weeks Trial! Try Now
×Free 2 Week Trial
How to create and bind Kendo Stack100 chart in Asp.net development using Remote data
Have you ever thought about learning the best way to create and bind Kendo Stack100 chart with remote data in MVC? A leading Asp.net Development Company India is here to let you know about the same. Through this article you will find great tips and steps that will help you in developing and binding Kendo Stack100 chart.
Introduction
This article explain how to create and bind Stack100 chart with remote data in MVC. Simply I have created Stack100 Chart in MVC view and bind with remote data.
Code Behind:
Follow the following steps.
Step 1:
Create a simple MVC application. Currently I am going to create MVC application using Visual Studio 2015.
Add above bundle configuration in _Lalyout.cshtml file as shown below.
title tag - @ViewBag.Title - My ASP.NET Application
@Styles.Render("~/Content/css") @Styles.Render("~/Content/kendo/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/kendo") @Scripts.Render("~/bundles/bootstrap")
@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
@Html.ActionLink("Home", "Index", "Home")
@Html.ActionLink("About", "About", "Home")
@Html.ActionLink("Contact", "Contact", "Home")
@Html.Partial("_LoginPartial")
@RenderBody()
@RenderSection("scripts", required: false)
Now all configuration is done which is required to work with Kendo UI MVC.
Step 7:
Create Stack100Model.cs class under Models folder. This class is helpful to store and display data in Stack100 chart.
public class Stack100Model
{
public int Year { get; set; }
public int GoldMedals { get; set; }
public int SilverMedals { get; set; }
public int BronzeMedals { get; set; }
}
Step 8:
Create a ChartController in Controller folder and add following code on it.
public class ChartController: Controller {
public ActionResult Stack100() {
return View();
}
public ActionResult Read() {
List < Stack100Model>
model = GetList();
return Json(model);
}
public List < Stack100Model>
GetList() {
return new List < Stack100Model>
() {
new Stack100Model {
Year = 2001, GoldMedals = 10, SilverMedals = 8, BronzeMedals = 7
},
new Stack100Model {
Year = 2002, GoldMedals = 8, SilverMedals = 9, BronzeMedals = 5
},
new Stack100Model {
Year = 2003, GoldMedals = 5, SilverMedals = 7, BronzeMedals = 3
},
new Stack100Model {
Year = 2004, GoldMedals = 7, SilverMedals = 7, BronzeMedals = 6
},
new Stack100Model {
Year = 2005, GoldMedals = 8, SilverMedals = 2, BronzeMedals = 8
},
new Stack100Model {
Year = 2006, GoldMedals = 3, SilverMedals = 10, BronzeMedals = 2
},
new Stack100Model {
Year = 2007, GoldMedals = 5, SilverMedals = 5, BronzeMedals = 8
},
new Stack100Model {
Year = 2008, GoldMedals = 4, SilverMedals = 6, BronzeMedals = 7
},
new Stack100Model {
Year = 2009, GoldMedals = 6, SilverMedals = 4, BronzeMedals = 3
},
new Stack100Model {
Year = 2010, GoldMedals = 8, SilverMedals = 2, BronzeMedals = 8
},
};
}
}
Step 9:
Create a Chart folder under View folder and Create a Stack100.cshtml view. Put below code on that.