Method1
Below code snippet is only for reference to create Dummy data in MVC.
Controller
Model
Method2
Below code snippet is only for reference to create Dummy data in MVC.
Controller
Model
DOWNLOAD DEMO
<script type="text/javascript"> var dataSource; function GetSelectedDuration() { return $("input:radio[name=Duration]:checked").val(); } function ReBindDataSource() { dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://localhost/Home/GetDummydata", cache: false, data: { Duration: GetSelectedDuration() } } } }); dataSource.fetch(function () { if (dataSource._data.length > 0) { var keys = Object.keys(dataSource._data[0]); ReDrawChart(keys); } }); } function radioClicks() { ReBindDataSource(); } $(document).ready(function () { $("input:radio[name=Duration]").bind("click", radioClicks); $("#mychart").kendoChart({ title: { text: "Dynamic Column" }, legend: { position: "top" }, seriesDefaults: { type: "column" }, valueAxis: { labels: { format: "{0}%" }, line: { visible: true } }, categoryAxis: { field: "Field1", majorGridLines: { visible: false } }, tooltip: { visible: true, format: "{0}%", template: "#= series.field #: #= value #%" } }); ReBindDataSource(); }); // Add series dynamically in chart function ReDrawChart(keys) { var InvalidColumnName = new Array("_events", "uid", "parent", "Field1"); var chart = $("#mychart").data("kendoChart"); var chartOptions = chart.options; var SeriesCount = 0; for (var k = 0; k < keys.length; k++) { var mykey = keys[k]; if ($.inArray(mykey, InvalidColumnName) == -1) { chartOptions.series.push(new Object()); chartOptions.series[SeriesCount].field = mykey; SeriesCount++; } } chart.setDataSource(dataSource); chart.redraw(); } </script> <div> <input checked="checked" name="Duration" type="radio" value="1" />Annully <input name="Duration" type="radio" value="2" />Monthly <input name="Duration" type="radio" value="3" />Weekly <input name="Duration" type="radio" value="4" />Daily </div> <div id="mychart"> </div>
public class HomeController : Controller { [AllowAnonymous] [HttpGet] public JsonResult GetDummydata(int Duration) { List>TestModels> models = GetDummyData(Duration); return Json(models, JsonRequestBehavior.AllowGet); } public List<TestModels> GetDummyData(int Duration) { List<TestModels> models = new List<TestModels>(); switch (Duration) { case (int)DurationType.Annully: TestModels testModel = new TestModels(); testModel.Field1 = "Annully"; testModel.Field2 = 20; testModel.Field3 = 50; testModel.Field4 = 70; models.Add(testModel); break; case (int)DurationType.Monthly: TestModels testModel2 = new TestModels(); testModel2.Field1 = "Monthly"; testModel2.Field2 = 50; testModel2.Field3 = 50; testModel2.Field4 = 50; models.Add(testModel2); break; case (int)DurationType.Weekly: TestModels testModel3 = new TestModels(); testModel3.Field1 = "Weekly"; testModel3.Field2 = 70; testModel3.Field3 = 10; testModel3.Field4 = 90; models.Add(testModel3); break; case (int)DurationType.Daily: TestModels testModel4 = new TestModels(); testModel4.Field1 = "Daily"; testModel4.Field2 = 11; testModel4.Field3 = 111; testModel4.Field4 = 1111; models.Add(testModel4); break; } return models; } }
[Serializable] public class TestModels { public string Field1 { get; set; } public int Field2 { get; set; } public int Field3 { get; set; } public int Field4 { get; set; } }
Method2
<script type="text/javascript"> var dataSource; function radioClicks() { getDataSource(); } function GetSelectedDuration() { return $("input:radio[name=Duration]:checked").val(); } function getDataSource() { dataSource = new kendo.data.DataSource({ transport: { read: { url: "http://localhost:2116/Home/GetDummydata2", cache: false, data: { Duration: GetSelectedDuration() } } } }); dataSource.fetch(function () { GenerateChartFromData(); }); } function GenerateChartFromData() { var chartSeries = []; var keys = Object.keys(dataSource._data[0]); var InvalidColumnName = new Array("_events", "uid", "parent", "Price"); for (var k = 0; k < keys.length; k++) { var mykey = keys[k]; if ($.inArray(mykey, InvalidColumnName) == -1) { chartSeries.push({ xField: "Price", yField: mykey, name: mykey.replace("_", ""), style: "smooth" }); } } var titletxt = "Title text comes here - "; switch (parseInt(GetSelectedDuration())) { case 1: titletxt += "on " + chartSeries[0].name; break; case 2: titletxt += "with multiple series"; break; } $("#chart").kendoChart({ title: { text: titletxt }, legend: { position: "right" }, dataSource: dataSource, seriesDefaults: { type: "scatterLine" }, series: chartSeries, xAxis: { min: 19, max: 46, labels: { format: "{0}" } }, yAxis: { // min: 80, labels: { format: "{0}" }, title: { text: "testTitle" } } }); } $(document).ready(function () { $("input:radio[name=Duration]").bind("click", radioClicks); getDataSource(); }); </script> <div> <input checked="checked" name="Duration" type="radio" value="1" />Single series <input name="Duration" type="radio" value="2" />multiple series </div> <div id="chart"> </div>
public JsonResult GetDummydata2(int Duration) { switch (Duration) { case 1: List<testmodels_1> lst = new List<testmodels_1>(); for (int i = 0; i < 20; i++) { int dtValue = 0; if (i < 10) { dtValue = -478; } else if (i < 12) { dtValue = -78; } else if (i < 14) { dtValue = -28; } else if (i < 16) { dtValue = 22; } else if (i < 18) { dtValue = 72; } else { dtValue = 122; } lst.Add(new TestModels_1() { Price = 20 + i, _07072014 = dtValue }); lst.Add(new TestModels_1() { Price = 20.5M + i, _07072014 = dtValue }); } return Json(lst, JsonRequestBehavior.AllowGet); break; case 2: List<testmodels_2> lst1 = new List<testmodels_2>(); for (int j = 0; j < 20; j++) { int dtValue1 = 0; if (j < 10) { dtValue1 = -478; } else if (j < 12) { dtValue1 = -78; } else if (j < 14) { dtValue1 = -28; } else if (j < 16) { dtValue1 = 22; } else if (j < 18) { dtValue1 = 72; } else { dtValue1 = 122; } lst1.Add(new TestModels_2() { Price = 20 + j, _07072014 = dtValue1, _08072014 = dtValue1 - 20, _08082014 = dtValue1 - 30 }); lst1.Add(new TestModels_2() { Price = 20.5M + j, _07072014 = dtValue1, _08072014 = dtValue1 - 70, _08082014 = dtValue1 - 80 }); } return Json(lst1, JsonRequestBehavior.AllowGet); break; } return Json(new { IsError = true }, JsonRequestBehavior.AllowGet); } public DateTime? GetDateTimeFromString(string strDateTime) { if (!string.IsNullOrEmpty(strDateTime.Trim())) { string pattern = "dd/MM/yyy"; DateTime parsedDate; if (DateTime.TryParseExact(strDateTime.Trim(), pattern, null, System.Globalization.DateTimeStyles.None, out parsedDate)) { return parsedDate; } } return null; }
[Serializable] public class TestModels_1 { public decimal Price { get; set; } public decimal _07072014 { get; set; } } public class TestModels_2 { public decimal Price { get; set; } public decimal _07072014 { get; set; } public decimal _08072014 { get; set; } public decimal _08082014 { get; set; } }
DOWNLOAD DEMO