Javascript error when setting global options

Jan 27, 2015 at 9:39 PM
We are currently using the DotNet.Highcharts API to incorporate Highcharts into our website. However, we are having some JavaScript reference issues when using the .SetOptions(GlobalOptions) call.

We are using a wrapper class to build our chart in the controller, then using a simple view to render it.

In our controller:
Chart chart = new HighCharts("chart-id");
chart.SetOptions(new GlobalOptions { Global = new Global { UseUTC = false; } });
chart.SetPlotOptions()...
In our view:
@model HighchartWrapper
@(Model.Chart)
The chart is rendered in the view as follows:
<script type="text/javascript">
    Highcharts.setOptions({ global: { useUTC: false } });
    var chart05;
    $(document).ready(function() {
    });
</script>
Chrome is raising an "Uncaught ReferenceError: Highcharts is not defined"
error on the .setOptions() statement. Without this (and the corresponding .SetOptions() statement in .NET) the chart renders correctly. If I navigate off this page and then back again, the charts start to render correctly.

I've found that manipulating the ToHtmlString() return value to put the .setOptions call to inside the .ready() portion makes the charts display properly. Is this the approach that others have had to resort to?