I am new to vaadin and I am using timeline addon. I have integrated it in my application. But while rendering data in stacked graph it shows some problems.
In the attachment I have marked 3 circles. Red ones show that they are overlapped. Blue one is with mouse hover points. Over all it can be seen that some stacks are wide and some narrow. I cud not find how it places the stacks and how the width is decided? Is this a data problem? Can anyone help me to understand the prob?
I have used timeline demo code to integrate my datasource. I have not changed much except to populate my own data in it.
When using stacked graphs you have to be careful with your data set so that every graph you add to the Timeline have the same timestamps for the points so the graphs can properly be aligned with each other and stacked.
The width of the bars are decided based on the time interval between the points, ie. if the data set has points with a 10 minute interval then the bars will be wider than if the interval was 1 minute. If the time interval varies between points then the bars will also have a varying width which might explain the wide and narrow bars.
Overall, the Timeline tries to figure out how to draw your data set nicely but especially when stacking graphs and using bar charts you have to be very careful with the data set you provide.
Sorry, but I do think it is a bug in the bar chart implementation. I experience exactly the same problem. Attached you will find a screen shot and the sample data (Excel) used to produce the screen shot. I have marked two red circles in the screen shot. The first one, maps to the values 841, 1000, 741, 1010, 421 in the Excel sheet (rows 64 to 68). As you will notice, the 841 value is drawn with excessive width covering the 741 and 421 values. It is worth mentioning that the values are red off correct in the upper right corner. 12108.xls (19.5 KB)
Hi, these kinds of artefacts usually occur when an unsorted container is used. The timeline requires a sorted container to work properly. Does all other graph types look okay with that data set? Please check this first.
I looked at your data set but you have omitted the timestamps from it so I cannot really reproduce the issue with it.
If the problem persists what you can do is create a ticket at
dev.vaadin.com about the issue and attach the dataset with both values and timestamps. Also please attach a test case showing how you have configured the timeline. If you can make the data format something other than XLS it would be great (CSV without the thousand markers for instance).
The sample data was extracted from a database (one value per day). Both the value (first column) and the date (second column: yyyyMMdd) is in the Excel sheet. The data was added to an IndexedContainer. The
container was not explicitly sorted, since the data set was already sorted on extraction. Both the scatter- and line-graphs seems OK.
I have created a very simple maven project to demonstrate the issue. Just download the attached .gz file and run the below commands:
# tar xvfz vaadin-timline.tgz
# cd vaadin-timline
# mvn clean install
# cd vaadin-web
# mvn jetty:run
localhost:8080/admin (in browser)
The project contains the following main parts:
vaadin-plugins (module running the GWT compiler on the Timeline addon)
vaadin-web (module containing the test code)
Main.java (small test class reading the sample data from file and presenting the graph)
test.csv (sample data now in CSV format)
The browser should now show a graph similar to the one in the previous post. 12112.tgz (4.85 KB)
