Note that there are some explanatory texts on larger screens.

plurals
  1. POKendo chart basic binding
    primarykey
    data
    text
    <p>I am new to Kendo Chart and I want implement it in my MVC project. I am using Kendo version <code>2012.3.1315.340</code>.</p> <p><strong>Controller:</strong></p> <pre><code>public ActionResult KendoChart() { return View(); } public ActionResult GetTaskAllz() { dbipathEntities1 objContext = new dbipathEntities1(); List&lt;mdlChart&gt; objLst = new List&lt;mdlChart&gt;(); List&lt;tblPurchaseOrder&gt; objLst1 = new List&lt;tblPurchaseOrder&gt;(); var objMdl1 = (from c in objContext.tblPurchaseOrders select c).Take(100).OrderBy(x =&gt; x.POID).ToList(); objLst1 = objMdl1.ToList&lt;tblPurchaseOrder&gt;(); for (int i = 0; i &lt; objLst1.Count; i++) { objLst.Add(new mdlChart { JobNo = objLst1[i].JobID, SupplierID = objLst1[i].SupplierID }); } return Json(objLst1, JsonRequestBehavior.AllowGet); } </code></pre> <p><strong>Model:</strong></p> <pre><code>public class mdlChart { public Nullable&lt;int&gt; JobNo { get; set; } public Nullable&lt;int&gt; SupplierID { get; set; } } </code></pre> <p><strong>CSHTML:</strong></p> <pre><code>&lt;link rel="stylesheet" href="@Url.Content("~/Kendo/kendo.common.min.css")" /&gt; &lt;link rel="stylesheet" href="@Url.Content("~/Kendo/kendo.rtl.min.css")" /&gt; &lt;link rel="stylesheet" href="@Url.Content("~/Kendo/kendo.default.min.css")" /&gt; &lt;link rel="stylesheet" href="@Url.Content("~/Kendo/examples-offline.css")" /&gt; &lt;script src="../../Kendo/Jquery-1.8.3.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Kendo/kendo.web.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Kendo/kendo.aspnetmvc.min.js")" type="text/javascript"&gt; &lt;/script&gt; &lt;script src="@Url.Content("~/Kendo/console.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="@Url.Content("~/Kendo/prettify.min.js")" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="../../Kendo/kendo.culture.en-GB.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //set current to the "en-GB" culture script kendo.culture("en-GB"); &lt;/script&gt; @using Kendo.Mvc.UI @(Html.Kendo().Chart&lt;MVCProject.Models.mdlChart&gt;() .Name("chart") .Title("Pop In Accounts") .Legend(legend =&gt; legend .Position(ChartLegendPosition.Top) ) .DataSource(ds =&gt; ds.Read(read =&gt; read.Action("GetTaskAllz", "Kendo"))) .Series(series =&gt; { series.Column(model =&gt; model.JobNo).Name("Val2"); }) .CategoryAxis(axis =&gt; axis .Categories(model =&gt; model.SupplierID) .Labels(labels =&gt; labels.Rotation(-90)) ) ) </code></pre> <p>But with this I am not getting <code>Chart</code>. It is giving a Javascript error:</p> <pre><code>Microsoft JScript runtime error: Object doesn't support this property or method </code></pre> <p>Javascript auto generated Code in which above error is coming : </p> <pre><code> 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 } } } } } }); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload