Chart Dynamic Series

[Vlatko]

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]

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. 

Sample Link: http://www.syncfusion.com/downloads/support/forum/128361/ze/WebApplication1407685573  

  

Thanks, 

Dharani. 

[Vlatko]

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]

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. 

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

Thanks, 

Dharani. 

[john friesen]

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. 

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

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]

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 

Sample Link : http://www.syncfusion.com/downloads/support/forum/128361/ze/Sample922784577 

  

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.