HighCharts.JS / General Javascript

Question

I've found a few posts on this but none that have helped me solve the situation. I'll try to explain the best I can.

My HighCharts example code works fine when I put it in an ASP.NET user control and simply browse to a page that contains my user control, as it is simply the same example that comes with the highcharts package. The following code is therefore in an asp.net web user control.

      <!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
            <script type="text/javascript" src="/js/themes/gray.js"></script>
        -->
<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="/js/modules/exporting.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">

    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Under / Over 2.5 Goals'
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Under / Over 2.5 Goals',
                data: [
                            ['Under', 33.0],
                            ['Over', 67.0]
                        ]
            }]
        });
    });

        </script>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto">
</div>

When however I am loading this same user control into my page dynamically using AJAX the chart is not rendering and I am getting an empty white as per the inline styling. I am presuming that this is because the JS code is executing when the document is ready and this will not work when I am loading the control dynamically.

The following code resides in an external .js file

Service.GetChartData(OnGetChartDataSuccess, OnGetChartDataFailure);

function OnGetChartDataSuccess(result) {

    $get('ChartDataContent').style.display = 'none';
    Sys.UI.DomElement.removeCssClass($get('ChartDataContent'), 'loading');
    $get('ChartDataContent').innerHTML = result;
    $('#ChartDataContent').fadeIn(500);
}

function OnGetChartDataFailure(result) {
alert('Error loading control data');
}

Now at the point where the Ajax call to the service has succeeded I need to be able to get the chart to do its rendering etc to the container.

As it stands this is just using the example and there is no need for me to be using Ajax, but in practice there will be some long running calculations that need to take place before the chart is rendered.

If I need to add more information to this then please say and Ill do my best to explain further.

Thanks in advance

Answer 1

The simplest option you have is to use the Highcharts .Net library from codeplex that acts as a wrapper around the Highcharts js library, allowing you to create the charts using only C#.

However, if you so not want to go that way, you can always use a helper function to load the series into the chart as shown in the example here