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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

120614 Sep 20,2015 10:39 PM UTC Sep 28,2015 01:23 PM UTC ASP.NET MVC 3
loading
Tags: TreeView
Matheu
Asked On September 20, 2015 10:39 PM UTC

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 [Syncfusion]
Replied On 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.

[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
Replied On September 26, 2015 08:59 AM UTC

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 [Syncfusion]
Replied On 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.


<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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;