How to create a "spectrum" chart using Vaadin 14+

Question

Is there a way in Vaadin 14 (or higher) to create what's called a "spectra" chart? Essentially, it's 99% identical to a "scatter" chart, except that a line is drawn from the point all the way down to the x-axis (please see figures 1 and 2 below which more or looks like a correct spectra chart.). I created a "hack" to achieve these quasi spectrum charts in Vaadin using "line charts" and by adding two "fake" points of intensity 0 to the left and to the right of my immediate point (as shown in code snippet below entitled "code snippet 1"). While my hack more-or-less works (pls see fig 1 image below), it causes a few problems: 1) it seems to make the lines appear more like bar-chart rectangles (please see fig 2) instead of points with narrow lines; 2) it seems to cause slight mistakes in the x-axis location. For example, in figure 2, the black line is to the left of the blue line; but in figure 3 (which is nothing more than the zoomed in perspective), it's to the right; and 3) it causes the x-axis to appear in the same color as the series, since my hack causes a line to appear to connect the fake right "0" of one point with the fake left "0" of the next point. (Plus, it means my chart has 3x the number of points than it needs to have, since I have two fake 0 points for every real point.)

Code snippet 1:

   private void addTheSeries(DataSeries series, final float mz, final float intensity) {
        //14.1.19
        series.add(new DataSeriesItem(mz, 0));
        series.add(new DataSeriesItem(mz, intensity));
        series.add(new DataSeriesItem(mz, 0));
    }

Figure 1:

Figure 2:

I'm using Vaadin 14.1.19 on Open jdk 11 and with Chrome on Chromebook as the browser.

Could you please also provide an example what the target looks like? — cfrick, Jul 06 '20 at 17:21
@cfrick If by "target" you meant what "it should look like", here's one example: http://lh5.ggpht.com/_NNjxeW9ewEc/TJj9JMJkYeI/AAAAAAAAC54/rUi8Q4-0-YI/s1600-h/tmp807_thumb14.jpg Essentially, even if you zoom in, the lines should be thin and should never look like a *fat* rectangle. That is, the line width is a constant and is independent of whether one has zoomed in. (Also, of course, it needs to be accurate, which is not the case in fig 1 vs fig 2 above, since the black and blue lines switched orders.) — Jonathan Sylvester, Jul 07 '20 at 12:01
@cfrick In the link above, you'll also note that the axis is not colored the same color as the series, unlike in my "hack" solution where the axis will use the color(s) of the series. — Jonathan Sylvester, Jul 07 '20 at 12:03

score 1 · Answer 1 · answered Jul 09 '20 at 15:14

I think it this case instead of using a Line type which is the default you'd benefit from using Column type. You can configure columns to be thin, configure zoomType and use axis configuration to get the extremes you want.

Chart chart = new Chart(ChartType.COLUMN);

Configuration configuration = chart.getConfiguration();
configuration.setTitle("Spectrum example");

configuration.getChart().setZoomType(Dimension.XY);

DataSeries series = new DataSeries();
series.add(new DataSeriesItem(120, 5));
series.add(new DataSeriesItem(180, 50));
series.add(new DataSeriesItem(290, 350));
series.add(new DataSeriesItem(420, 500));
series.add(new DataSeriesItem(740, 450));

PlotOptionsColumn options = new PlotOptionsColumn();
options.setPointWidth(1);
series.setPlotOptions(options);

configuration.addSeries(series);
YAxis y = configuration.getyAxis();
y.setTitle("");

configuration.getLegend().setEnabled(false);
add(chart);

Result looks like this:

And the width is kept after zooming in:

cool, I would never have thought of that; I'll try it and get back to you @Guille — Jonathan Sylvester, Jul 12 '20 at 00:42
I used this solution but while it *partly* solved the problem (the lines are always thin and they seem to preserve the right order), it caused a different problem, I think, which I have documented as a separate SO question: https://stackoverflow.com/questions/63414969/possible-bug-in-zooming-in-on-vaadin-charts-when-more-than-1-series-present — Jonathan Sylvester, Aug 17 '20 at 15:04

How to create a "spectrum" chart using Vaadin 14+

1 Answers1

Linked