How to render multi charts on the same page

[Timo]

I'm developing asp.net core 2.0 mvc web app.

My controller's action will return multi ChartProperties objects, then How can I render multi charts in the same page?

ChartProperties chartModel = new ChartProperties();

            InitializeChart(chartModel, ls);

            ViewData["ChartModel"] = chartModel;

ChartProperties chartModel1 = new ChartProperties();

            InitializeChart(chartModel1, ls1);

            ViewData["ChartModel1"] = chartModel1;

return View();

[Dharanidharan Dharmasivam]

Hi Xavier,  

Thanks for using our products. 

We have analyzed your query. We have prepared sample with respect to your requirement. Here we have bind all the chart properties in the controller and then we have passed the chart model to the view page and rendered the chart as depicted below. You can change this with respect to your requirement. Kindly find the code snippet to achieve this scenario. 

 

ASP.NET Core: 

 

[Controller side] 

 

   //Assign the length of the series 

  int serCount = 2; 

   

  //Initializing first chart 

  ChartProperties chartModel = new ChartProperties(); 

  InitializeChart(chartModel, serCount); 

  //Passing chart properties to view page in the ViewData for first chart 

  ViewData["ChartModel"] = chartModel;  

 

  //Initializing second chart 

  ChartProperties chartModel1 = new ChartProperties(); 

  InitializeChart(chartModel1, serCount); 

  //Passing chart properties to view page in the ViewData for second chart 

   ViewData["ChartModel1"] = chartModel;  

    

   return View(); 

 

//Specify the required properties and bind to chart model 

private void InitializeChart(ChartProperties chartModel, int serCount) 

        { 

          for (int i = 0; i < serCount; i++) 

            { 

                Series series = new Series(); 

                series.Type = Syncfusion.JavaScript.DataVisualization.SeriesType.Column; 

 

               //...                

                 

                chartModel.Series.Add(series); 

            } 

        } 

 

 

[CSHTML] 

//Rendering of chart by getting the model properties from controller via ViewData 

@{Html.EJ().Chart("container",   (Syncfusion.JavaScript.DataVisualization.Models.ChartProperties)ViewData["ChartModel"]).Render(); } 

@{Html.EJ().Chart("container2",   (Syncfusion.JavaScript.DataVisualization.Models.ChartProperties)ViewData["ChartModel1"]).Render(); } 

 

 

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

http://www.syncfusion.com/downloads/support/forum/135145/ze/SyncfusionASPNETCoreApplication12039257203  

 

Kindly revert us, if you have any concerns. 

Thanks, 

Dharani. 

[Timo]

Thank you.

[Dharanidharan Dharmasivam]

Hi Xavier,  

 

Thanks for the update. 

 

Kindly revert us, if you need further assistance 

Thanks, 

Dharani.