Vaadin Charts not neing portrayed

Flow
1

Dear all,

I’m trying to use Vaadin Charts on a legacy Vaadin application (6.8.12) developed on NetBeans. I have followed the instructions in
this tutorial
 and the both the widgetset and the overall project compile without problems. Unfortunatelly, no chart objects are portrayed in the web pages at run time; this example, for instance, does not show a thing:


protected Component getChart() {
        Chart chart = new Chart(ChartType.BAR);

        Configuration conf = chart.getConfiguration();

        conf.setTitle("Historic World Population by Region");
        conf.setSubTitle("Source: Wikipedia.org");

        XAxis x = new XAxis();
        x.setCategories("Africa", "America", "Asia", "Europe", "Oceania");
        x.setTitle((String) null);
        conf.addxAxis(x);

        YAxis y = new YAxis();
        y.setMin(0);
        Title title = new Title("Population (millions)");
        title.setVerticalAlign(VerticalAlign.HIGH);
        y.setTitle(title);
        conf.addyAxis(y);

        Tooltip tooltip = new Tooltip();
        tooltip.setFormatter("this.series.name +': '+ this.y +' millions'");
        conf.setTooltip(tooltip);

        PlotOptionsBar plot = new PlotOptionsBar();
        plot.setDataLabels(new Labels(true));
        conf.setPlotOptions(plot);
        conf.setLegend(null);

        conf.disableCredits();

        List series = new ArrayList();
        series.add(new ListSeries(107, 31, 635, 203, 2));
        conf.setSeries(series);

        chart.drawChart(conf);

        return chart;
    }

So far the only strange thing I found is this message in the debug window regarding HighCharts:


JavaScriptException: (String): Highcharts error #16: www.highcharts.com/errors/16
Processing time was 140ms for 7645 characters of JSON
Referenced paintables: 34

I’ve searched for similar errors but haven’t found anything yet.

Any hints on what may be going wrong would be helpful. Thank you.

2

Looking at the
error description
, somehow the HighCharts is loaded twice. Just putting two charts in the same page doesn’t cause that, so I don’t know what could cause the situation. Are you embedding the Vaadin app in a page? Running in a portal?

3

Hi Marko, thank you for the reply. This is just a web page, a panel, some layouts, labels and a chart, just to test it.

Is there anything else I could post to detail the problem?

Thank you.

4

I think his question was more aimed towards whether you are accessing the Vaadin application directly from the server (server:port/yourapp), if it is embedded in a html page (as described
here
) or if you use some type of portal service (like for example liferay).

What sounds a bit weird to me is the part with “both the widgetsets” in regards to “HighCharts is loaded twice” what Marko said but i’m neither a Charts,Highcharts nor a Netbeans expert (Not really using any of them).

5

Yes, that’s the way I am acessing it. The web page is not embedded.

