GWT-Highcharts doesn't work with SmartGWT 3.0??

[brunojcm]

I know it's weird to say, as I know the showcase itself is using SmartGWT, but I couldn't make GWT-Highcharts 1.5.0 work properly with SmartGWT 3.0 at all... :(

I'm getting a similar error of the reported on other thead:

Uncaught JavaScript exception [TypeError: h is undefined] in http://127.0.0.1:8888/js/highcharts.js, line 187
Uncaught JavaScript exception [TypeError: h is undefined] in http://127.0.0.1:8888/js/highcharts.js, line 187
Uncaught JavaScript exception [TypeError: h is undefined] in http://127.0.0.1:8888/js/highcharts.js, line 187
Uncaught JavaScript exception [TypeError: h is undefined] in http://127.0.0.1:8888/js/highcharts.js, line 187
Uncaught JavaScript exception [TypeError: h is undefined] in http://127.0.0.1:8888/js/highcharts.js, line 187

This message appears a lot of times, and I have a lot of features not working, like point tooltips not appearing, axis range recalculation not working, etc. The chart appears, but it's kind of inoperant. I'm testing with the "Dual Axis, clicable points" showcase project.

I followed the User guide a million times (almost recorded all steps), and also tried to downgrade GWT-Highcharts to 1.4.0 (together with Highcharts JS's), no luck.

My last try was to create a pure GWT-only project from scratch and setup GWT-Highcharts, and it works prefectly. So I get this working project and put the following (together with the smartgwt jar):

<inherits name="com.smartgwt.SmartGwt"/>

And averything is broken again... a lot of TypeError when moving the mouse over the chart...

Any ideias?

[brunojcm]

Attaching the example project I mentioned before. The module is inheriting from SmartGwt, if you comment that line everything works.
Any help is really appreciated, otherwise I'll need to move to another chart framework, and it is very sad....

[Shawn Quinn]

Interesting. I haven't actually tried SmartGWT 3.0 yet (the Showcase application is a SmartGWT 2.5 application). We are likely going to move one of our other projects that uses GWT Highcharts to SmartGWT 3.0, so we'll see if we run into similar issues there. Did you happen to try this with SmartGWT 2.5 or earlier? (Wondering if we can be confident that the problem you're seeing is specific to SmartGWT 3.0, or if you've tickled something more general between the Highcharts JS file and SmartGWT.)

At first blush though, the error you're seeing there appears to be an issue in the Highcharts javascript itself. Can you try switching your source file to use the "highcharts.src.js" file (instead of "highcharts.js") and see if you can identify a more specific line of code within Highcharts that is having trouble? I realize that you're saying it works fine when the SmartGwt module isn't inherited, but I'm hoping if we identify what in Highcharts itself is having trouble that we'll be pointed in the right direction.

[brunojcm]

I did further tests. First, follows the error using the source js:

Uncaught JavaScript exception [Uncaught TypeError: Cannot read property 'undefined' of undefined] in http://127.0.0.1:8888/js/highcharts.src.js, line 11362

A short code snippet is (the error is on replacement = obj[prop];):

            // Automatic replacement
            } else {
                                replacement = obj[prop];
            }

An the weird result I got is that the error also happens with SmartGWT 2.5, which is a kind of paradox, since your demo works. I'm completely lost about what would be the next step to fix this issue...

Can you provide the full code of your example? Or at least the html and gwt.xml?

[Shawn Quinn]

Just tried the source code from your "Highcharts_gwt_test.java" file here and it ran without trouble, even after I included the smartgwt module into the app. I didn't try and import everything from your project into my test application, but one thing I did notice was that I couldn't find where you were setting the "isomorphicDir" variable (which I'd though was a requirement for SmartGWT to work - but maybe not.)

You can find the full source code for a version of the showcase app (although a bit dated) here:

https://sourceforge.net/p/gwt-highcharts/discussion/general/thread/e45c6cb8/

For easy reference, here's the way the Showcase application sets up the GWT module:

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.0//EN"
        "http://google-web-toolkit.googlecode.com/svn/releases/2.0/distro-source/core/src/gwt-module.dtd">
<module>

    <inherits name='com.google.gwt.user.User'/>
    <inherits name="org.moxieapps.gwt.highcharts.Highcharts"/>

    <inherits name="com.smartgwt.SmartGwtNoScript"/>
    <script src="sc/modules/ISC_Core.js"/>
    <script src="sc/modules/ISC_Foundation.js"/>
    <script src="sc/modules/ISC_Containers.js"/>
    <script src="sc/modules/ISC_Grids.js"/>
    <script src="sc/modules/ISC_Forms.js"/>
    <script src="sc/modules/ISC_DataBinding.js"/>

    <inherits name="com.smartclient.theme.enterprise.Enterprise" />

    <entry-point class='org.moxieapps.gwt.highcharts.showcase.client.Showcase'/>

</module>

The HTML page that hosts the Showcase application is assembled on the server dynamically, but it ends up looking like this by the time the browser sees it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Moxie Apps GWT Highcharts Showcase</title>
    <link rel="stylesheet" href="css/showcase.css">
    <script type="text/javascript" language="javascript">
        var isomorphicDir = "org.moxieapps.gwt.highcharts.showcase.Showcase/sc/";
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">!window.jQuery && document.write('<script src="/js/jquery-1.5.2.min.js"><\/script>');</script>
    <script type="text/javascript" src="js/highstock.src.js"></script>
    <script type="text/javascript" src="js/highcharts-more.js"></script>

    <script type="text/javascript" src="js/modules/exporting.js"></script>
</head>
<body>
    <div id="showcaseContainer">
        <div id="loadingContainer">
            <table border="0" cellpadding="8" cellspacing="0">
                <tr>
                    <td>
                        <img border="0" width="64" height="64" src="images/animated/progress_large.gif" alt="Loading..."/>
                    </td>
                    <td id="loadingMessage">
                        Loading showcase chart examples...
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <script type="text/javascript" language="javascript"
            src="org.moxieapps.gwt.highcharts.showcase.Showcase/org.moxieapps.gwt.highcharts.showcase.Showcase.nocache.js"></script>
</body>
</html>

[brunojcm]

Good news!
Although I still don't know how your demo works, The highcharts.js really has an issue when used together with SmartGWT. The problem was the way the code iterates over an array used inside the method that renders the tooltip. Consider the code below:

    // loop over the variables defined on the form {series.name}, {point.y} etc
    for (i in match) {
        key = match[i];

'match' is an array and when there is no SmartGWT around this array has only the elements the method is supposed to iterate over. But when SmartGWT is inherited, this array has these normal elements plus a lot of stuff (seriously, it's kind of magic to me) and this other stuff breaks the code, as they are not expected. There are some firebug screen-shots attached to help clarifying.

I fixed the code iterating using a simple dummy-temp-var for, like this:

    // loop over the variables defined on the form {series.name}, {point.y} etc
    for (i = 0; i < match.length; i++) {
        key = match[i];

Could you submit a patch to Highcharts? I'm not used to do that.

[Shawn Quinn]

Oh, interesting. The one thing I hadn't tried when I pulled in your Java code was switching to the same version highcharts JS file you were using, and after I did that I am now seeing a "TypeError: prop is undefined" error. Can you try switching to use the "highstock.src.js" file (instead of the "highcharts.src.js" file) and wee if that clears up the issue you're seeing? In the meantime, I'll see if I can get some clarity on what may be wrong with the 2.3.3 version of the Highcharts JS file for the use case you're trying.

[brunojcm]

Sorry, I posted before see your post.

Well, I can't understand how my example could work for you... What did you mean by "I didn't try and import everything from your project into my test application"? Have you merged my example to your project to test or run is "as is"?

I tried this on Linux, Windows, Firefox, Chrome, IE.. every system combination I have!

Anyway, I could fix the Javascript and if you think it's enough and Highcharts will accept the patch, I will consider this as fixed. If you don't thing it's reasonable, just let me know and I will keep investigating...

[Shawn Quinn]

Awesome (sorry your previous post came in while I was running my other test that resulted in my last post, so I'm just seeing your updated post now.)

Maybe that's an issue in the Highcharts JS file but not in the Highstock JS file (which is what the Showcase app uses). Can you confirm if you switch to include the "highstock.js" file instead that clears up the issue?

[Shawn Quinn]

Ok, dug into this a bit more, and I found the difference. The most recent version of Highcharts only does the following (which doesn't work):

} else {
    replacement = obj[prop];
}

Whereas Highstock does the following instead (which does work):

} else if(typeof prop != "undefined") {
    replacement = obj[prop];
}

And, as you alluded to earlier, SmartGWT may be throwing some some additional things in the prototype, which is causing at least one of the "prop" instances to be undefined.

So, if you can still confirm that things work correctly for you when you use the highstock.js file instead of highcharts.js that'd be great. I'll follow up with the Highsoft guys to see if they agree with our assessment and can get that fixed in an upcoming release.

[Shawn Quinn]

For those that are curious, the related Highcharts post is here:

http://highslide.com/forum/viewtopic.php?f=9&t=24201

[brunojcm]

Shawn, I tested with last Highstock and got the same error, the code seems exactly the same... Maybe the version you use is different.

About the fix, don't you think it's better to change the for to iterate over the right elements instead of check if it's different of "undefined"?

Anyway, thanks for your quick answers! I hope we can find the best way to fix it.

[Shawn Quinn]

Glad to help, and I appreciate your willingness to help diagnose this as well as I definitely want to see us eliminate these kinds of obstacles so that "things just work" when folks go to use GWT Highcharts.

(Regarding the fix: I don't believe the properties being iterated over on the "match" object here are just numbers, so I don't think treating it like an array is the correct approach. There may be a more efficient fix than adding the "typeof" check though, but I'll let the Highsoft guys decide how they'd best like to resolve this. We had a similar issue with GWT compatibility in general where they were using a type check technique that didn't work across different window contexts, which they then researched and found what they believed to be the most efficient approach. So, I'm hoping for a similar result in this case.)

[Shawn Quinn]

One more note on this: I discovered that that highstock JS file we were using in our test environment was actually a customized version which didn't exhibit this problem. So, this does appear to be a problem in both the latest Highcharts and Highstock library when trying to using a custom tooltip formatter and SmartGWT at the same time (not sure which version of Highcharts this problem was introduced in). The fix I noted above will resolve the issue if you run into this scenario. I'm also trying to work with the Highsoft folks to get this patched in the official Highcharts/Highstock release JS files going forward. More details here:

http://highslide.com/forum/viewtopic.php?f=9&t=24201

[brunojcm]

Ok, Thanks again!
Let's keep talking on the highcharts topic.

[Pete Boysen]

I have been using SmartGWT3.0 and HighCharts1.4 since August without any problems. I haven't tried HC1.5 yet but will probably do so next week. Does this have to do with some feature you are using in HighCharts?

[Shawn Quinn]

The title of this thread is a bit misleading. I don't believe there is any specific issue when running GWT Highcharts inside of a SmartGWT 3.0 project (at least not that I've been made aware of.) However, it does appear that there may be a compatibility issue when custom tooltip formatter's are used between the SmartClient JS libraries that come with SmartGWT and the core highcharts (or highstock) JS file. The compatibility issue looks like it affects SmartGWT 2.x projects as well. The showcase projects works around the issue by adding the "typeof prop != 'undefined'" check noted above, so that is currently the proposed work around. However, I've also submitted this over to the Highsoft guys to see if they can get it potentially fixed in a future release of Highcharts and Highstock.

In summary, the particular issue we found here is only an issue if you're using a custom tooltip formatter within a SmartGWT project, so you don't need to worry about this if you're not using that feature.

[Shawn Quinn]

Just a quick update on this that the Highsoft guys have confirmed this issue, and it sounds like they'll be including a fix in the Highcharts 3.0 release. More details here:

http://highslide.com/forum/viewtopic.php?f=9&t=24201&p=93648