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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Chart export in UpdatePanel

Thread ID:

Created:

Updated:

Platform:

Replies:

151068 Jan 29,2020 07:14 PM UTC Feb 11,2020 05:42 AM UTC ASP.NET Web Forms 7
loading
Tags: Chart
Erik
Asked On January 29, 2020 07:14 PM UTC

Hello.

I'm using a chart control in my application that is inside a UpdatePanel which is updated whenever the user change the date range field. Everything is working fine except when I use the server export function of the control. After the file is exported the controls in the page are unable to make a postback unless I reload the page. Here is my code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div class="row">
                <div class="col-md-7">
                    <ej:DateRangePicker ID="DateRangePicker1" runat="server" Width="200" Locale="pt-BR" AllowEdit="false" OnSelect="DateRangePicker1_Select"></ej:DateRangePicker>
                </div>
                <div class="col-md-5">
                    <asp:Button ID="Button1" runat="server" OnClientClick="download(this);" UseSubmitBehavior="false" />
                </div>
            </div>

            <ej:Chart ID="Chart1" runat="server" Height="400" Locale="pt-BR" IsResponsive="true" OnServerExporting="ExportChart" ClientIDMode="Static" EnableCanvasRendering="true">
                <PrimaryXAxis Title-Text="Month" LabelFormat="MMM/yyyy" LabelIntersectAction="Rotate45" />
                <PrimaryYAxis Title-Text="Total" />
                <CommonSeriesOptions EnableAnimation="True" Tooltip-Visible="true" Tooltip-Format="#point.x# : #point.y# #series.name#">
                    <Marker>
                        <DataLabel Visible="True" ShowEdgeLabels="true" EnableContrastColor="true">
                        </DataLabel>
                    </Marker>
                </CommonSeriesOptions>
                <Series>
                    <ej:Series Name="Series1" XName="Xvalue" YName="YValue1"></ej:Series>
                    <ej:Series Name="Series2" XName="Xvalue" YName="YValue2"></ej:Series>
                </Series>
                <Legend Position="Top"></Legend>
            </ej:Chart>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="DateRangePicker1" EventName="Select" />
        </Triggers>
    </asp:UpdatePanel>


I tried using the PostBackTrigger for the export button with no success. Is there a example on how to export the chart inside a UpdatePanel? I'm using the EJ1 by the way.


Thanks in advance. Regards. 

Durga Gopalakrishnan [Syncfusion]
Replied On January 30, 2020 01:42 PM UTC

Hi Erik, 

We have analysed your query. We were able to export the chart rendered inside UpdatePanel. We have attached sample for your reference. Please check with it. We are unable to reproduce the reported issue at our end. Kindly provide an issue reproduced sample or try to reproduce an issue in attached sample to proceed further. 

Code Snippet 
ChartFeatures.aspx 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
    <ContentTemplate> 
        <ej:Chart ID="Chart1" OnServerExporting="ExportChart"> 
            <ExportSettings Mode="Server" /> 
        </ej:Chart> 
    </ContentTemplate> 
    </asp:UpdatePanel> 
<script type="text/javascript"> 
     function download() { 
          $("#Chart1").ejChart("export"); 
     } 
</script> 
</asp:Content> 
 
ChartFeatures.aspx.cs 
protected void ExportChart(object sender, Syncfusion.JavaScript.Web.ChartEventArgs e) 
  { 
     string Format = "png"; 
     string FileName = "Chart"; 
     string DataURL = e.Arguments["Data"].ToString(); 
     DataURL = DataURL.Remove(0, DataURL.IndexOf(',') + 1); 
     MemoryStream stream = new MemoryStream(Convert.FromBase64String(DataURL)); 
     stream.WriteTo(Response.OutputStream); 
     Response.ContentType = "application/octet-stream"; 
     Response.AddHeader("Content-Disposition", String.Format("attachment;filename={0}", FileName + "." + Format)); 
     Response.Flush(); 
     stream.Close(); 
     stream.Dispose(); 
  } 

Screenshot 
 
Sample 

Please revert us, if you have any concerns. 

Regards, 
Durga G

Erik
Replied On January 31, 2020 12:09 PM UTC

Hi Durga.

