Configuration problem? Javascript error when attaching Chart

[Dan Goemans]

I'm new to Highcharts and fairly new to GWT. I'm getting the below stacktrace when attempting to add a Moxie/Highcharts Chart to my GWT app. The app deploys and runs fine if I don't add the chart. I've gotten the below error regardless of whether I add the Chart to a SimplePanel programmatically (using @UiField for the SimplePanel) or include it directly in my ViewImpl.ui.xml and declare a @UiFactory method for the Chart (which is shown below). Configuration follows.

Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): undefined is not a function
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
at org.moxieapps.gwt.highcharts.client.BaseChart.nativeRenderChart(BaseChart.java)
at org.moxieapps.gwt.highcharts.client.BaseChart.onLoad(BaseChart.java:1963)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:350)
at com.google.gwt.user.client.ui.AttachDetachException$1.execute(AttachDetachException.java:34)
at com.google.gwt.user.client.ui.AttachDetachException.tryCommand(AttachDetachException.java:74)
at com.google.gwt.user.client.ui.Panel.doAttachChildren(Panel.java:170)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:345)
at com.google.gwt.user.client.ui.AttachDetachException$1.execute(AttachDetachException.java:34)
at com.google.gwt.user.client.ui.AttachDetachException.tryCommand(AttachDetachException.java:74)
at com.google.gwt.user.client.ui.Panel.doAttachChildren(Panel.java:170)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:345)
at com.google.gwt.user.client.ui.AttachDetachException$1.execute(AttachDetachException.java:34)
at com.google.gwt.user.client.ui.AttachDetachException.tryCommand(AttachDetachException.java:74)
at com.google.gwt.user.client.ui.Panel.doAttachChildren(Panel.java:170)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:345)
at com.google.gwt.user.client.ui.Widget.setParent(Widget.java:475)
at com.google.gwt.user.client.ui.Panel.adopt(Panel.java:127)
at com.google.gwt.user.client.ui.ComplexPanel.add(ComplexPanel.java:97)
at com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:97)
at com.google.gwt.user.client.ui.Panel.add(Panel.java:71)
at mycorp.miser.client.MiserEntryPoint.onModuleLoad(MiserEntryPoint.java:30)

Miser.gwt.xml excerpt:

<!-- Moxie provides a GWT adapter to highcharts -->
    <inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>

ViewImpl.ui.xml excerpt. Chart included below using "m:Chart"

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
             xmlns:g='urn:import:com.google.gwt.user.client.ui'
             xmlns:c='urn:import:mycorp.miser.client'
             xmlns:m='urn:import:org.moxieapps.gwt.highcharts.client'>
...
        <g:HTMLPanel styleName='{style.tight}'>
            <div class='{style.topband}'>
                <div class='{style.centerbox}'>
                    <div class='{style.miserLogo}'/>
                </div>
            </div>
            <div class='{style.centerbox}'>
                <g:VerticalPanel styleName='{style.statsBox}'>
                    <g:Label styleName='{style.sidebarLabel}' text="Projected daily cost:"/>
                    <g:Label ui:field='dailyCost' styleName='{style.dailyCost}' text="$14.80"/>
                    <m:Chart ui:field='usagePie'/>
                </g:VerticalPanel>
                <div class='{style.mapBox}'>
                    <c:MapView ui:field='mapView'/>
                </div>
            </div>
        </g:HTMLPanel>
...

ViewImpl.java excerpt (This is intended to be a pie chart in the future... but is just the demo example chart for now):

public class ViewImpl implements IsWidget, View {
    interface Binder extends UiBinder<Panel, ViewImpl> {
    }
...
    // Instantiated with a UI Factory method, below
    Chart usagePie;
...
    @UiFactory
    public Chart getUsagePie() {
        // Usage Piechart
        Chart pie = new Chart()
        .setType(Series.Type.SPLINE)
        .setChartTitleText("Lawn Tunnels")
        .setMarginRight(10);

        Series series = pie.createSeries()
        .setName("Moles per Yard")
        .setPoints(new Number[] { 163, 203, 276, 408, 547, 729, 628 });
        pie.addSeries(series);

        return pie;
    }
...

My Module html (excerpt). The highstock.js file is resolvable in my deployment container as http://127.0.0.1:8888/js/highstock.js (devmode) and localhost:8080/js/highstock.js (jetty), and the complete highstock distribution has been copied into my /js directory (but not in addition to highcharts, according to the instructions on the Moxie installation page).

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Miser</title>
    <script type="text/javascript" src="js/highstock.js"></script>
    <script type="text/javascript" language='javascript' src='Miser/Miser.nocache.js'></script>
</head>
<body>
...

The contents of my war/WEB-INF/lib. The moxie jar is included on my classpath using the following ant directive: fileset dir="${war.dir}/WEB-INF/lib" includes="*/.jar" << multiple asterisks not showing up in forum... but are correct in the ant script...

gwt-graphics-0.9.7.jar
gwt-servlet.jar
gwt-user.jar
json-org.jar
org.moxieapps.gwt.highcharts-1.3.0.jar

Thanks in advance for any insight! Regards ~Dan

[Dan Goemans]

The above stacktrace was from Chrome. When I test the same build in Firefox 7, I get a slightly different exception message:

Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError): $wnd.Highcharts[chartTypeName] is not a constructor
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
at org.moxieapps.gwt.highcharts.client.BaseChart.nativeRenderChart(BaseChart.java)
at org.moxieapps.gwt.highcharts.client.BaseChart.onLoad(BaseChart.java:1963)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:350)
at com.google.gwt.user.client.ui.AttachDetachException$1.execute(AttachDetachException.java:34)
at com.google.gwt.user.client.ui.AttachDetachException.tryCommand(AttachDetachException.java:74)
at com.google.gwt.user.client.ui.Panel.doAttachChildren(Panel.java:170)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:345)
at com.google.gwt.user.client.ui.AttachDetachException$1.execute(AttachDetachException.java:34)
at com.google.gwt.user.client.ui.AttachDetachException.tryCommand(AttachDetachException.java:74)
at com.google.gwt.user.client.ui.Panel.doAttachChildren(Panel.java:170)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:345)
at com.google.gwt.user.client.ui.AttachDetachException$1.execute(AttachDetachException.java:34)
at com.google.gwt.user.client.ui.AttachDetachException.tryCommand(AttachDetachException.java:74)
at com.google.gwt.user.client.ui.Panel.doAttachChildren(Panel.java:170)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:345)
at com.google.gwt.user.client.ui.Widget.setParent(Widget.java:475)
at com.google.gwt.user.client.ui.Panel.adopt(Panel.java:127)
at com.google.gwt.user.client.ui.ComplexPanel.add(ComplexPanel.java:97)
at com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:97)
at com.google.gwt.user.client.ui.Panel.add(Panel.java:71)
at mycorp.miser.client.MiserEntryPoint.onModuleLoad(MiserEntryPoint.java:30)