Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
147733 | Sep 22,2019 07:05 PM UTC | Oct 1,2019 07:15 AM UTC | ASP.NET Core - EJ 2 | 8 |
![]() |
Tags: Charts |
[Index.cshtml]:
<div class="row" style="margin-top:10px">
<div class="col-md-8">
<ejs-chart id="container" title="Sales History of Product X">
<e-series-collection>
<e-series dataSource="ViewBag.dataSource1" xName="xvalue" yName="yValue1" fill="blue" visible="true" type="StackingColumn">
<e-series-animation enable="false"></e-series-animation>
</e-series>
<e-series dataSource="ViewBag.dataSource1" xName="xvalue" yName="yValue2" fill="red" visible="true" type="StackingColumn">
<e-series-animation enable="false"></e-series-animation>
</e-series>
</e-series-collection>
<e-chart-tooltipsettings enable="true"></e-chart-tooltipsettings>
<e-chart-legendsettings visible="true"></e-chart-legendsettings>
</ejs-chart>
</div>
</div>
<script>
setInterval(refreshChart, 3000);
function refreshChart() {
var chart = document.getElementById("container").ej2_instances[0];
var i = 10;
var obj = { value: i };
$.ajax({
type: "POST",
url: "/Home/GetChartData",
data: obj,
success: function (data) {
chart.series[0].dataSource = data;
chart.series[0].xName = "x";
chart.series[0].yName = "y";
chart.series[0].fill = "green";
chart.series[1].dataSource = data;
chart.series[1].xName = "x";
chart.series[1].yName = "y1";
chart.series[1].fill = "orange";
chart.refresh();
},
error: function (args) {
alert('error');
}
});
}
</script>
[HomeController.cs]:
[HttpPost]
public JsonResult GetChartData(string value)
{
Random r = new Random();
List<ExportChartData> data2 = new List<ExportChartData>();
for (int i = 0; i < Int32.Parse(value); i++)
data2.Add(new ExportChartData(i, r.Next(10, 100), r.Next(50, 100)));
ViewBag.dataSource = data2;
return Json(data2);
} |
[Index.cshtml]:
@{
var count = Enumerable.Count(ViewBag.Items);
}
<ejs-chart id="container" title="Sales History of Product X">
<e-series-collection>
@for (var i = 0; i < count; i++)
{
<e-series dataSource="ViewBag.Items[i]" xName="xValue" yName="yValue1" visible="true" type="StackingColumn">
<e-series-animation enable="false"></e-series-animation>
</e-series>
}
</e-series-collection>
<e-chart-tooltipsettings enable="true"></e-chart-tooltipsettings>
<e-chart-legendsettings visible="true"></e-chart-legendsettings>
</ejs-chart>
[HomeController.cs]:
public IActionResult Index()
{
List<List<DoubleAxisData>> data = new List<List<DoubleAxisData>>();
List<DoubleAxisData> chartData = new List<DoubleAxisData>
{
new DoubleAxisData { xValue = 16, yValue1 = 12, yValue2= 7},
new DoubleAxisData { xValue = 17, yValue1 = 14, yValue2 = 7 },
};
List<DoubleAxisData> chartData1 = new List<DoubleAxisData>
{
new DoubleAxisData { xValue = 16, yValue1 = 2, yValue2= 7},
new DoubleAxisData { xValue = 17, yValue1 = 14, yValue2 = 7 },
};
data.Add(chartData);
data.Add(chartData1);
ViewBag.Items = data;
return View();
}
public class DoubleAxisData
{
public double xValue;
public double yValue1;
public double yValue2;
} |
@{
ViewData["Title"] = "Home Page";
var carriers = new Dictionary<string, List<Dynamic_Chart.Models.Data>>();
carriers.Add("Series 1", Dynamic_Chart.Models.Data.GetAllData());
carriers.Add("Series 2", Dynamic_Chart.Models.Data.GetAllData1());
carriers.Add("Series 3", Dynamic_Chart.Models.Data.GetAllData2());
}
<ejs-chart id="container" title="Sales History of Product X">
<e-series-collection>
@foreach (KeyValuePair<string, List<Dynamic_Chart.Models.Data>> carrier in carriers)
{
xName="Month"
yName="Price"
dataSource="carrier.Value"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn" fill="@carrier.Value[carriers.Count].fill">
</e-series>
}
</e-series-collection>
<e-chart-tooltipsettings enable="true"></e-chart-tooltipsettings>
<e-chart-legendsettings visible="true"></e-chart-legendsettings>
</ejs-chart> |
public class Data
{
public static List<Data> data = new List<Data>();
//some code here
} |
@{
var count = Enumerable.Count(ViewBag.dataSource1);
}
@for (int x = 0; x < count; x++)
{
string theYName = ("y" + x).ToString();
<e-series dataSource="ViewBag.dataSource1[x]" name="@Model.Result.Records[0].LineItems[x].Category.Label"
selectionStyle="series"
xName="month"
width="2"
opacity="1"
yName="@theYName"
yAxisName="powerAxis"
type="@Syncfusion.EJ2.Charts.ChartSeriesType.StackingColumn"
pointColorMapping="color">
<e-series-animation enable="false"></e-series-animation>
</e-series>
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.