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

Need help on displaying multiple charts in the same view

I am developing a report that contains drill down charts.  On click of a parent chart, it should display multiple child charts(each individual chart will have different datasource ) in the same view. Based on the parent, the number of child may differ from min 1 to max 4. So Kindly help me out to solve this asap. 

I tried the sample code  ,But they are not working for me. 
Please help me to build using Controller code. (Java script is not used in my application). 

3 Replies

VA Vinothkumar Arumugam Syncfusion Team July 17, 2015 11:17 AM UTC

Hi Sharada
We have analyzed your query. You can achieve this by workaround. We have created  JSON data source and it has some data reports of the 2010,2011,2012,2013. Please find the following code snippets and screenshot to illustrate this.
Code Snippet [MVC]:

·         Create parent chart and Setting an event PointRegionClick. Which is used to get the point values of the parent chart as follows.

·         Create child chart dynamically when an PointRegionClick=”Onclick” event triggered as follows.

·         Get the dataSource based on the selection segment of the parent chart.

Screen Shot:

·         After run the sample you can get the following parent chart.

·         If you click the first segment the four child charts render by using different data sources as bellow.

·         If you want to change another dataSource you can click Back button to change other set of data below screenshot shows that

We have made a sample for this. Please find the below sample link to download the sample.
Sample Link:

Please let us know if you have any concern.
Vinothkumar Arumugam.

SH Sharada July 17, 2015 12:40 PM UTC

Hi Vinothkumar ,
The Html.EJ.Chart() is not being recognized in my Application.  And also no javascript is used in my application. Its Asp.net MVC application .

I have tried a work around by implementing partial view to show multiple charts in a same view. Still I am facing an issue. When I return a view from the action mapped to chartmodel.DrillDownMapper, a javascript exception is thrown., and the page also not redirecting.

if I retuen a MVCChartModel object , there is no exception thrown. Please help me. 

I want to redirect to a Action that returns a view. 

Kindly help me asap.

VA Vinothkumar Arumugam Syncfusion Team July 20, 2015 12:46 PM UTC

Hi Sharada,
We have analyzed this. You can easily customize multiple charts by using Chart Drilldown type. Please find the below code snippet and explanations to achieve your requirements.
Code Snippet [MVC Classic]:

·         You can create one main view and two partial views as follows. One partial view for loading parent after click on back button another two for child charts.

Main view     : ChartFeatures.cshtml

Partial views: 1.ChartPartialView.cshtml                                                                           

                         2. ChildChart.cshtml

·         You can load multiple child charts by using ajax post back method. Which it is achieved by client side event “ClientSideOnMouseClick”.

Event declaration as follows.

·         Create multiple child chart model as below.

·         Define the function in _Layout.cshtml page

1. Call multiple chart when click on point region

2.Call main view after clicking on back button.

Below screenshots illustrate this.

·         Run the sample you can get following result

·         The child charts render by different sources as below.

·         Click on “Back” button you can get Parent view as follows.

We have prepared a sample for this. You can download it from below location

Sample Location:

Please let us know if you have any concern.


Vinothkumar Arumugam.

Live Chat Icon For mobile
Up arrow icon