JavaScriptException: (TypeError): X.getContext is not a function

[GoogleCodeExporter]

I tried to add a SimplePlot to a GXT TabItem
Code is like:

    protected void addContent() {
        TabPanel tabs = new TabPanel();
        TabItem text = new TabItem("Text");
        TabItem plot = new TabItem("Plot");
        tabs.add(text);
        tabs.add(plot);

        panel = new ContentPanel();  
        panel.setHeaderVisible(false);
        panel.setLayout(new FlowLayout());
        text.add(panel);
        plot.add(createExample());
        add(tabs);
    }

    protected static final String[] MONTH_NAMES = { "jan", "feb", "mar", "apr",
        "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec" };

    private Widget createExample() {
        PlotModel model = new PlotModel();
        PlotOptions plotOptions = new PlotOptions();

        // add tick formatter to the options
        plotOptions.setXAxisOptions(new AxisOptions().setTicks(12)
                .setTickFormatter(new TickFormatter() {
                    public String formatTickValue(double tickValue, Axis axis) {
                        return MONTH_NAMES[(int) (tickValue - 1)];
                    }
                }));

        // create a series
        SeriesHandler handler = model.addSeries(
                        "Ottawa's Month Temperatures (Daily Average in °C)",
                        "blue");

        // add data
        handler.add(new DataPoint(1, -10.5));
        handler.add(new DataPoint(2, -8.6));
        handler.add(new DataPoint(3, -2.4));
        handler.add(new DataPoint(4, 6));
        handler.add(new DataPoint(5, 13.6));
        handler.add(new DataPoint(6, 18.4));
        handler.add(new DataPoint(7, 21));
        handler.add(new DataPoint(8, 19.7));
        handler.add(new DataPoint(9, 14.7));
        handler.add(new DataPoint(10, 8.2));
        handler.add(new DataPoint(11, 1.5));
        handler.add(new DataPoint(12, -6.6));

        // create the plot
        SimplePlot plot = new SimplePlot(model, plotOptions);

        // put it on a panel
        return plot;
    }

after clicking the Tab i get:

com.google.gwt.core.client.JavaScriptException: (TypeError): X.getContext
is not a function
 fileName:
http://localhost:8888/org.ebs3.manipulator.Manipulator/flot-0.5/jquery.flot.pack
.js
 lineNumber: 1
 stack:
j()@http://localhost:8888/org.ebs3.manipulator.Manipulator/flot-0.5/jquery.flot.
pack.js:1
D([object Object],[object Array],[object
Object])@http://localhost:8888/org.ebs3.manipulator.Manipulator/flot-0.5/jquery.
flot.pack.js:1
([object Object],[object Array],[object
Object])@http://localhost:8888/org.ebs3.manipulator.Manipulator/flot-0.5/jquery.
flot.pack.js:1
([object HTMLDivElement],[object Array],[object
Object])@jar:file:/home/stefan/.m2/repository/ca/nanometrics/gflot/0.9.1/gflot-0
.9.1.jar!/ca/nanometrics/gflot/client/jsni/PlotImpl.java:43
protected void com.google.gwt.user.client.ui.Widget.onAttach()()@:0
([object
gwt_nativewrapper_class])@jar:file:/home/stefan/.m2/repository/com/extjs/gxt/1.2
.1/gxt-1.2.1.jar!/com/extjs/gxt/ui/client/widget/ComponentHelper.java:50
static void
com.google.gwt.user.client.DOM.dispatchEvent(com.google.gwt.user.client.Event,co
m.google.gwt.user.client.Element,com.google.gwt.user.client.EventListener)([obje
ct
Event],[object HTMLLIElement],[object gwt_nativewrapper_class])@:0
([object
Event])@jar:file:/home/stefan/dev/gwt-linux-1.5.3/gwt-user.jar!/com/google/gwt/u
ser/client/impl/DOMImplStandard.java:197
@:0

    at ca.nanometrics.gflot.client.jsni.PlotImpl.create(Native Method)
    at ca.nanometrics.gflot.client.jsni.Plot$.create(Plot.java:51)
    at ca.nanometrics.gflot.client.SimplePlot.onLoad(SimplePlot.java:180)
    at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:116)

Original issue reported on code.google.com by stefan.m...@gmail.com on 21 Apr 2009 at 6:42

[GoogleCodeExporter]

Try running the application in web mode, not hosted. We've run into the same 
problem
trying a proof-of-concept and it seems that the version of Mozilla that GWT 
runs the
hosted browser in doesn't have native support for <canvas>.

https://developer.mozilla.org/en/drawing_graphics_with_canvas
http://markmail.org/message/ygra3ix2hlmu5smd

As a long term solution, the GWT team is moving to Out Of Process Hosted Mode 
(Oomph)

http://code.google.com/p/google-web-toolkit/wiki/DesignOOPHM

So this might be a broken thing for a while.

Original comment by wals...@gmail.com on 14 Jul 2009 at 8:05

[GoogleCodeExporter]

Yes, <canvas> support is an issue if you are using the Linux version of GWT. If 
you are developing on Linux 
you can temporarily skip the creation of the chart in hosted mode by wrapping 
your code with 

if(GWT.isScript() ){
  //create your chart here
}

This hack will allow you to start your application in hosted mode and the click 
the "Compile/Browse" button to 
see the chart in Firefox.

Alex

Original comment by alexjdl on 14 Jul 2009 at 8:26

[GoogleCodeExporter]

Hi,
I also have issues using gflot with ext (gwt-ext).
I tried in web mode, and it still didn't work.

* Web mode:
I tried on Firefox 3.0.14, IE 8 and Chrome 3. I get this exception:
Invalid dimensions for plot, width = 0, height = 0

* Hosted mode:
[ERROR] Unable to load module entry point class org.oda.client.MainEntryPoint 
(see
associated exception for details)
java.lang.AssertionError: An javascript error occurrerd while creating plot.
    at ca.nanometrics.gflot.client.SimplePlot.onLoad(SimplePlot.java:184)
    at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:264)
    at com.google.gwt.user.client.ui.Panel.doAttachChildren(Panel.java:165)
    at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:259)
    at com.google.gwt.user.client.ui.Widget.setParent(Widget.java:393)
    at com.google.gwt.user.client.ui.Panel.adopt(Panel.java:119)
    at com.google.gwt.user.client.ui.ComplexPanel.add(ComplexPanel.java:86)
    at com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:80)
    at com.gwtext.client.widgets.Component.render(Native Method)
    at com.gwtext.client.widgets.Component.getElement(Component.java:427)
    at com.gwtext.client.widgets.Component.getElement(Component.java:405)
    at com.google.gwt.user.client.ui.ComplexPanel.add(ComplexPanel.java:83)
    at com.google.gwt.user.client.ui.AbsolutePanel.add(AbsolutePanel.java:80)
    at org.blabla.client.MainEntryPoint.onModuleLoad(MainEntryPoint.java:26)

* Here's the code I use:

public class MainEntryPoint implements EntryPoint {
    public MainEntryPoint() {
    }

    public void onModuleLoad() {
        com.gwtext.client.widgets.Panel panel = new com.gwtext.client.widgets.Panel();
        panel.setSize(800, 600);
        panel.add(BarChartExample().createExample());
        RootPanel.get().add(panel);
    }
}

Original comment by lve...@gmail.com on 17 Sep 2009 at 4:19

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Original comment by nmr.morel on 19 Jan 2013 at 4:55

• Changed state: Invalid