New Add-on: Invient Charts

Flow
21

Make sure your ApplicationServlet(the one specified in web.xml) is including tags to load the supplied highcharts and jQuery.js files in the writeAjaxPageHtmlVaadinScripts method, there should be an example implementation included in the add-on zip archive.

22

So if I understand you correctly, I need to create a servlet that extends ApplicationServlet and adds the header and copy the javascript folders to my webapp?

Would be nice to have it on the add-on page :wink:

23

You can find examples under the folder invientcharts-0.8.x\demo.

24

We are simulating the issue. We will let you know on how the performance can be improved.

Thanks

25

Hi,
I’m getting the same error with Geoffrey R Rekier.
i’m using maven to compile the widget into a netbeans project. Also my web.xml contain the declaration for the servlet and the .js files are under the WebContent.
i’m testing the issue by writing some notification in the main Window class:

showNotification(“Hello !!”);
System.out.println(chart.toString());

i don’t see the notification but the chart object is created because i got this in the Tomcat output:
com.invient.vaadin.charts.InvientCharts@879860

Everything looks fine but i got a blank window!!

Any ideas please,
Regards

26

Are you deploying from netbeans IDE?

Check if your final artifact .war file contains needed javascript files.

27

Yes i’m using netbeans!
In fact, i have resolved the problem, it was about mention the right path to .js files.
i have added a point like this:

page.write(“document.write("<\/script>");\n”);

and it works!

Thank you for your response

Best Regards,

28

First off thank you very much for providing this really great add-on!

Unfortunately, I am running into an issue and I have a question regarding theming.

The charts are not displayed on first logon after Server start. If I run some chart creation, the view just does not get updated with some Labels and the chart. Upon browser refresh, the window just gets blank white.

If I don’t refresh and logout (with app.close) and login again, everything works fine and the chart gets displayed.

Error message in Vaadin Debug:


