We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Chart Dynamic Series

hi,

can anyone give me a proper example or at least link me to anything that might help to create the proper structure for the Chart when the Series are unknown (Dynamic).

I have the following situation:

Multiple people have data for each month. The number of people is read from a database and therefore can change at any time.

When defining the chart as follows in the view:









I get the necessary information. The problem is, this is not dynamic and I don't really know how may series there will be or the names of the Series that are to be shown on the chart.

in MVC we would have something like this in the view:
@(Html.EJ().Chart("chartContainer")

      // ...

     //Adding Multiple Series
     .Series(sr =>
     {
          // Add first series
         sr.Type(SeriesType.Column).Points(pt=>{
             pt.X("USA").Y(50).Add();
             //...
         }).Add();
          // Add second series
         sr.Type(SeriesType.Column).Points(pt => { 
             pt.X("USA").Y(70).Add(); 
             //...
         }).Add();
          // Add third series
         sr.Type(SeriesType.Column).Points(pt => { 
             pt.X("USA").Y(45).Add();
             //...
         }).Add();
     })
 )

How would we achieve this in ASP.NET Core?


5 Replies

DD Dharanidharan Dharmasivam Syncfusion Team January 18, 2017 09:04 AM UTC

Hi Vlatko, 

Thanks for using Syncfusion product. 

Your requirement can be achieved as a workaround using load event of the chart. We have prepared a sample with respect to your requirement, in this we have randomly generated series count, data and bind the data to the series in the load event. Before assigning data the series, we need to initialize the series with empty array. Based on the series count(serCount), the mentioned operation is iterated. You can change this with respect to your scenario. Kindly find the code snippet below, 

ASP.NET Core: 

<ej-chart id="container" can-resize="true" load="chartload"> 
</ej-chart> 
 
function chartload(sender) { 
        //Getting series count randomly 
        var serCount = Math.floor((Math.random() * 3) + 1); 
        sender.model.series = []; 
        var data = GetData(); 
        for (var l = 0; l < serCount; l++) { 
            sender.model.series.push({ "dataSource": data[l], "xName": "XValue", "yName": "YValue" }); 
        }       
    } 

Screenshot: 
 

For your reference, we have attached the sample. Kindly find the sample from below location. 
  
Thanks, 
Dharani. 




VL Vlatko January 18, 2017 09:07 AM UTC

Thank you for the information. I had already achieved the desired result using pure JavaScript.

However I believe this gives less control in terms of testing and debugging and I expected a more native control way to achieve this.


DD Dharanidharan Dharmasivam Syncfusion Team January 19, 2017 11:39 AM UTC

Hi Vlatko, 
 
Thanks for your update. 
 
We have prepared sample with respect to your requirement. In the previous update we have binded the data in the script, but now we have binded the data in the controller page, also you can able to access all the chart properties in the controller itself. Then we have passed the chart model to the view and rendered the chart. In the sample we have used serCount as 2 and the number of series iteration depends upon the value of serCount. You can change this with respect to your requirement. Kindly find the code snippet below. 
 
ASP.NET Core: 
 
[CS] 
   //Assign the length of the series 
  int serCount = 2; 
  ChartProperties chartModel = new ChartProperties(); 
  InitializeChart(chartModel, serCount); 
   
//Passing chart properties in the ViewData 
ViewData["ChartModel"] = chartModel;  
return View(); 
 
private void InitializeChart(ChartProperties chartModel, int serCount) 
        { 
           //Iterating depends upon the series value. 
           for (int i = 0; i < serCount; i++) 
            { 
                Series series = new Series(); 
                series.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.Column; 
                Points pt = new Points(); 
                Points pt2 = new Points(); 
                pt.X = "a"; 
                pt.Y = 50 + (i*20); 
                pt2.X = "b"; 
                pt2.Y = 80 + (i * 20); 
                series.Points.Add(pt); 
                series.Points.Add(pt2); 
                chartModel.Series.Add(series); 
            } 
        } 
 
 
[CSHTML] 
 
@{Html.EJ().Chart("container",   (Syncfusion.JavaScript.DataVisualization.Models.ChartProperties)ViewData["ChartModel"]).Render(); } 
 
 
Screenshot: 
 

For your reference we have attached the sample. Kindly find the sample from below location. 

Thanks, 
Dharani. 



JF john friesen replied to Dharanidharan Dharmasivam November 1, 2017 03:45 PM UTC

Hi Vlatko, 
 
Thanks for your update. 
 
We have prepared sample with respect to your requirement. In the previous update we have binded the data in the script, but now we have binded the data in the controller page, also you can able to access all the chart properties in the controller itself. Then we have passed the chart model to the view and rendered the chart. In the sample we have used serCount as 2 and the number of series iteration depends upon the value of serCount. You can change this with respect to your requirement. Kindly find the code snippet below. 
 
ASP.NET Core: 
 
[CS] 
   //Assign the length of the series 
  int serCount = 2; 
  ChartProperties chartModel = new ChartProperties(); 
  InitializeChart(chartModel, serCount); 
   
//Passing chart properties in the ViewData 
ViewData["ChartModel"] = chartModel;  
return View(); 
 
private void InitializeChart(ChartProperties chartModel, int serCount) 
        { 
           //Iterating depends upon the series value. 
           for (int i = 0; i < serCount; i++) 
            { 
                Series series = new Series(); 
                series.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.Column; 
                Points pt = new Points(); 
                Points pt2 = new Points(); 
                pt.X = "a"; 
                pt.Y = 50 + (i*20); 
                pt2.X = "b"; 
                pt2.Y = 80 + (i * 20); 
                series.Points.Add(pt); 
                series.Points.Add(pt2); 
                chartModel.Series.Add(series); 
            } 
        } 
 
 
[CSHTML] 
 
@{Html.EJ().Chart("container",   (Syncfusion.JavaScript.DataVisualization.Models.ChartProperties)ViewData["ChartModel"]).Render(); } 
 
 
Screenshot: 
 

For your reference we have attached the sample. Kindly find the sample from below location. 

Thanks, 
Dharani. 


Sample Link: http://www.syncfusion.com/downloads/support/forum/128361/ze/WebApplication1-923357440

doesn't work. this solution is an empty shell. 



SK Saravana Kumar Kanagavel Syncfusion Team November 2, 2017 12:15 PM UTC

Hi Vlatko, 
 
Sorry for the inconvenience.  
 
We have analyzed your query and modified the sample with some changes based on your requirement. 

Please find the code snippet below 
[C#] 
  private void InitializeChart(ChartProperties chartModel, int serCount) 
        { 
            Random r = new Random(); 
            for (int i = 0; i < serCount; i++) 
            { 
                Series series = new Series(); 
                series.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.Column;              
                for(int j = 0; j < 10; j++) 
                { 
                    series.Points.Add(new Points(j.ToString(), r.Next(j * 5, 100))); 
                } 
                chartModel.Series.Add(series); 
            } 
        } 
 
Kindly find the modified sample from the below link 
  
Note : Sample created by VS2015 and using .Net core 1.0 
 
Find the output of the sample below 
 
 
Please let us know if you have any concern. 
 
Regards, 
Saravana Kumar K. 
 
 


Loader.
Live Chat Icon For mobile
Up arrow icon