HighCharts.Net does not work on ASP Updatepanel

Aug 17, 2011 at 5:59 AM

Hi,

My chart does not work when I use Asp Updatepanel. I noticed that Render() function on the linechart.cs (or any other charts) does not called. Please let me know how to fix this issue.

Tissa

 

Aug 17, 2011 at 11:49 AM

I am still trying to work out how to solve this problem.

The script is registered to the Page.RegisterStartupScript() method which doesn't get updated when an update occurs. If you change this to ScriptManager.RegisterStartupScript this gets pulled inside the update request

That's as far as I got and it doesn't work.

It could be something to do with the event not being fired as everything is wrapped inside the jquery document.ready which wouldn't apply to an update? correct me if I am wrong.

Aug 19, 2011 at 7:58 AM

I tried ScriptManager.RegisterStartupScript but still it does not work  I noticed that the "onload()" function in linechart.cs does not call when Updatepanel is used. Any idea?

Aug 24, 2011 at 9:00 PM

Hi all i had the same problems and i have a solution for this in de Linecharts.cs in the OnLoad events remove the Render Call
and make a protected ovveride void OnDataBound and call here the Render function. Do the same for the other charts.

Hope it helps

Greatings Peeringa

Nov 30, 2011 at 3:52 PM

I am trying to follow the instructions to get the highchart working on a ASPxCallbackPanel.

I have made the following changes:

PieCharts.cs

Render call removed

 

protected override void OnPreRender(EventArgs e) 
{
RenderType = RenderType.pie;
// Render();
}
 

New

 

protected override void OnDataBound(EventArgs e)

{

Render();

}

 

 Old
Page.ClientScript.RegisterStartupScript(GetType(), "chart_" + ID, script, true);

Replaced with
System.Web.UI.ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "chart_" + UniqueID, script, true);

Old
public void Render()

{

script =

       @"var chart[@Id];

$(document).ready(function() {

chart[@Id] = new Highcharts.Chart({

 Replaced with
public void Render()

{

script =

@"var chart[@Id];

$(document).ready([@Id]_paint);

 

function [@Id]_paint(){

chart[@Id] = new Highcharts.Chart({

 This allows  me to call on myChart_paint() on the EndCallback of the Panel.

With this change I can see the Chart on the Panel.

Problem:

If I change the Series data in a Callback, the initial data is shown again,

even though RegisterClientScriptBlock gets called with the new data.

Any Ideas?

Developer
Dec 1, 2011 at 9:02 AM

Can you please provide a sample project so that I can look into this?

Thanks

Dec 2, 2011 at 5:17 PM


I have modified your pie chart example, please see Sample06.aspx
http://frog2web.de/tmp/highcharts-ASPxCallbackPanel.zip

Thanks in advance

Developer
Dec 4, 2011 at 11:05 AM
Edited Dec 4, 2011 at 11:13 AM

I did not have the DevExpress package that you had used in your example, but i DID set up a sample project with an update panel. For that one to work, I simply needed to make the following change

PieChart.cs

Change :

Page.ClientScript.RegisterStartupScript(GetType(), "chart_" + ID, script, true);

To:

System.Web.UI.ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "chart_" + ID, script, true);

I did not make ay of the other changes that you had mentioned, and the solution worked for me. Please try making this change and let us know how it goes.

Also, I think you had commented out the  "[@JSONSource]" in the Render function of PieChart.cs. Doing this will only comment out the first line of the multi-line function for handling the json data, and may cause a js error on your page. I would recommend that you un-comment the same, since the line has no effect whatsoever if the AJAXource property of the chart is not set.

Regards,

Rahul

 

PS:

1. Sample06.aspx.cs file has the following functions 

        private void Exemplo06()
        {

            hcVendas.Title = new Title("Browsers dos visitantes de um site qualquer");

            hcVendas.PlotOptions = new Core.PlotOptions.PlotOptionsPie 
            { 
                allowPointSelect = true, cursor = "pointer", 
                dataLabels = new Core.PlotOptions.DataLabels { enabled = true }                
            };

            hcVendas.Theme = "pink-floral";
            hcVendas.Legend = new Legend { layout = Layout.vertical, align = Align.right, verticalAlign = Highchart.Core.VerticalAlign.top, x = -20, y = 100 };
            hcVendas.Appearance = new Core.Appearance.Appearance { marginBottom = 30, marginRight = 130, borderRadius = 15 };            
            
        }

        protected void btnPost_Click(object sender, EventArgs e)
        {
            var series = new Collection<Serie>();
            series.Add(new Serie
            {
                data = new object[] { 
                    new object[] { "Firefox", 45 }, 
                    new object[] { "IE", 24.8 }, 
                    new object[] { "Chrome", 12.8 },
                    new object[] { "Safari", 8.5 }, 
                    new object[] { "Opera", 5.2 }, 
                    new object[] { "Outros", 3.7 } 
                }
            });

            hcVendas.DataSource = series;
            hcVendas.DataBind();
            
        }
    }

2. the PieChart class looks like this:

public class PieChart : Chart, IChart
    {

        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
        }

        protected override void OnPreRender(EventArgs e)
        {
            RenderType = RenderType.pie;
            Render();
        }

        public PlotOptionsPie PlotOptions
        {
            get
            {
                object o = ViewState["PlotOptionsPie"];
                if (o == null)
                    return new PlotOptionsPie();
                return (PlotOptionsPie)o;
            }
            set { ViewState["PlotOptionsPie"] = value; }
        }

        public void Render()
        {

            script =
@"var chart[@Id];
$(document).ready(function() {
    
    chart[@Id] = new Highcharts.Chart({
    [@Theme]
    [@Colors]
    credits: { enabled: [@ShowCredits] },
    [@PlotOptions]
    [@Title]
    [@Subtitle]
    [@Legend]
    [@XAxis]
    [@YAxis]
    [@ToolTip]
    [@Series]
	});

    [@JSONSource]
    
});";

            script = script.Replace("[@JSONSource]", AjaxDataSource.ToString());
            script = script.Replace("[@PlotOptions]", PlotOptions.ToString());
            script = script.Replace("[@Id]", this.ClientID);

            // sobreescrece as propriedades obrigat�rias
            Appearance.renderTo = this.ClientID;
            Appearance.defaultSeriesType = RenderType.pie.ToString();

            script = script.Replace("[@Colors]", Colors.ToString());
            script = script.Replace("[@Theme]", Appearance.ToString());
            script = script.Replace("[@Legend]", Legend.ToString());
            script = script.Replace("[@ShowCredits]", ShowCredits.ToString().ToLower());
            script = script.Replace("[@Title]", Title.ToString());
            script = script.Replace("[@Subtitle]", SubTitle.ToString());
            script = script.Replace("[@ToolTip]", Tooltip.ToString());
            script = script.Replace("[@YAxis]", YAxis.ToString());
            script = script.Replace("[@XAxis]", XAxis.ToString());
            script = script.Replace("[@Series]", Series.ToString());

            // handle special case for events, such as point click, mouseover etc
            // see PointEvents.cs for examples
            System.Text.RegularExpressions.Regex _reg = new System.Text.RegularExpressions.Regex(@"\""(function\(event\)\{.*?\})\""", System.Text.RegularExpressions.RegexOptions.Multiline);
            script = _reg.Replace(script, "$1");

            if (!string.IsNullOrEmpty(Theme))
            {

                var themeAPI = @"
var highchartsOptions = Highcharts.setOptions(themes['{0}']);";
                script = string.Concat(string.Format(themeAPI, Theme.ToString()), script);

            }
            
            System.Web.UI.ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "chart_" + ID, script, true);
          
        }

    }