Vaadin Charts add-on v1.0.0: best/easiest way to show vertical bands?

Hi forum,

Using the Vaadin Charts addon 1.0.0, I’d like to have vertical alternating bands to be able to visually group days by week.
My categories (x-axis) values run from 1 to 90 (inclusive) and I’d like to see each day nr on the x-axis.
So the shading should be for day 1 to 7 (inclusive), then from 14 to 21 etc. I don’t care whether the first bar is white or gray, just that they are alternating.

When I use plotbands, like this:

PlotBand plotBands = new PlotBand[3]
;
PlotBand plotBand = new PlotBand(-1, 6, new com.vaadin.addon.charts.model.style.SolidColor(0xCC, 0xCC, 0xCC)); // Light silver gray
PlotBand plotBand2 = new PlotBand(13, 20, new com.vaadin.addon.charts.model.style.SolidColor(0xCC, 0xCC, 0xCC));
PlotBand plotBand3 = new PlotBand(27, 34, new com.vaadin.addon.charts.model.style.SolidColor(0xCC, 0xCC, 0xCC));
plotBands[0]
= plotBand;
plotBands[1]
= plotBand2;
plotBands[2]
= plotBand3;
xAxis.setPlotBands(plotBands);

I get what you see in attachment 1: alternating_using_plotbands.jpg
Strange thing: why do all the from values have to start at the ‘first value -1’? So the first plotband should start at 0, but I have to specify -1. The second should start at 14 but I have to specify 13 etc
And, disadvantage of this is that you have to construct all the plotbands yourself dynamically.

When I use ticks + alternate grid color, like this:

xAxis.setTickInterval(7); // If set to 1, it alternates per day, using 7 alternates per 7 days. This one causes only to show day 1, 8, 15, 22 etc
xAxis.setMinorTickInterval(1); // Not applicable here? Does not cause a day tick to show
xAxis.setAlternateGridColor(new com.vaadin.addon.charts.model.style.SolidColor(0xCC, 0xCC, 0xCC));

I get what you see in attachment 2: alternating_using_ticks.jpg
This one is a lot easier to use (no need to compute where to put the vertical gridbars), so has my preference.
But a couple of things are not ok yet:

  • It starts at day 1 instead of day 0
  • The day numbers are gone, it only shows the start of a new week (1, 8, 15, etc)
    Is there a way to get what I want using the alternate grid and/or ticks, thus that it looks like the first screenshot. Documentation is not too extensive on this… tried quite a few combinations of setters on xAxis.

Regards,
Marco
12862.jpg
12863.jpg

How strange is it that two people within 24 hours would have the almost exact same question, I was just coming here to ask the same thing. It seems more than possible (given the progress you’ve made in your post), it’s almost like some secret tip has been left out :slight_smile: I will follow this thread with interest and keep playing around with it, if I find anything useful, I will post back

I started out to present similar problems that I was experiencing, but in the course of preparing my code for a wider audience on the internet, I figured my problem out.
So my use case is a little bit different, but it seems like there are some commonalities. I’m not sure how simple it will be to adapt my use case to your specific problem. Here’s an overview of what I’m doing.
My X-Axis constitutes 3 DataSeries objects with a DATETIME axis type. My data is gathered hourly and I would like to place alternating plot bands for each of the dates represented, e.g. a light blue plot band would cover all of the hours represented in the chart for March 11th, then a grey plot band would encompass the hourly data for March 12th, and alternating back and forth for each day on the chart. Here’s the function that I’m using to process my list of POJOs retrieved from my data store. My example makes extensive use of the JodaTime library and you would need to adapt to your specific use case.

*Yes, I would love any feedback on improvements :slight_smile:


//Class level variable
private final List<PollCycleStats> pollCycleStats;

