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

Render syncfusion chart control in partial view

Thread ID:

Created:

Updated:

Platform:

Replies:

119918 Aug 13,2015 05:20 PM UTC Apr 12,2016 01:12 PM UTC ASP.NET MVC 10
loading
Tags: Chart
Manolo
Asked On August 13, 2015 05:20 PM UTC

Hi,

I've a partial view with syncfusion chart controls. When in main view, the user change values of dropdownlist, I want display the chart partial view.

My javascript code is:

<script type="text/javascript">
        onRowSelected = function (args)
        {
            var id = args.data["ID"];


            $.ajax({
                type: 'GET',
                url: "@Url.Content("/Informes/InformeSemanal/Chart")",
                data: {
                    Id: id
                },
                dataType: "html",
                success: function (result) {
                    $('#Details').html(result);
                }
            });          
    }

result has the html to render, but nothing is display

Sanjith Kesavan [Syncfusion]
Replied On August 14, 2015 10:51 AM UTC

Hi Manolo,
We have analyzed your query and prepared the sample as per your requirement.
In the sample we have created the dropdown in the main view and chart in the partial view.
Please find the below code snippet
[HTML]

<div>

    Select DataSource:<select id="SelectDataSet" onchange="selectSource(this)" style="width:100px;height:20px">

        <option value="SelectDataSet">5 points DataSet</option>

        <option value="DataSet1">10 points DataSet</option>

    </select>
</div>
[MVC]

