how to add series dynamically
Good night, could you help me to make the series load dynamically from the datasource, it only loads me the last data. I attach the code.
<div class="control-section">
<div id="container" align='center'>
<ejs-chart id="container" title="Cortes por semana">
<e-chart-tooltipsettings enable="true">
</e-chart-tooltipsettings>
<e-chart-primaryxaxis valueType="Category" interval="1">
<e-linestyle width="0"></e-linestyle>
<e-majorgridlines width="0"></e-majorgridlines>
<e-minorgridlines width="0"></e-minorgridlines>
<e-majorticklines width="0"></e-majorticklines>
<e-minorticklines width="0"></e-minorticklines>
</e-chart-primaryxaxis>
<e-chart-primaryyaxis title="Ganancias" interval="2000" minimum="0" maximum="20000" labelFormat="${value}">
<e-linestyle width="0"></e-linestyle>
<e-majorgridlines width="1"></e-majorgridlines>
<e-minorgridlines width="1"></e-minorgridlines>
<e-majorticklines width="0"></e-majorticklines>
<e-minorticklines width="0"></e-minorticklines>
</e-chart-primaryyaxis>
<e-chart-chartarea>
<e-chartarea-border width="0"></e-chartarea-border>
</e-chart-chartarea>
<e-series-collection>
@foreach (var item in ViewBag.dataSource)
{
<e-series dataSource="ViewBag.dataSource" name="@item.nombre" xName="x" width="2" yName="y" type="Line">
<e-series-marker visible="true"></e-series-marker>
</e-series>
}
@*<e-series dataSource="ViewBag.dataSource" name="Jhon" xName="x" width="2" yName="y" type="Line">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Peter" xName="x" width="2" yName="y1" type="Line">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Steve" xName="x" width="2" yName="y2" type="Line">
<e-series-marker visible="true"></e-series-marker>
</e-series>
<e-series dataSource="ViewBag.dataSource" name="Charle" xName="x" width="2" yName="y3" type="Line">
<e-series-marker visible="true"></e-series-marker>
</e-series>*@
</e-series-collection>
</ejs-chart>
</div>
</div>
// Controller
public IActionResult Index()
{
List<StackedChartData> chartData = new List<StackedChartData>
{
new StackedChartData { x = "1" , y = 9000, y1 = 4000 , y2 = 7000, y3 = 1200, nombre="erik"},
new StackedChartData { x = "2", y = 8000, y1 = 9000, y2 = 1100, y3 = 700, nombre="juan"},
new StackedChartData { x = "3",y = 5000, y1 = 8000, y2 = 1200, y3 = 500, nombre="beto" },
new StackedChartData { x = "4",y = 7000, y1 = 30, y2 = 6000, y3 = 1800, nombre="carlos" },
new StackedChartData { x = "5", y = 3000, y1 = 8000, y2 = 8000, y3 = 3000 , nombre="luis"},
new StackedChartData { x = "6", y = 1000, y1 = 4000, y2 = 3000, y3 = 2700, nombre="humberto"},
new StackedChartData { x = "7",y = 1000, y1 = 3000, y2 = 7000, y3 = 400, nombre="jose" },
new StackedChartData { x = "8", y = 5500, y1 = 9500, y2 = 5500, y3 = 7500, nombre="martin"},
new StackedChartData { x = "9", y = 2000, y1 = 5000, y2 = 4000, y3 = 6500 , nombre="cesar"},
new StackedChartData { x = "10", y = 4000, y1 = 2000, y2 = 8000, y3 = 9500, nombre="agustin" },
new StackedChartData { x = "11", y = 4500, y1 = 1500, y2 = 4500, y3 = 1950, nombre="manuel" },
new StackedChartData { x = "12", y = 7500, y1 = 4500, y2 = 6500, y3 = 1150 , nombre="cristian"}
};
ViewBag.dataSource = chartData;
return View();
}
public class StackedChartData
{
public string x;
public double y;
public double y1;
public double y2;
public double y3;
public string nombre;
}
SIGN IN To post a reply.
3 Replies
Hi Erik,
We have ensured your reported scenario with attached snippet. Since, same point for assigned for each series, it is rendered one over another. We request you to pass the data for series as per below snippet. We have attached modified sample for your reference.
|
Index.cshtml
<ejs-chart id="container" title="Cortes por semana">
<e-series-collection>
@foreach (var item in ViewBag.seriesCollection)
{
<e-series dataSource="@item.Data" name="@item.nombre" xName="x" yName="y" type="Line">
<e-series-marker visible="true"></e-series-marker>
</e-series>
}
</e-series-collection>
</ejs-chart>
HomeController.cs
List<SeriesData> series = new List<SeriesData>();
series.Add(new SeriesData
{
nombre = "erik",
Data = new List<StackedChartData>{
new StackedChartData { x = "1", y = 9000 },
new StackedChartData { x = "2", y = 8000 },
new StackedChartData { x = "3", y = 5000 },
new StackedChartData { x = "4", y = 7000 },
}
});
//…
ViewBag.seriesCollection = series; |
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DynamicSeries-210788284.zip
Kindly revert us if you have any concerns.
Regards,
Durga G
SIGN IN To post a reply.