public void populateSuccessFailDataSeries(Configuration conf, 
												DataSeries successSeries, 
												DataSeries failSeries, 
												DataSeries errSeries) 
	{

		// Setup the tracking variables
		DateMidnight startDate = null;
		boolean isAlternate = false;
		boolean isFirst = false;

		// Specify the plot band colors
		SolidColor bandAltColor = SolidColor.LIGHTBLUE;
		SolidColor bandColor = SolidColor.GREY;

		// Specify an intermediary datastructure for storing the
		// created PlotBands
		List<PlotBand> bandTracker = new ArrayList<PlotBand>();

		// Get my TimeZone offset for calculating the appropriate
		// millisecond position to place the PlotBand boundries
		TimeZone tz = TimeZone.getTimeZone("America/Denver");
		int offSet = tz.getOffset(new Date().getTime());

		// Add the stats from the PollCycle to our different
		// graphing DataSeries
		for (PollCycleStats stat : pollCycleStats) {
			// This is the very first item we are processing,
			// so let's initialize our PlotBand start time
			// Note: This is midnight time, so we will ignore it
			// later when graphing the first plot band, but
			// will set to midnight for the subsequent PlotBands
			if (startDate == null) {
				startDate = new DateMidnight(stat.getCreation_date());
				isFirst = true;
			} else {
				// Not the first item, so get the time of the current
				// item
				DateMidnight curStatDT = new DateMidnight(stat.getCreation_date());

				// Has the day of the month changed?
				if (curStatDT.getDayOfMonth() != startDate.getDayOfMonth()) {
					// Yes it has, let's create a new PlotBand

					// Determine what color to use for the PlotBand and it's
					// reverse color for
					// the PlotBand label
					SolidColor curBandColor = isAlternate ? bandColor : bandAltColor;
					SolidColor reverseBandColor = isAlternate ? bandAltColor : bandColor;

					// Calculate the start time in milliseconds, plus the
					// TimeZone offset
					// This is the beginning of our PlotBand
					Number plotStartTime = isFirst ? 
												(pollCycleStats.get(0).getCreation_date().getTime() + offSet)
												: (startDate.getMillis() + offSet);

					// Since we're on a new day, set the ending position
					// of our PlotBand in milliseconds 
					Number plotEndTime = curStatDT.getMillis() + offSet;

					// Create the PlotBand and set up the styling attributes
					PlotBand band = new PlotBand(plotStartTime, plotEndTime,curBandColor);
					band.setLabel(new PlotBandLabel(startDate.getMonthOfYear() + "/" + startDate.getDayOfMonth()));
					band.getLabel().setStyle(new Style());
					band.getLabel().getStyle().setColor(reverseBandColor);

					// Add our new PlotBand to our tracker
					bandTracker.add(band);

					// Set up our attributes for the next PlotBand
					isFirst = false;
					startDate = curStatDT;
					isAlternate = isAlternate ? false : true;
				}
			}

			// Populate our DataSeries with the data points we are interested in
			DataSeriesItem successItem = new DataSeriesItem(stat.getCreation_date(), stat.getFeed_success());
			successSeries.add(successItem);

			DataSeriesItem failItem = new DataSeriesItem(stat.getCreation_date(), stat.getFeed_failed());
			failSeries.add(failItem);

			DataSeriesItem errItem = new DataSeriesItem(stat.getCreation_date(), stat.getFeeds_with_entry_error());
			errSeries.add(errItem);
		}

		//Create our last PlotBand on the chart
		//Determine appropriate color scheme for this PlotBand
		SolidColor curBandColor = isAlternate ? bandColor : bandAltColor;
		SolidColor reverseBandColor = isAlternate ? bandAltColor : bandColor;
		
		//Get the boundary positions
		Number plotStartTime = startDate.getMillis() + offSet;
		Number plotEndTime = pollCycleStats.get( ( pollCycleStats.size() - 1 ) ).getCreation_date().getTime() + offSet;
		
		//Create the final PlotBand and set it's attributes
		PlotBand band = new PlotBand(plotStartTime, plotEndTime, curBandColor);
		band.setLabel(new PlotBandLabel(startDate.getMonthOfYear() + "/" + startDate.getDayOfMonth()));
		band.getLabel().setStyle(new Style());
		band.getLabel().getStyle().setColor(reverseBandColor);
		bandTracker.add(band);
		
		//Add the PlotBands to the X-Axis of the configuration
		conf.getxAxis().setPlotBands(bandTracker.toArray(new PlotBand[bandTracker.size()]
));
	}

Screenshot of output

and an updated version adapted for a similar graph
12866.png
12867.png

@Aaron: I see you solved yours with Plotbands. My issue is that I’m wondering if there’s a easier way than using Plotbands, because as you do too: you then have to compute each band instead of setting them once (or just one reset when new values come in). I’m hoping something with the ticks and alternatebandcolor could make it easier…

Hi. I attached my chart image file with this post. I want to change the Vaadin chart Y axis label as 24,000 instead of 24k. How can i change this. And how to change the interval of the yaxis.
13017.png