Inside an UpdatePanel

Jan 31, 2012 at 3:56 PM

rendering the chart inside an update panel fail after panel update.

it seems that the javascript code $(document).ready(..) is not executed after an update

any idea to solve this issue ?

 

Thanks,

Paolo.

Jan 31, 2012 at 5:09 PM

I soved changing a little your code.

in Highcharts.cs I added an override of ToHtmlString to include the generated javascript in a custom function.

i.e.: .ToHtmlString("DrawChart")

so the function DrawChart() can be called whenever is necessary.

to solve my problem i did:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
    DrawChart()
}

to call the function after an updatePanel update happen.

here you are the changed code:

 #region IHtmlString Members

       


        public string ToHtmlString()
        {
          return  ToHtmlString("");
        }

        public string ToHtmlString(string jsFunctionName)
        {
            string startScript = "$(document).ready(function() {";
            string endScript = "});";
            if (jsFunctionName != "")
            {
                startScript = string.Format("function {0}() {{",jsFunctionName);
                endScript = "};";
            }
            StringBuilder scripts = new StringBuilder();

            scripts.AppendLine("<div id='{0}'></div>".FormatWith(_ContainerName));
            scripts.AppendLine("<script type='text/javascript'>");
            if (_Options != null)
                scripts.AppendLine("Highcharts.setOptions({0});".FormatWith(JsonSerializer.Serialize(_Options)));

            scripts.AppendLine("var {0};".FormatWith(_Name));

            scripts.AppendLine(startScript);
                        
            foreach (KeyValuePair<string, string> jsVariable in _JsVariables)
            {
                scripts.AppendLine("var {0} = {1};".FormatWith(jsVariable.Key, jsVariable.Value), 1);
            }

            scripts.AppendLine("chart = new Highcharts.Chart({", 1);

            scripts.Append(_Chart != null ? "chart: {{ renderTo:'{0}', {1} }}".FormatWith(_ContainerName, JsonSerializer.Serialize(_Chart, false)) : "chart: {{ renderTo:'{0}' }}".FormatWith(_ContainerName), 2);

            if (_Credits != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("credits: {0}".FormatWith(JsonSerializer.Serialize(_Credits)), 2);
            }

            if (_Labels != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("labels: {0}".FormatWith(JsonSerializer.Serialize(_Labels)), 2);
            }

            if (_Legend != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("legend: {0}".FormatWith(JsonSerializer.Serialize(_Legend)), 2);
            }

            if (_Loading != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("loading: {0}".FormatWith(JsonSerializer.Serialize(_Loading)), 2);
            }

            if (_PlotOptions != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("plotOptions: {0}".FormatWith(JsonSerializer.Serialize(_PlotOptions)), 2);
            }

            if (_Subtitle != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("subtitle: {0}".FormatWith(JsonSerializer.Serialize(_Subtitle)), 2);
            }

            if (_Title != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("title: {0}".FormatWith(JsonSerializer.Serialize(_Title)), 2);
            }

            if (_Tooltip != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("tooltip: {0}".FormatWith(JsonSerializer.Serialize(_Tooltip)), 2);
            }

            if (_XAxis != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("xAxis: {0}".FormatWith(JsonSerializer.Serialize(_XAxis)), 2);
            }

            if (_XAxisArray != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("xAxis: [{0}]".FormatWith(JsonSerializer.Serialize(_XAxisArray)), 2);
            }

            if (_YAxis != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("yAxis: {0}".FormatWith(JsonSerializer.Serialize(_YAxis)), 2);
            }
            else if (_YAxisArray != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("yAxis: {0}".FormatWith(JsonSerializer.Serialize(_YAxisArray)), 2);
            }

            if (_Exporting != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("exporting: {0}".FormatWith(JsonSerializer.Serialize(_Exporting)), 2);
            }

            if (_Navigation != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("navigation: {0}".FormatWith(JsonSerializer.Serialize(_Navigation)), 2);
            }

            if (_Series != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("series: [{0}]".FormatWith(JsonSerializer.Serialize(_Series)), 2);
            }
            else if (_SeriesArray != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("series: {0}".FormatWith(JsonSerializer.Serialize(_SeriesArray)), 2);
            }
            scripts.AppendLine();
            scripts.AppendLine("});", 1);

            foreach (KeyValuePair<string, string> jsFunction in _JsFunctions)
            {
                scripts.AppendLine();
                scripts.AppendLine(jsFunction.Key, 1);
                scripts.AppendLine(jsFunction.Value, 2);
                scripts.AppendLine("}", 1);
            }

            scripts.AppendLine(endScript);
            
            scripts.AppendLine("</script>");

            return scripts.ToString();
        }

        #endregion

Coordinator
Jan 31, 2012 at 8:52 PM

Hi paololabe,

Thank you for sharing your solution. I'll include it into the next version of the library.

Vangi

Coordinator
Feb 1, 2012 at 9:26 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Feb 17, 2012 at 5:59 AM

To add UpdatePanel support is very handy for small website developers (like me, lol)

Coordinator
Feb 21, 2012 at 10:18 PM

The feature about creation of Highcharts inside specific JavaScript function is completed in changeset 10250 and will be included in the next release 1.1

Aug 16, 2012 at 9:37 AM
Vangi wrote:

The feature about creation of Highcharts inside specific JavaScript function is completed in changeset 10250 and will be included in the next release 1.1

Could you please give an example of how to use this feature in version 1.1?

Nov 18, 2012 at 9:32 AM

Hello,

I tried to use this new feature - but could not get it to work.  Can anyone provide an example that works?

Regards,
Mike

Feb 18, 2013 at 6:14 PM
Hi all -

Echo'ing Mike's comment...Has anyone got this to work or are there any updates on the ability to redraw the chart in an update panel?

Thanks
Derek