@{

        <div>

            @(Html.EJ().Chart("chart").Series(sr =>

{

    sr.DataSource(ViewBag.datasource).XName("XValue").YName("YValue").Add();

})

                    .Load("onchartload")

                    .PrimaryXAxis(xAxis => xAxis

                    .Font(font => font.Size("8px"))

                    .LabelIntersectAction(LabelIntersectAction.Trim))

                    .PrimaryYAxis(yAxis => yAxis.ValueType(AxisValueType.Double))

                    .EnableCanvasRendering(true)

                    .SeriesRendering("RenderSeries"//SeriesRendering event handler for chart.

                    .CanResize(true)

                    .Zooming(zn => zn.Enable(false).EnableMouseWheel(false))

            )

        </div>
    }


Please find the below screen shot


In the partial view we have used ajax postback to add the datasource to the chart while clicking the dropdown in the main view.

Please find the below code snippet

[JS]


<script>   

    function selectSource(sender) {

        var param = sender.selectedIndex == 0 ? 5 : 10;       

        $.ajax({

            type: "POST",

            url: "TreeGrid/Getjsondata",

            data: { 'data': param },

            async: false,

            success: function (data) {               

                var chartObj = $("#chart").ejChart("instance");

                chartObj.model.series[0].dataSource = data;

                chartObj.redraw();

            }

        });


    }

    function RenderSeries() {

        var chartObj = $("#chart").ejChart("instance");

        chartObj.model.series[0].type = "column";

        chartObj.model.series[0].name = "SeriesName Changed";

    }

</script>

Screen shot


Please find the sample from the below location.

Sample link: http://www.syncfusion.com/downloads/support/forum/119918/ze/partial-423758284

Please let us know if you have any concerns.


Regards,

Sanjith K.​


Manolo
Replied On August 14, 2015 11:40 AM UTC

Thanks!

Vinothkumar Arumugam [Syncfusion]
Replied On August 17, 2015 01:19 PM UTC

Hi Manolo,
Thanks for the update.
Please let us know if you have any further query on this.
Thanks,
Vinothkumar Arumugam.

Megatron
Replied On February 7, 2016 04:20 AM UTC

Hi, how can I do this similar item, but let controller send multiple charts to the view https://www.syncfusion.com/forums/119931/how-to-send-xaxis-yaxis-and-series-data-from-controller-to-view

if I had a dropdown with 5 values, then your code sample here will not work.  i want to let user select chart type also.
  var param = sender.selectedIndex == 0 ? 5 : 10;  
     
and how can I append the the dropdown value to the
  url: "TreeGrid/Getjsondata",  //  e.g. "TreeGrid/" +ddl.slecectedvaluetostring

do i need to destroy the chart and create a new instance, if the chart type changes.


do I need to use .render()

Sanjith Kesavan [Syncfusion]
Replied On February 8, 2016 11:58 AM UTC

Hi,

We have prepared the sample based on your requirement. While rendering the sample it will render like below.


In the textbox please enter the number of chart you want to render and in the dropdown please choose series type. For example we have entered chart count as 3 and type as pie. Now the sample will render like below.



Please find the sample from the below location.
Sample Link: http://www.syncfusion.com/downloads/support/forum/119918/ze/Chart1189703477

Query1: do i need to destroy the chart and create a new instance, if the chart type changes.

No need to destroy the chart while changing the series type. We have only removed the <div> and added the new <div> in the <body>.

Query2: do I need to use .render()

No need to use .Render(). It is already added in the layout page of the sample.

Please let us know if you have any concern.

Regards,
Sanjith K.



Megatron
Replied On February 10, 2016 02:18 AM UTC

Hi, can you please check, this sample does not work, it only draws column charts. It also does not have the loading of partial views.

thanks

Sanjith Kesavan [Syncfusion]
Replied On February 10, 2016 10:35 AM UTC

Hi Manolo,

Sorry that the sample did not work. We have modified the sample as per your requirement. In the partial view, we have loaded the chart and added this partial view in the main view page using the following code. 


[CSHTML]
  


If the button is clicked, then the chart is created in the partial view and binds the data for the chart from the controller. For retrieving data from the controller, we have used Ajax post back. Please refer to the below code example. 

  


Please find the sample from the below location.
Sample Link: http://www.syncfusion.com/downloads/support/forum/119918/ze/Chart205353191


Regards,
Sanjith K.

Megatron
Replied On April 11, 2016 04:06 PM UTC

Hi Thanks this works, but it does not render if I use it inside a _layout inherited master.

  • Can you show me how to make it work and get the charts showing up inside a DIV with ID=Partial+ChartName (not the directly the body, but a row div)
  • Also how to add/append the class/style information to the chart divs from the serverside/Action (then add the class information to the row div), for e.g. if its 3 charts, then 3 rows with responsive/resizing/auto height, both for the chart rendering and labels

Please add notes on the JS code.


thanks


Megatron
Replied On April 11, 2016 04:28 PM UTC

I'm not sure if it because of this, but I think IE has a problem with the Attribute in your sample...  http://stackoverflow.com/questions/7203820/javascript-add-attribute-method-question?lq=1

Sanjith Kesavan [Syncfusion]
Replied On April 12, 2016 01:12 PM UTC

Hi Magatorn,

We have analyzed your query and prepared sample based on you requirement. In the sample we have created the chart as per the number what we give. Please find the below code example
[JS]

function renderChart() {

            var val1 = parseInt(document.getElementById("input").value);

            for (var i = 0; i < val1; i++) {

                $.ajax({

                    type: "POST",

                    url: '@Url.Action("Getdata","Home")',

                    data: { 'data': i },

                    async: false,

                    success: function (data) {

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

                    },

                });

            }


        }

In the renderChart() method, we have called Getdata() method and in this method we have returned the partial view.

[C#]

public ActionResult Getdata(int data)

        {

            return PartialView("PartialView",data);

        }


Based on the number of chart, we have called the partial view and create chart with each div.
 

If this is not your requirement, then please give more detail regarding your query.

In the below link, we have attached sample for your reference.
Sample link: http://www.syncfusion.com/downloads/support/forum/119918/ze/Chart1724282814

And also could you please provide us below details?
1.       Are you creating the chart in the layout page instead of view page?
2.       Do you want to bind styles for the <div> that is passed from the server side
This information would be helpful for us to provide the exact solution to meet your requirement.

Please let us know if you have any concern.

Regards,
Sanjith.

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

;