CODEWITHSUNDEEP
kendo-uikendo-asp.net-mvc
Ravi
Ravi

Reputation: 233

Kendo chart basic binding

I am new to Kendo Chart and I want implement it in my MVC project. I am using Kendo version 2012.3.1315.340.

Controller:

public ActionResult KendoChart()
{
   return View();
}

public ActionResult GetTaskAllz()
{
  dbipathEntities1 objContext = new dbipathEntities1();
  List<mdlChart> objLst = new List<mdlChart>();
  List<tblPurchaseOrder> objLst1 = new List<tblPurchaseOrder>();
  var objMdl1 = (from c in objContext.tblPurchaseOrders select c).Take(100).OrderBy(x => x.POID).ToList();
  objLst1 = objMdl1.ToList<tblPurchaseOrder>();
  for (int i = 0; i < objLst1.Count; i++)
  {
    objLst.Add(new mdlChart { JobNo = objLst1[i].JobID, SupplierID = objLst1[i].SupplierID });
   }
   return Json(objLst1, JsonRequestBehavior.AllowGet);
}

Model:

public class mdlChart
{
    public Nullable<int> JobNo { get; set; }
    public Nullable<int> SupplierID { get; set; }
}

CSHTML:

<link rel="stylesheet" href="@Url.Content("~/Kendo/kendo.common.min.css")" />

<link rel="stylesheet" href="@Url.Content("~/Kendo/kendo.rtl.min.css")" />
<link rel="stylesheet" href="@Url.Content("~/Kendo/kendo.default.min.css")" />
<link rel="stylesheet" href="@Url.Content("~/Kendo/examples-offline.css")" />
 <script src="../../Kendo/Jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Kendo/kendo.web.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Kendo/kendo.aspnetmvc.min.js")" type="text/javascript">   </script>
<script src="@Url.Content("~/Kendo/console.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Kendo/prettify.min.js")" type="text/javascript"></script>
<script src="../../Kendo/kendo.culture.en-GB.min.js" type="text/javascript"></script>
<script type="text/javascript">
//set current to the "en-GB" culture script
kendo.culture("en-GB");
</script>
@using Kendo.Mvc.UI
@(Html.Kendo().Chart<MVCProject.Models.mdlChart>()
.Name("chart")
.Title("Pop In Accounts")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(ds => ds.Read(read => read.Action("GetTaskAllz", "Kendo")))
.Series(series =>
{
    series.Column(model => model.JobNo).Name("Val2");
})
.CategoryAxis(axis => axis
    .Categories(model => model.SupplierID)
    .Labels(labels => labels.Rotation(-90))
 )
 )

But with this I am not getting Chart. It is giving a Javascript error:

Microsoft JScript runtime error: Object doesn't support this property or method

Javascript auto generated Code in which above error is coming : 

 jQuery(
function () {
    debugger;
    jQuery("#chart").kendoChart(
        { "title": { "text": "Pop In Accounts" },
        "legend": { "position": "top" },
       "series": [{ "name": "Val2", "type": "column", "field": "JobNo"}],
      "categoryAxis": [{ "labels": { "rotation": -90 }, "field": "SupplierID"}],
      "dataSource": { "transport": { "prefix": "", "read": { "url": "/Kendo/GetTaskAllz", "type": "POST"} },
        "type": "aspnetmvc-ajax",
        "schema":
       { "model":
       { "fields":
        { "JobNo":
         { "type": "number", "defaultValue": null },
        "SupplierID": { "type": "number", "defaultValue": null }
        }
      }
    }
    }
});
});

Upvotes: 0

Views: 2456

Answers (2)

ravisolanki07
ravisolanki07

Reputation: 647

Solved !! Just replacing all above Scripts with below scripts.

     <script src="../../Kendo/Jquery-1.8.3.min.js" type="text/javascript"></script>
     <link href="../../Kendo/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
     <script src="../../Kendo/kendo.dataviz.min.js" type="text/javascript"></script>

Upvotes: 0

Atanas Korchev
Atanas Korchev

Reputation: 30671

You should include "kendo.all.min.js". The "kendo.web.min.js" doesn't include Kendo UI DataViz widgets. More info can be found in the documentation.

Upvotes: 2

Related Questions