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

[Matheu]

Hey.

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: 

Controller:

        public PartialViewResult bar()

        {

            return PartialView("_BarChart");

        }

        public PartialViewResult pie()

        {

            return PartialView("_PieChart");

        }

View:

@Ajax.ActionLink("Display Pie Chart", "pie", new AjaxOptions()

                                {

                                    HttpMethod = "GET",

                                    UpdateTargetId = "graph",

                                    InsertionMode = InsertionMode.Replace

                                })

<span>|</span>

@Ajax.ActionLink("Display Bar Chart", "bar", new AjaxOptions()

                                {

                                    HttpMethod = "GET",

                                    UpdateTargetId = "graph",

                                    InsertionMode = InsertionMode.Replace

                                })

<div id="graph">

    No Graph

</div>

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:

<div>

    @(Html.EJ().Chart("chart")

          .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"))

                                          .EnableSmartLabels(true).StartAngle(145)

                                          .Marker(mr =>

                                          {

                                              mr.DataLabel(db =>

                                              {

                                                  db.Visible(true).ConnectorLine(cl => cl.Color("black")

                                                      .Height(60).Type(ConnectorType.Bezier)).Shape(ChartShape.None)

                                                      .Font(fn => { fn.Size("14px"); });

                                              });

                                          }).Name("Expenses").Type(SeriesType.Pie).Add();

                    })

            .CommonSeriesOptions(cr => cr.EnableAnimation(true))

            .Load("loadTheme")

            .Title(title => title.Text("Expenditures"))

            .CanResize(true)

            .SeriesRendering("seriesRender")

            .Size(sz => sz.Height("600"))

            .Legend(lg => { lg.Visible(false); })

    )

    <script>

            function seriesRender(sender) {

                if (sender.model.theme == "flatdark" || sender.model.theme == "gradientdark")

                    sender.data.series.marker.dataLabel.connectorLine.color = "white";

                else

                    sender.data.series.marker.dataLabel.connectorLine.color = "black";

            }

            $("#controlarea").css("visibility", "visible");

    </script>

</div>

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.

Regards

Matheu

[Deepaa Pragaasam]

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.

[web.config]

  <appSettings>

     -------

     -------

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

  </appSettings>

[_Layout.cshtml]

      <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.

[JS]

  $("#partialChart").html(data);

  ej.widget.init($("#partialChart"));

We have attached the sample for your reference

MvcApplication12

Regards,

Deepaa

[Matheu]

Hey.

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,

Matheu

[Francis Paul Antony Raj]

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.

<script>

    var obj;

    function onCreate(e) {

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

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

        removecheck.each(function (i, value) {

            $(removecheck[i]).find(".e-chkbox-wrap:first").remove();

        })

    }

</script>

We have attached the sample for your convenience.

http://www.syncfusion.com/downloads/support/forum/120614/ze/Treecheck618079120

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

http://help.syncfusion.com/js/api/ejtreeview

Regards,

Francis Paul A