Going to create a chart.
JavaScriptException: (TypeError): Cannot read property 'Chart' of undefined
 stack: TypeError: Cannot read property 'Chart' of undefined
    at Object.Fvb [as Kd]
 (http://localhost:8080/xxxx/VAADIN/com.example.Widgetset/8A07ECC1521BFDC7C28F266CC7481579.cache.html:2993:23087)
    at Tvc (http://localhost:8080/xxxx/VAADIN/com.example.Widgetset/8A07ECC1521BFDC7C28F266CC7481579.cache.html:2095:113)
    at Object.B4b [as Kd]
 (http://localhost:8080/xxxx/VAADIN/com.example.Widgetset/8A07ECC1521BFDC7C28F266CC7481579.cache.html:3002:11934)
    at Tvc (http://localhost:8080/xxxx/VAADIN/com.example.Widgetset/8A07ECC1521BFDC7C28F266CC7481579.cache.html:2095:113)
    at Object.B4b [as Kd]
 (http://localhost:8080/xxxx/VAADIN/com.example.Widgetset/8A07ECC1521BFDC7C28F266CC7481579.cache.html:3002:11934)
    at Tvc (http://localhost:8080/xxxx/VAADIN/com.example.Widgetset/8A07ECC1521BFDC7C28F266CC7481579.cache.html:2095:113)
    at Object.B4b [as Kd]
 (http://localhost:8080/xxxx/VAADIN/com.example.Widgetset/8A07ECC1521BFDC7C28F266CC7481579.cache.html:3002:11934)
    at Object.q9b [as Kd]
 (http://localhost:8080/xxxx/VAADIN/com.example.Widgetset/8A07ECC1521BFDC7C28F266CC7481579.cache.html:3005:1095)
    at wYb (http://localhost:8080/xxxx/VAADIN/com.example.Widgetset/8A07ECC1521BFDC7C28F266CC7481579.cache.html:2675:170)
    at Object.FYb [as Kd]
 (http://localhost:8080/xxxx/VAADIN/com.example.Widgetset/8A07ECC1521BFDC7C28F266CC7481579.cache.html:2999:12397)
 arguments: Chart,
 type: non_object_property_load

Does anyone have a hint, why this happens? If I check page source, the js include section is already on the page. It is really annoying and I don’t know why it happens.

My second question regards theming. I want to apply a theme like on the highcharts demo gallery. How can this be accomplished? Should I create an additional js file containing the theme, how can I load it?

Sorry for my lack of knowledge regarding widget programming.

Thank you very much for your help!

Regards
TJ

29

So, I just found out with chrome dev tools that the js part is loaded, but the corresponding js files are empty. After logout and login, the js files have their content loaded. Could this have something to do with the document.write parts of the Servlet? Is there another way to load?

EDIT:

So I tried it with directly writing the script tags to the page.

page.write("<script language='javascript' src='./VAADIN/jquery/jquery-1.4.4.min.js'></script>\n");
page.write("<script language='javascript' src='./VAADIN/js/highcharts.js'></script>\n");
page.write("<script language='javascript' src='./VAADIN/js/modules/exporting.js'></script>\n");

This seems to work! Does this method have any drawbacks?

Thanks, regards
TJ

30

I am sorry for delayed response. More likely the issue is with relative path specified in “page.write()” method.

If your move .js files outside of VAADIN folder then you will have to make sure that the Java source file is also updated.

31

InvientCharts 0.8.3 has been released. This release includes fix for the performance issue associated with series data creation.

Let us know if the issue still persist.

Thanks

32

Hi, great addon!

Could you please add a server-side API for the global.useUTC variable? The default value doesn’t work in my application.

thanks,
Thomas

33

Hello,

i’m getting a serious problem with invient charts. In fact, it works very well with netbeans (with maven) when i use Run command.
But when i try to deploy the .war generated by netbeans into a new Tomcat server, it doesn’t work and display the famous error:

$wnd HighCharts is undefined

Any Idea please !!!

Thanks

34

Can you please elaborate on why it does not work for you?

Thanks

35

It seems to me that the issue exists with relative path of the Highcharts JavaScript files. Just to be doubly sure, check if the .war file contains Highcharts JS libraries.

You can also use Firebug to check if the Highcharts JavaScript files are loaded in the browser. It will help you fix the relative path issue.

36

I use hourly Dates that incorporate a timezone (EET in this case) in conjunction with DateTimeSeries and DateTimeAxis. When debugging on the server, the time codes are correct for all points, but InvientCharts renders all labels to UTC time by default, offsetting them by 2 hours. So a time of 00.00 becomes 22.00 the previous day.

I ‘fixed’ this by changing the default value of the ‘useUTC’ variable in the highcharts.js file from true to false:

global:{useUTC:false}
37

Has anybody been able to get this to work inside of Liferay…as a portlet? I should have probably posted this here, but instead I posted my problem/code here:

http://vaadin.com/forum/-/message_boards/view_message/423435#_19_message_423435

Woops :wink:

In short, when I add the necessary Liferay XML files (liferay-display.xml, liferay-plugin-package.properties, liferay-portlet.xml, portlet.xml), the context changes from WebApplicationContext to PortletApplicationContext2 (good for me, bad for charts), and no charts get rendered using the same code :confused: Please help!

38

Someone in the add-on ratings section posted [quote]
I’ve done chart portlets for Liferay portal using Invient Charts and Refresher within a an hour
[/quote]

Hope that person is able to help. Unfortunately, we haven’t done any Liferay integration ourselves.

39

It’s really easy to get working inside of Liferay…I think that’s what he meant :slight_smile: It’s not easy make it an actual “portlet”, e.g sending and receiving events between other portlets. Thanks, though - I’ll continue to see if I can get it to work!

40

Hi

This is my first time using vaadin and i found this awsome add on :),but i have a problem using it ,i create a vaadin project and i compile the widget,everythhing is ok till now,when i run my application ,i see the page and the tree in the left but there’s no chart!!! i’ve tried adding js ,jquery and graphics folder in the lib but nothing works,i really need your help!!!