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

Using a Chart in a partial view and then using ajax to get the partial

I have recently started using syncfusion and have found it to be great so far.
I am currently implement a view in which a user can select a range of data and have it displayed as a chart.
The problem i have run into is that they can choose different chart type for it to be displayed as.
say for example the use has chosen data points A,B and C with the values 10,20 and 30 respectively.
They now have the option to generate either a pie chart or a bar graph representing that data.

I thought of storing the charts in partials and then ajaxing them in.

for example: 

        public PartialViewResult bar()
            return PartialView("_BarChart");

        public PartialViewResult pie()
            return PartialView("_PieChart");


@Ajax.ActionLink("Display Pie Chart", "pie", new AjaxOptions()
                                    HttpMethod = "GET",
                                    UpdateTargetId = "graph",
                                    InsertionMode = InsertionMode.Replace
@Ajax.ActionLink("Display Bar Chart", "bar", new AjaxOptions()
                                    HttpMethod = "GET",
                                    UpdateTargetId = "graph",
                                    InsertionMode = InsertionMode.Replace

<div id="graph">
    No Graph

However once the partials have been ajaxed in, inside of the graph div the is the div for the EJ chart but none of the canvas elements that are normally contained in it. So it is just an empty div.

So if i was using this sample graph:

          .Series(sr =>
                        sr.Points(pt =>
                                           pt.X("Other Personal").Y(94658).Text("Other Personal, 88.47%").Add();
                                           pt.X("Medical care").Y(9090).Text("Medical care, 8.49%").Add();
                                           pt.X("Housing").Y(2577).Text("Housing, 2.40%").Add();
                                           pt.X("Transportation").Y(473).Text("Transportation, 0.44%").Add();
                                           pt.X("Education").Y(120).Text("Education, 0.11%").Add();
                                           pt.X("Electronics").Y(70).Text("Electronics, 0.06%").Add();
                                       }).LabelPosition(ChartLabelPosition.OutsideExtended).Border(bo => bo.Width(2).Color("white"))
                                          .Marker(mr =>
                                              mr.DataLabel(db =>
                                                  db.Visible(true).ConnectorLine(cl => cl.Color("black")
                                                      .Font(fn => { fn.Size("14px"); });
            .CommonSeriesOptions(cr => cr.EnableAnimation(true))
            .Title(title => title.Text("Expenditures"))
            .Size(sz => sz.Height("600"))
            .Legend(lg => { lg.Visible(false); })
            function seriesRender(sender) {
                if (sender.model.theme == "flatdark" || sender.model.theme == "gradientdark")
                    sender.data.series.marker.dataLabel.connectorLine.color = "white";
                    sender.data.series.marker.dataLabel.connectorLine.color = "black";
            $("#controlarea").css("visibility", "visible");

All that will be displayed in the graph div after the ajax request is:

<div id="chart" data-role="ejchart" data-ej-series="[{&quot;border&quot;:{&quot;color&quot;:&quot;white&quot;,&quot;width&quot;:2},&quot;startAngle&quot;:145,&quot;labelPosition&quot;:&quot;outsideExtended&quot;,&quot;type&quot;:&quot;pie&quot;,&quot;name&quot;:&quot;Expenses&quot;,&quot;marker&quot;:{&quot;dataLabel&quot;:{&quot;visible&quot;:true,&quot;font&quot;:{&quot;size&quot;:&quot;14px&quot;},&quot;connectorLine&quot;:{&quot;color&quot;:&quot;black&quot;,&quot;height&quot;:60,&quot;type&quot;:&quot;bezier&quot;}}},&quot;points&quot;:[{&quot;x&quot;:&quot;Other Personal&quot;,&quot;y&quot;:94658,&quot;text&quot;:&quot;Other Personal, 88.47%&quot;},{&quot;x&quot;:&quot;Medical care&quot;,&quot;y&quot;:9090,&quot;text&quot;:&quot;Medical care, 8.49%&quot;},{&quot;x&quot;:&quot;Housing&quot;,&quot;y&quot;:2577,&quot;text&quot;:&quot;Housing, 2.40%&quot;},{&quot;x&quot;:&quot;Transportation&quot;,&quot;y&quot;:473,&quot;text&quot;:&quot;Transportation, 0.44%&quot;},{&quot;x&quot;:&quot;Education&quot;,&quot;y&quot;:120,&quot;text&quot;:&quot;Education, 0.11%&quot;},{&quot;x&quot;:&quot;Electronics&quot;,&quot;y&quot;:70,&quot;text&quot;:&quot;Electronics, 0.06%&quot;}]}]" data-ej-commonseriesoptions-type="column" data-ej-commonseriesoptions-enableanimation="true" data-ej-size-height="600" data-ej-title-text="Expenditures" data-ej-canresize="true" data-ej-enable3d="false" data-ej-legend-visible="false" data-ej-load="loadTheme" data-ej-seriesrendering="seriesRender"></div>

Is there a way to render the graph after it has been ajaxed in or perhaps and alternate method of doing this.


3 Replies

DP Deepaa Pragaasam Syncfusion Team September 21, 2015 05:20 PM UTC

Hi Matheu,
Thanks for contacting Syncfusion Support.
We have analyised your query .   
We have to set UnobtrusiveJavaScriptEnabled as true in the web.config page and need to refer the Chart dependent Script and CSS files in the _Layout.cshtml.





     <add key="UnobtrusiveJavaScriptEnabled" value="true" />    



      <link rel='nofollow' href="@Url.Content("~/Content/ej/web/Default-theme/ej.widgets.all.min.css")"rel="stylesheet"/>

      <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script>

      <script src="@Url.Content("~/Scripts/jsrender.min.js")"></script>

      <script src="@Url.Content("~/Scripts/jquery.easing-1.3.min.js")"></script>   

      <script src="@Url.Content("~/Scripts/jquery.globalize.min.js")"></script>

      <script src="@Url.Content("~/Scripts/ej/ej.web.all.min.js")"></script>

      <script src="@Url.Content("~/Scripts/ej/ej.unobtrusive.min.js")"></script>

 We can call the controller ActionResult by using AJAX post and return the Chart  data source to partial view model. The RenderPartial html helper will render the chart  control from partial view and we have to initialize the control by using ej.widget.init method in the AJAX success function.




We have attached the sample for your reference




MA Matheu September 26, 2015 08:59 AM UTC


Thanks for the help the sample was exactly what I needed.

I have a follow up question with regard to the TreeView.
Is it possible to generate a treeview where only certain nodes have checkboxes?

Kind regards,

FP Francis Paul Antony Raj Syncfusion Team September 28, 2015 01:23 PM UTC

Hi Matheu,

Thanks for contacting syncfusion support.

Currently we don’t have inbuilt function to achieve your requirement (to generate a treeview where only certain nodes have checkboxes). But we can achieve this manually by removing the checkbox in the “create” event. Specify the class to the desired nodes which need to be removed using htmlattributes. The class will be added to the “li” elements and from the obtained ”li” elements find the corresponding “span” elements (checkbox) associated with it and remove it. Please refer the following snippet.


    var obj;

    function onCreate(e) {

        obj = $("#tree").data("ejTreeView");

        var removecheck = this.element.find(".remove");

        removecheck.each(function (i, value) {





We have attached the sample for your convenience.


To know more about the list of properties, methods, and events available in TreeView, please check the following link



Francis Paul A

Live Chat Icon For mobile
Up arrow icon