Invient to work

I dont get any errors…everything compiles and runs fine…just the chart is not showing on page…highcharts ‘js’ directory is copied to my webcontent folder exactly like demo…also my application servlet reference below is copied from demo and page source confirms the correct tags are injected on that page.

Here is web.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app id="WebApp_ID">
	<display-name>Ezship</display-name>
	<!-- ApplicationServlet from Vaadin jar will respond to requests. -->
	<servlet>
		<servlet-name>Ezship</servlet-name>
		<servlet-class>com.jeldwen.ezship.EzShipApplicationServlet</servlet-class>
		<init-param>
			<!-- Define our application class for servlet. -->
			<param-name>application</param-name>
	    	<param-value>com.jeldwen.ezship.EzShipApplication</param-value>
		</init-param>
		<init-param>
			<param-name>widgetset</param-name>
			<param-value>com.jeldwen.ezship.widgetset.EzshipWidgetset</param-value>
			<description>Application widgetset</description>
		</init-param>
	</servlet>
	
	<!-- Make the servlet respond to all requests. -->
	<servlet-mapping>
		<servlet-name>Ezship</servlet-name>
		<url-pattern>/*</url-pattern>
	</servlet-mapping>
</web-app>

Here is class (taken from example for the most part):

	public DashboardView() {

	    addStyleName(com.jeldwen.ezship.ui.Constants.Style_DefaultView);		
		setCaption("Dashboard");		
		setSizeFull();

		
		InvientChartsConfig pieChartConfig = new InvientChartsConfig();
		pieChartConfig.getGeneralChartConfig().setType(SeriesType.PIE);
		pieChartConfig.getTitle().setText("Status");
	//	pieChartConfig.getTooltip().setFormatterJsFunc("fuction() { return '<b>'+ this.point.name + '</b>: ' + this.y + ' %'; }"  );
		
		PieConfig pie = new PieConfig();
		pie.setAllowPointSelect(true);
		pie.setCursor("pointer");
		pie.setDataLabel(new PieDataLabel(false));
		pie.setShowInLegend(true);
		pieChartConfig.addSeriesConfig(pie);
		
		InvientCharts pieChart = new InvientCharts(pieChartConfig);
		XYSeries series = new XYSeries("Status");
		LinkedHashSet<DecimalPoint> points = new LinkedHashSet<DecimalPoint>();
		points.add(new DecimalPoint(series, LoadStatus.COMPLETED.toString(), 7));
		points.add(new DecimalPoint(series, LoadStatus.FINALIZED.toString(), 8));
		points.add(new DecimalPoint(series, LoadStatus.LOADING.toString(), 5));
		points.add(new DecimalPoint(series, LoadStatus.NOT_STARTED.toString(), 12));
		points.add(new DecimalPoint(series, LoadStatus.PAUSED.toString(), 2));
		
		series.setSeriesPoints(points);
		pieChart.addSeries(series);
		pieChart.setSizeFull();
		pieChart.setHeight("400px");
		
		VerticalLayout mainLayout = new VerticalLayout();
		mainLayout.setSizeFull();
        setContent(mainLayout);
	
		addComponent(pieChart);
	

	}

Follow up…I just learned “/?debug”…awesome tool…any way it is reporting ‘JavaScriptException: (TypeError): $wnd.Highcharts is undefined’…so i still need help figuring out the set up apparently.

Another follow up…i found
http://vaadin.com/forum/-/message_boards/view_message/491477
and did what he did but it didnt work for me same error.

Have you checked with FireBug (in the Net tab) that the Highcharts .js file is loaded without errors? Does your custom servlet class write the headers to load the JS library properly?

here is page mark-up…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">html, body {height:100%;margin:0;}</style><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/Ezship/VAADIN/themes/ezship/favicon.ico" /><link rel="icon" type="image/vnd.microsoft.icon" href="/Ezship/VAADIN/themes/ezship/favicon.ico" /><title>EzShip&#32;Application</title>
</head>
<body scroll="auto" class="v-generated-body">
<script type="text/javascript">
//<![CDATA[
document.write("<script language='javascript' src='/Ezship/VAADIN/js/highcharts.js'><\/script>");
document.write("<script language='javascript' src='/Ezship/VAADIN/js/modules/exporting.js'><\/script>");
//]]>
</script>
...

here is fiddler output

Result Protocol Host URL Body Caching Content-Type Process Comments Custom

4 304 HTTP localhost:8080 /Ezship/VAADIN/js/highcharts.js 0 firefox:6024
5 304 HTTP localhost:8080 /Ezship/VAADIN/js/modules/exporting.js 0 firefox:6024 # Result Protocol Host URL Body Caching Content-Type Process Comments Custom
6 200 HTTP localhost:8080 /Ezship/VAADIN/widgetsets/com.jeldwen.ezship.widgetset.EzshipWidgetset/com.jeldwen.ezship.widgetset.EzshipWidgetset.nocache.js?1311799365441 6,065 max-age: 3600 application/javascript firefox:6024
7 304 HTTP localhost:8080 /Ezship/VAADIN/themes/ezship/styles.css 0 firefox:6024
8 304 HTTP localhost:8080 /Ezship/VAADIN/widgetsets/com.jeldwen.ezship.widgetset.EzshipWidgetset/9089AFF127E75FE691DDBA61E851CA01.cache.html 0 firefox:6024

So…it would appear all is well…but something MUST be missing…

Well…I sure hope this helps at least one other person…the Jquery.js had a typo !!! once that was fixed all was well…all works now. Thanks for those that responded.

All,
After fighting with the setup of Invient Charts, I finally got it working. Thanks to all the other posts, bits of this information was scattered through many posts. So I thought I’d pull all the relevant points into one place.

This solves the

TypeError: $wnd.Highcharts not defined error

, blank pages for charts, etc.

The steps to follow are these:

  1. Copy the latest invientcharts.jar into your /WEB-INF/lib directory
  2. Make sure you download the jQuery.js from the jquery.com site and the highcharts.js from highcharts.com
  3. Note: for the download, esp. jquery.js, I had to wait for the JavaScript text to load in the browser, then right click and Save As…
  4. Create an child class of ApplicationServlet (see below for example)
  5. Change the web.xml file to reference YOUR ApplictionServlet class
  6. Clean your Tomcat working directory (Eclipse: Sever tab, right click then ‘Clean Tomcat Work Directory…’
  7. Restart your Tomcat instance and use ?restartApplication as a parameter to your context


JavaScript location:

I found through trial and error, as others have posted, that putting the JavaScript in the VAADIN sub-directory of your Context works, other places do not.

In addition, you need to load the JavaScript in the order given: 1) jQuery THEN 2) Highcharts otherwise it won’t work.


Please Note
: In the code below, you’ll need to make sure you’ve got the right jQuery version number. I believe highcharts.js requires v1.4.4 and above.


Sample Application Servlet class:


package <your package name>;

import java.io.BufferedWriter;
import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;

import com.vaadin.Application;
import com.vaadin.terminal.gwt.server.ApplicationServlet;
import com.vaadin.ui.Window;



@SuppressWarnings("serial")
public class <Your Class Name> extends ApplicationServlet
   {
   
   
   protected void writeAjaxPageHtmlVaadinScripts(Window window, String themeName, Application application,
         BufferedWriter page, String appUrl, String themeUri, String appId, HttpServletRequest request)
         throws ServletException, IOException
      {
      page.write("<script type=\"text/javascript\">\n");
      page.write("//<![CDATA[\n");
      page.write("document.write(\"<script language='javascript' src='" + request.getContextPath() + "/VAADIN/jquery/jquery-1.7.1.min.js'><\\/script>\");\n");
      page.write("document.write(\"<script language='javascript' src='" + request.getContextPath() + "/VAADIN/highcharts/highcharts.js'><\\/script>\");\n");
      page.write("document.write(\"<script language='javascript' src='" + request.getContextPath() + "/VAADIN/highcharts/modules/exporting.js'><\\/script>\");\n");
      page.write("//]]>\n</script>\n");
      super.writeAjaxPageHtmlVaadinScripts(window, themeName, application, page, appUrl, themeUri, appId, request);
      }


   }

Hope this helps others get the benefits of invient Charts easier.
Regards,
Anthony

Thank you very much Anthony,

Is this the same process we use if we want to integrate any Jquery Library or other external JS libraries?

Hi warsame bashir,
I would imagine so, I’m no Vaadin expert, but certainly it will LOAD the JavaScript, how you interact with the library is beyond my skills I am afraid! Hope that helps a little!

If someone with more knowledge could chip in here that would be great.
Thanks,
Anthony

Hi:

Thank you very much for your post…I have three doubts though,

1.- The jquery file goes directly in the WebContent/VAADIN folder, or under WebContent/VAADIN/widgetsets?
2.-Where does the highcharts folders go?? the unzipped downloaded file correspond to 4 folder and an index file
3.- What do you mean by “Restart your Tomcat instance and use ?restartApplication as a parameter to your context”?

regards, and thank you in advance for all your help

Hugo

Hi Hugo,
My structure is like this:


VAADDIN \
         \jquery
         \highcharts

As long as the directory structure matches your Servlet configuration, you’ll be fine.

This is what mine looks like:


   ...
   protected void writeAjaxPageHtmlVaadinScripts(Window window, String themeName, Application application,
         BufferedWriter page, String appUrl, String themeUri, String appId, HttpServletRequest request)
         throws ServletException, IOException
      {
      page.write("<script type=\"text/javascript\">\n");
      page.write("//<![CDATA[\n");
      page.write("document.write(\"<script language='javascript' src='" + request.getContextPath() + "/VAADIN/jquery/jquery-1.7.1.min.js'><\\/script>\");\n");
      page.write("document.write(\"<script language='javascript' src='" + request.getContextPath() + "/VAADIN/highcharts/highcharts.js'><\\/script>\");\n");
      page.write("document.write(\"<script language='javascript' src='" + request.getContextPath() + "/VAADIN/highcharts/modules/exporting.js'><\\/script>\");\n");
      page.write("//]]>\n</script>\n");
      super.writeAjaxPageHtmlVaadinScripts(window, themeName, application, page, appUrl, themeUri, appId, request);
      }
...

HTH,
Anthony

Thanks anthony, your last posts really helped me, I could finally use the charts in vaadins, something that had me really frustrated…

Hugo

Anthony, thank you for the very helpful post!

I got Invient to work in a CDI-Utils based project, and the refresher is working too. Thanks to your help, it was a snap to install it and get it working. Can’t thank you enough!

Hi Anthony,

Pleasae help me in executing the invient charts.I followed your steps but failed to display execute the project either as servlet and also as portlet.

MyServlet code is

public class MyServletClass extends ApplicationServlet
{

   protected void writeAjaxPageHtmlVaadinScripts(Window window, String themeName, Application application,
         BufferedWriter page, String appUrl, String themeUri, String appId, HttpServletRequest request)
         throws ServletException, IOException
      {
      page.write("<script type=\"text/javascript\">\n");
      page.write("//<![CDATA[\n");
      page.write("document.write(\"<script language='javascript' src='" + request.getContextPath() + "/VAADIN/jquery/jquery-1.4.4.min.js'><\\/script>\");\n");
      page.write("document.write(\"<script language='javascript' src='" + request.getContextPath() + "/VAADIN/highcharts/highcharts.js'><\\/script>\");\n");
      page.write("document.write(\"<script language='javascript' src='" + request.getContextPath() + "/VAADIN/highcharts/modules/exporting.js'><\\/script>\");\n");
      page.write("//]]>\n</script>\n");
      super.writeAjaxPageHtmlVaadinScripts(window, themeName, application, page, appUrl, themeUri, appId, request);
      }

}

I copied the demo code from invient charts and try to execute it by compiling widgetsets.Compiling widgetsets is made succesful.But,Unable to display URL

http://localhost:8080/MyChart------------Result::Page cannot be displayed…

I didnot understood contextparameter in your suggestion…Should I need to declare in web.xml…Could you please suggest me please.I’m strucking since many days here…

Even,I tried to execute as portlet but,it is generating blank portlet…Please help me in any one of context.Please
THanks

Krrish
12333.jpg

Is there a way to hide a InvientChart NumberYAxis? The yaxis is meaningless on logic analyzer display.

I know this is an old question. I just write the following fix only for those who just start playing with Invient:
the js files really needs to be put inside of VAADIN folder as we already know fromThomas Mattsson. Thanks to him!
But I guess the correct fix in the wrapper servlets code is: “./VAADIN/jquery” (instead of “/VAADIN/jquery”)

Thanks Anthony really helped us on our project.