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.
Unfortunately, activation email could not send to your email. Please try again.

Chart Dynamic Series

Thread ID:

Created:

Updated:

Platform:

Replies:

128361 Jan 17,2017 01:35 AM Nov 2,2017 08:15 AM ASP.NET Core 5
loading
Tags: Chart
Vlatko
Asked On January 17, 2017 01:35 AM

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?


Dharanidharan Dharmasivam [Syncfusion]
Replied On January 18, 2017 04:04 AM

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. 



Vlatko
Replied On January 18, 2017 04:07 AM

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.

Dharanidharan Dharmasivam [Syncfusion]
Replied On January 19, 2017 06:39 AM

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. 


john friesen
Replied On November 1, 2017 11:45 AM

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. 


Saravana Kumar Kanagavel [Syncfusion]
Replied On November 2, 2017 08:15 AM

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. 
 
 


CONFIRMATION

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.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;