Invient Charts and Touchkit

I’m trying to use Invient Charts for an application using Touchkit.
This is the class which uses Invient Charts:

================================================
public class StatisticheView extends NavigationView {
private List dati;
private BeanItemContainer datiContainer;
private VerticalLayout h;

public StatisticheView() {
	super();
	setCaption("Statistiche");
	datiContainer = new BeanItemContainer<DatiStatisticiDTO>(DatiStatisticiDTO.class);
}

@Override
public void attach() {
	super.attach();
	makeUI();
}

private void makeChart() {
	InvientChartsConfig config = new InvientChartsConfig();
	config.getGeneralChartConfig().setType(SeriesType.COLUMN);
	config.getTitle().setText("STATISTICHE DI VENDITA");
	// Asse delle x (orizzontale)
	CategoryAxis xAxis = new CategoryAxis();
	xAxis.setTitle(new AxisTitle("Cod.Articoli"));
	List<String> codici = new ArrayList<String>();
	List<Double> quantita = new ArrayList<Double>();
	double max = 0;
	for (DatiStatisticiDTO dto : dati) {
		codici.add(dto.getDlarti());
		if (dto.getQuantita() > max) {
			max = dto.getQuantita();
		}
		quantita.add(new Double(dto.getQuantita()));
	}
	xAxis.setCategories(codici);
	LinkedHashSet<XAxis> xAxisSet = new LinkedHashSet<InvientChartsConfig.XAxis>();
	xAxisSet.add(xAxis);
	config.setXAxes(xAxisSet);
	// Asse dell y (verticale)
	NumberYAxis yAxis = new NumberYAxis();
	yAxis.setMin(0.0);
	yAxis.setMax(max);
	yAxis.setTitle(new AxisTitle("N.Scelte"));
	yAxis.getTitle().setAlign(AxisTitleAlign.HIGH);
	LinkedHashSet<YAxis> yAxisSet = new LinkedHashSet<InvientChartsConfig.YAxis>();
	yAxisSet.add(yAxis);
	config.setYAxes(yAxisSet);
	// Bars
	ColumnConfig colConfig = new ColumnConfig();
	colConfig.setPointPadding(0.2);
	colConfig.setBorderWidth(0);
	config.addSeriesConfig(colConfig);

	// Chart vera e propria
	InvientCharts chart = new InvientCharts(config);
	XYSeries serie = new XYSeries("Nome");
	LinkedHashSet<DecimalPoint> punti = new LinkedHashSet<InvientCharts.DecimalPoint>();
	for (Double d : quantita) {
		punti.add(new DecimalPoint(serie, d));
	}
	serie.setSeriesPoints(punti);
	chart.addSeries(serie);
	chart.setStyleName("v-chart-min-width");
	chart.setSizeFull();
	h.removeAllComponents();
	h.addComponent(chart);
	h.requestRepaint();
}

private Table makeTable() {
	Table table = new Table("ORDINI");
	table.setImmediate(true);
	table.setContainerDataSource(datiContainer);
	table.setVisibleColumns(new Object[] { "ordi", "dlarti", "dldesc", "quantita" });
	table.setColumnHeaders(new String[] { "ORD", "COD.ART.", "DESCRIZIONE", "N.SCELTE" });
	return table;
}

private void makeUI() {
	List<TipiTessuto> scelte = Arrays.asList(TipiTessuto.values());
	ComboBox tipo = new ComboBox("Tipo", scelte);
	tipo.setInputPrompt("Sceglere");
	tipo.setFilteringMode(Filtering.FILTERINGMODE_OFF);
	tipo.setImmediate(true);
	tipo.addListener(new Property.ValueChangeListener() {

		@Override
		public void valueChange(final ValueChangeEvent event) {
			Object p = ((ComboBox) event.getProperty()).getValue();
			TipiTessuto t = (TipiTessuto) p;
			if (t == null) {
				return;
			}
			dati = PrismaDBContainer.getInstance().caricaDatiStatistici(t.getTipo());
			if (!datiContainer.getItemIds().isEmpty()) {
				datiContainer.removeAllItems();
			}
			datiContainer.addAll(dati);
			makeChart();
		}
	});
	setRightComponent(tipo);
	VerticalSplitPanel split = new VerticalSplitPanel();
	split.setSizeFull();
	split.setSplitPosition(50, Sizeable.UNITS_PERCENTAGE);
	split.setLocked(true);
	split.setMargin(true);
	Table table = makeTable();
	split.setFirstComponent(table);
	table.setSizeFull();
	h = new VerticalLayout();
	h.setSpacing(true);
	h.setMargin(true);
	h.setSizeFull();
	split.setSecondComponent(h);
	setContent(split);
}

}

I’ve changed my servlet class:

@SuppressWarnings(“serial”)
public class MostreApplicationServlet extends TouchKitApplicationServlet {

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

}

and of course changed my web.xml file:

<?xml version="1.0" encoding="UTF-8"?> MostreNew Vaadin production mode productionMode false Mostrenew Application it.prismatdi.mostre.MostreApplicationServlet Vaadin application class to start application it.prismatdi.mostre.MostreApplication Application widgetset widgetset it.prismatdi.mostre.widgetset.MostrenewWidgetset Mostrenew Application /* index.html index.htm index.jsp default.html default.htm default.jsp ============================================================= I've copied in WebContent the library JQuery and Highchart. But anything happens. No chart on the screen. It's possible to use InvientCharts inside Touchkit? Any ideas, please?

Just a guess, but try modifying your servlet class according to my post
here
.

I have to point out that Invient is quite resource heavy, and might not run all that well on mobile hardware (or software). Haven’t tested it myself, so what do I know :slight_smile:

It works perfectly also on iPad.
Thanks a lot

Great, good to know! :slight_smile:

I encountered the same problem with you,could you tell me how you solve it ? Thanks a lot!