I think I found the problem but I don't know how to solve... Every time I export the chart the application does two postback: one from the chart control and the other from the button. Here is my Page_Load function:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<ColumnChartData> data = new List<ColumnChartData>();

                data.Add(new ColumnChartData("USA", 50, 70, 45));
                data.Add(new ColumnChartData("China", 40, 60, 55));
                data.Add(new ColumnChartData("Japan", 70, 60, 50));
                data.Add(new ColumnChartData("Australia", 60, 56, 40));
                data.Add(new ColumnChartData("France", 50, 45, 35));
                data.Add(new ColumnChartData("Germany", 40, 30, 22));
                data.Add(new ColumnChartData("Italy", 40, 35, 37));
                data.Add(new ColumnChartData("Sweden", 30, 25, 27));

                //Binding Datasource to Chart
                this.Chart1.DataSource = data;
                this.Chart1.DataBind();
            }
        }

I check if it is not a postback to prevent reloading the chart with the initial values (as it can be filtered by the RangeDatePicker control).But this render the chart empty on the page every time I export.

So, should I reload the chart with the current value from the RangeDatePicker on every postback or there is a way to send the postback for export but without having to reload the chart control?

Thanks for the support. Regards.

Durga Gopalakrishnan [Syncfusion]
Replied On February 5, 2020 09:18 AM UTC

Hi Erik, 

We have analysed your query. We suggest you to bind the data to series instead of chart, to overcome an empty chart rendering on clicking export button. We have prepared sample based on your requirement. Please check with the below code snippet and sample. 

Code Snippet 
 
ChartFeatures.aspx 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> 
        <ContentTemplate> 
           <ej:Chart ID="Chart1" runat="server" OnServerExporting="ExportChart"> 
           </ej:Chart> 
        </ContentTemplate> 
    </asp:UpdatePanel> 
</asp:Content> 
 
ChartFeatures.aspx.cs 
protected void Page_Load(object sender, EventArgs e) 
{ 
    if (!IsPostBack) 
    { 
        this.bindChartData(); 
   } 
} 
private void bindChartData() 
{ 
    //Binding Datasource to Chart Series 
    for (int j = 0; j < this.Chart1.Series.Count; j++) 
    { 
       this.Chart1.Series[j].DataSource = data; 
    } 
    this.Chart1.DataBind(); 
} 
 
Screenshot 
 
 
 
Sample 
 
Kindly revert us, if you have any concerns. 
 
Regards, 
Durga G 


plein
Replied On February 9, 2020 01:30 PM UTC

Hi Durga.

I think I found the problem but I don't know how to solve... Every time I export the chart the application does two postback: one from the chart control and the other from the button. Here is my Page_Load function:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List data = new List();

                data.Add(new ColumnChartData("USA", 50, 70, 45));
                data.Add(new ColumnChartData("China", 40, 60, 55));
                data.Add(new ColumnChartData("Japan", 70, 60, 50));
                data.Add(new ColumnChartData("Australia", 60, 56, 40));
                data.Add(new ColumnChartData("France", 50, 45, 35));
                data.Add(new ColumnChartData("Germany", 40, 30, 22));
                data.Add(new ColumnChartData("Italy", 40, 35, 37));
                data.Add(new ColumnChartData("Sweden", 30, 25, 27));

                //Binding Datasource to Chart
                this.Chart1.DataSource = data;
                this.Chart1.DataBind();
            }
        }

I check if it is not a postback to prevent reloading the chart with the initial values (as it can be filtered by the RangeDatePicker control).But this render the chart empty on the page every time I export.

So, should I reload the chart with the current liteblue value from the RangeDatePicker on every postback or there is a way to send the postback for export but without having to reload the chart control?

Thanks for the support. Regards.

Support is awesome and I love this.

Srihari Muthukaruppan [Syncfusion]
Replied On February 10, 2020 04:42 AM UTC

Hi Plein,  

Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   
   
Thanks,   
Srihari M 


Erik
Replied On February 10, 2020 01:49 PM UTC

Hi Durga.

I've made the changes and it worked. Thank you very much for the help.


Regards,

Srihari Muthukaruppan [Syncfusion]
Replied On February 11, 2020 05:42 AM UTC

Hi Erik,   
 
Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.    
    
Thanks,    
Srihari M  



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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon