Post
Ask Question

Working With Kendo UI Chart Using Web API 2 and EF5

This article shows how to use Kendo UI Charts using WEB API 2 and Entity Framework 5.

First let us explain the basic usage of Kendo UI Charts.

The very basic usage of this Kendo UI Charts involves only the design and a script.

Here is my simple Kendo UI chart HTML design.

  1. <!DOCTYPE html>  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />  
  6.         <link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />  
  7.         <script src="Scripts/kendo/2014.2.716/jquery.min.js"></script>  
  8.         <script src="Scripts/kendo/2014.2.716/kendo.all.min.js"></script>  
  9.         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">  
  10.             <title> Kendo Chart</title>  
  11.         </head>  
  12.         <body>  
  13.             <h3 style="margin-left:50px;color:blueviolet"> Kendo Chart </h3>  
  14.             <br />  
  15.             <div id="Chart" style="width:1000px;height:300px"></div>  
  16.         </body>  
  17.     </html>  
The following is the JavaScript:
  1. function createChart() {  
  2.     $("#Chart").kendoChart({  
  3.         theme: "default",  
  4.         title: {  
  5.             Text: "Exam Score"  
  6.         },  
  7.         legned: {  
  8.             position: "bottom"  
  9.         },  
  10.         chartArea: {  
  11.             background: ""  
  12.         },  
  13.         seriesDefaults: {  
  14.             type: "column"  
  15.         },  
  16.         series: [{  
  17.             name: "Coimbatore College",  
  18.             data: [90, 88, 40, 80]  
  19.         }, {  
  20.             name: "World",  
  21.             data: [80, 88, 90, 30]  
  22.         }],  
  23.         valueAxis:  
  24.         {  
  25.             labels:  
  26.             {  
  27.                 format: "{0}%"  
  28.             },  
  29.             plotBands: [{  
  30.                 from: 100,  
  31.                 to: 120,  
  32.                 color: "gray"  
  33.             }]  
  34.         },  
  35.         categoryAxis: {  
  36.             categories: [  
  37.             new Date("2011/4/28"),  
  38.             new Date("2011/5/28"),  
  39.             new Date("2011/6/28"),  
  40.             new Date("2011/7/28"),  
  41.             ],  
  42.             baseUnit: "months"  
  43.         },  
  44.         tootip: {  
  45.             visibile: true,  
  46.             format: "{0}/100"  
  47.         }  
  48.     });  
  49. }  
  50.   
  51. $(document).ready(function() {  
  52.     setTimeout(function() {  
  53.         createChart();  
  54.     }, 400)  
  55. })  
Learn more about Kendo Chart

In the browser the view is as shown in Figure 1.


Figure 1

Now, let us explain remote binding in Kendo UI MVVM Chart.

Create a WEB API project as shown in Figure 2 & Figure 3.


Figure 2


Figure 3

Your project structure will be as shown in Figure 4.


Figure 4

Create a new class under the Model folder and name it Expense.cs.

Write the following code in the Expense class.
  1. public class Expense  
  2. {  
  3.     [Key]  
  4.     [DatabaseGenerated(DatabaseGeneratedOption.Identity)]  
  5.   
  6.     public int ID {  
  7.         get;  
  8.         set;  
  9.     }  
  10.     [Required]  
  11.   
  12.     public string Month {  
  13.         get;  
  14.         set;  
  15.     }  
  16.     [Required]  
  17.   
  18.     public int MonthlyExpense {  
  19.         get;  
  20.         set;  
  21.     }  
  22. }  
Here we will use the Entity Framework Code First technique.

So, create one more class under the Model folder and name it ExpenseContext.cs.

Write the following code in the ExpenseContext class.
  1. public class ExpenseContext:DbContext  
  2. {  
  3.    public ExpenseContext() : base("name:TestConnection") { }  
  4.    public DbSet<Expense> MonthlyExpense { get; set; }  
  5. }  
Modify the connection string in the web.config file as in the following:
  1. <connectionStrings>  
  2.    <add name="TestConnection" connectionString="Data Source=server name;Initial Catalog=Database Name;Integrated Security=True" providerN   ame="System.Data.SqlClient" />  
  3. </connectionStrings>  
Now we need to scaffold. Before doing the scaffolding build the application once.

Add the controller class as shown in Figure 5 & Figure 6.


Figure 5


Figure 6

Now you will get HTTP GET, POST, PUT and DELETE predefined REST full services code in the ExpensesController class.

Now check that the HTTP POST service is using the POSTMAN tool as shown in Figure 7.


Figure 7

Yes, the service is working.

Now it's time to do the design.

Create a HTML page and write the following code.
  1. <!DOCTYPE html>  
  2. <html  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.     <title></title>  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css">  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.rtl.min.css">  
  8.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css">  
  9.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css">  
  10.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.default.min.css">  
  11.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.mobile.all.min.css">  
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>  
  14.     </head>  
  15.     <body>  
  16.         <div id="example">  
  17.             <div class="demo-section k-content">  
  18.                 <div>  
  19.                     <h4>Kendo Chart</h4>  
  20.                     <div data-role="chart"  
  21.   
  22.                         data-legend="{position: 'bottom'}"  
  23.                         data-series-defaults="{ type: 'column' }"  
  24.                         data-series="[  
  25.                         { field: 'MonthlyExpense', name: 'MonthlyExpense' },  
  26.   
  27.                         ]"  
  28.                            data-bind="visible: isVisible,  
  29.                            events: { seriesHover: onSeriesHover },  
  30.                            source: Expense"  
  31.                            style="height: 250px;"></div>  
  32.                 </div>  
  33.             <div>  
  34.             <label id="lbl_msg"></label>  
  35.         </div>  
  36.         </div>  
  37.         </div>  
  38.     </body>  
  39. </html>  
The MVVM script.
  1. < script >  
  2. function createChart() {  
  3.     var viewModel = kendo.observable({  
  4.         isVisible: true,  
  5.         onSeriesHover: function(e) {  
  6.             lbl_msg.textContent = e.series.name + e.value;  
  7.         },  
  8.         Expense: new kendo.data.DataSource({  
  9.             transport: {  
  10.                 read: {  
  11.                     url: "http://localhost:54249/api/Expenses/",  
  12.                     dataType: "json"  
  13.                 }  
  14.             },  
  15.             sort: {  
  16.                 field: "ID",  
  17.                 dir: "asc"  
  18.             }  
  19.         })  
  20.     });  
  21.     kendo.bind($("#example"), viewModel);  
  22. }  
  23. $(document).ready(createChart).bind("kendo:skinChange", createChart);  
  24. < /script>  
The result in the browser.


Figure 8

That's it, enjoy coding.


Similar Articles