Reading csv with JS/D3.js does not work right

Vaadin 6 / 7 / 8
1

Hello.

I need to make a heatmap with D3js within a Vaadin web interface. Therefor I have a MyUI.java:

...
layout.addComponent(new Label("Thank you for clicking"));
Connector c0 = new Connector();
HorizontalLayout hl = new HorizontalLayout();
hl.setId("data1");
hl.addComponent(c0);
layout.addComponent(hl);
...

a Connector.java:

import com.vaadin.annotations.JavaScript;
import com.vaadin.ui.AbstractJavaScriptComponent;
@JavaScript({"connector.js", "d3.min.js"})
public class Connector extends AbstractJavaScriptComponent{
   
}

and a connector.js:

[code]
window.com_…_Connector = function(){
alert(“Hello”);

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});
function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0]

.split(‘,’);
var lines = ;
for (var i=1; i<allTextLines.length; i++) {
var data = allTextLines[i]
.split(‘,’);
if (data.length == headers.length) {
var tarr = ;
for (var j=0; j<headers.length; j++) {
tarr.push(headers[j]
+“:”+data[j]
);
}
lines.push(tarr);
}
}
alert(lines);
}
//OR
d3.csv(“data.csv”, function(error, data){
if (error) throw error;
alert("data "+data.toString());
});
[/code]Everything works so far, but if i try to read a csv in JavaScript with plain JavaScript or with d3.csv and alert the variable containing the read file, I get the source code of the MyUI.java or more precise the html code of MyUI, which I see in the browser, when I look at the source code there.

Can anyone help me, please?
Does anyone know how to read a csv or an other file in JavaScript (and using Vaadin)?
Thank you in advance!

Kind regards,
Norma

2

Where is the data.csv file located? If it is, for example, in source code package along with your UI code, then it will not be available via a URL. You give as a parameter “data.csv”, the URL being requested is probably something like http://myhost.com/myApplicationContext/data.csv. By default, everything except /VAADIN/ in the myApplicationContext is being served by the VaadinServlet and the only thing it will give you, is a UI instance. Hence, you see the HTML content of MyUI.

The real question is, how do you serve the CSV file to the browser. There are a few approaches to this. If your data.csv is dynamically created, then I’d recommend that you add the content of the CSV in the state of the component and passing it directly to your JavaScript code. If the content is static, then you can either configure your application to contain a second servlet which provides the CSV file through a default servlet instead of the VaadinServlet. A third option is to place the CSV in the VAADIN folder (along with your theme, for example) since those files are served as-is. See
Book of Vaadin
 for more information about application resources. See
this wiki article
 for instruction on integrating JavaScript components and how to use the state to pass the CSV content.

3

Thank you very much, Kim!
I added the content of the CSV in the state of the component and that works fine.