[quote=Marius ReinwaldWhat sounds a bit weird to me is the part with “both the widgetsets” in regards to “HighCharts is loaded twice” what Marko said but i’m neither a Charts,Highcharts nor a Netbeans expert (Not really using any of them).
[/quote]

There is only one widgetset in the project, and I don’t think there should be more than one. But I’m no expert on Vaadin either :slight_smile:

6

It’s hard to say what could be wrong. I don’t think it should be a NetBeans problem as such, except maybe there’s something odd in the project, like it doesn’t actually use the compiled widget set? Check the request log (with Firebug or some other tool) and see that the correct widget set and other things are loaded correctly.

7

Following Marko’s sugestion I went checking the http requests made by the app. There are only two that seem relevant, the widgetset and the Highcharts.js:

http://localhost:8080/MyApp/VAADIN/widgetsets/com.crte.MyApp.widgetset.MyAppWidgetSet/com.crte.MyApp.widgetset.MyAppWidgetSet.nocache.js?1379508015036

http://localhost:8080/MyApp/js/highcharts.js

And here’s the contents of the Script tab:


<!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="/MyApp/VAADIN/themes/MyApp/favicon.ico" /><link rel="icon" type="image/vnd.microsoft.icon" href="/MyApp/VAADIN/themes/MyApp/favicon.ico" /><title>MyApp&#32;&#45;&#32;Bienvenue&#32;dans&#32;l&#39;outil&#32;&#34;MyApp&#34;</title>
</head>
<body scroll="auto" class="v-generated-body">
<script type="text/javascript">
//<![CDATA[
document.write("<script language='javascript' src='./jquery/jquery-1.4.4.min.js'><\/script>");
document.write("<script language='javascript' src='./js/highcharts.js'><\/script>");
document.write("<script language='javascript' src='./js/modules/exporting.js'><\/script>");
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
if(!vaadin || !vaadin.vaadinConfigurations) {
if(!vaadin) { var vaadin = {}}
vaadin.vaadinConfigurations = {};
if (!vaadin.themesLoaded) { vaadin.themesLoaded = {}; }
vaadin.debug = true;
}
vaadin.vaadinConfigurations["MyAppApp-1839652626"]
 = {appUri:'/MyApp/App', standalone: true, themeUri:"/MyApp/VAADIN/themes/MyApp", versionInfo : {vaadinVersion:"6.8.12",applicationVersion:"NONVERSIONED"},"comErrMsg": {"caption":"Communication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null},"authErrMsg": {"caption":"Authentication problem","message" : "Take note of any unsaved data, and <u>click here<\/u> to continue.","url" : null}};
//]]>
</script>
<iframe tabIndex='-1' id='__gwt_historyFrame' style='position:absolute;width:0;height:0;border:0;overflow:hidden;' src='javascript:false'></iframe>
<script language='javascript' src='/MyApp/VAADIN/widgetsets/com.crte.MyApp.widgetset.MyAppWidgetSet/com.crte.MyApp.widgetset.MyAppWidgetSet.nocache.js?1379508015036'></script>
<script type="text/javascript">
//<![CDATA[
if(!vaadin.themesLoaded['MyApp']
) {
var stylesheet = document.createElement('link');
stylesheet.setAttribute('rel', 'stylesheet');
stylesheet.setAttribute('type', 'text/css');
stylesheet.setAttribute('href', '/MyApp/VAADIN/themes/MyApp/styles.css');
document.getElementsByTagName('head')[0]
.appendChild(stylesheet);
vaadin.themesLoaded['MyApp']
 = true;
}
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
setTimeout('if (typeof com_crte_MyApp_widgetset_MyAppWidgetSet == "undefined") {alert("Failed to load the widgetset: /MyApp/VAADIN/widgetsets/com.crte.MyApp.widgetset.MyAppWidgetSet/com.crte.MyApp.widgetset.MyAppWidgetSet.nocache.js?1379508015036")};',15000);
//]]>
</script>
<div id="MyAppApp-1839652626" class="v-app v-theme-MyApp v-app-MyApp" ><div class="v-app-loading"></div></div>
<noscript>You have to enable javascript in your browser to use an application built with Vaadin.</noscript></body>
</html>

I don’t see anything strange here…

Thanks for helping.

8

Why does the page include loader code for HighCharts? The Vaadin servlet does not normally add those and as far as I know, Charts loads HighCharts dynamically in the widget set. Are you maybe also using Invient Charts, which also uses HighCharts?

9

Hi again Marko. This project used Invient Charts at some point in the past, but it is no longer included in the library path, nor in the widgetset. But this could indeed explain the problems I’m having. I can’t find any references in the code to Invient Charts, but I don’t know exactly all the places I should look into.

Thank you for helping.

10

I don’t know about Invient Charts installation, but it might require that the extra headers to load HighCharts are written in the Vaadin servlet or something.

11

Thank you very much Marko, that was exactly the case. There was this line in the Servlet.java file:

page.write("document.write(\"<script language='javascript' src='./js/highcharts.js'><\\/script>\");\n");

Once I removed it the charts started appearing. This bit of code was probably already there when I started working on the project.

Thanks to all for the replies.