Grid Lines and Grid Fills - oliverwatkins/Iceberg-Charts GitHub Wiki

Iceberg Charts allows you to define your own chart grid lines and grid fills. Grid lines and grid fills are properties of intervals because they represent a linear graphic that extends from the interval points on the axis. Grid lines and grid fills exist in an object called an IntervalStyling.

Default Stylings

If you do not provide any interval styling, iceberg charts provides default grid stylings. As of writing the default stylings are :

First level interval : gray lines of one pixel thickness
Second level interval : dashed gray lines of one pixel thickness

Custom Stylings

These default values can be overriden by using a number constructors on the XYChart. A IntervalStyling object contains rendering objects for an interval including Tick length, GridLine, and GridFill

Tick length: The length in pixels of the 'ticks' displayed on the axis
GridLine: The grid line, which can be created with a color, a thickness and whether it is dashed or not.
GridFill: The grid fill, fills up the space between the intervals in alternating colors. The grid fill can also provide a gradiant coloring.

The example below uses the XYChart that accepts 6 IntervalStyling objects. The first three are the stylings for the three x intervals, and the second three are the stylings for the y intervals.

  ArrayList<XYDataSeries> xySeriesList = new ArrayList<XYDataSeries>();

  ArrayList<DataPoint> values = new ArrayList<DataPoint>();
  values.add(new DataPoint(5, 30));
  values.add(new DataPoint(10, 11));
  values.add(new DataPoint(15, 14));
  values.add(new DataPoint(20, 5));
  values.add(new DataPoint(25, 8));

  ArrayList<DataPoint> values2 = new ArrayList<DataPoint>();
  values2.add(new DataPoint(5, 2));
  values2.add(new DataPoint(10, 33));
  values2.add(new DataPoint(15, 6));
  values2.add(new DataPoint(20, 14));
  values2.add(new DataPoint(25, 17));

  XYDataSeries series = new XYDataSeries(values, "");
  
  XYChart lineChart = new XYChart("Grid Examples", 
  		"My X Axis", 
  		"My Y Axis", 
  		new IntervalStyling(5, new GridLine(Color.GRAY, false, 3), null), 		//first X interval styling
  		new IntervalStyling(1, new GridLine(Color.LIGHT_GRAY, false, 1), null),	//second X interval styling
  		null,																	//third X interval styling
  		new IntervalStyling(5, new GridLine(Color.GRAY, true, 3), null),		//first Y interval styling
  		new IntervalStyling(1, new GridLine(Color.LIGHT_GRAY, false, 1), null),	//second Y interval styling
  		null, 																	//third Y interval styling
  		series);

As you can see, interval stylings have been provided to the first two intervals of both X and Y, creating a chart that looks like below.

Because Iceberg Charts allows up to three intervals, it is also possible to create a grid pattern that is just like the graph paper you used to use in school.

The following code :

  NumericalInterval yInterval1 = new NumericalInterval(0, 10.0, new GridLine(Color.BLACK, false, 1));
  NumericalInterval yInterval2 = new NumericalInterval(0, 5.0, new GridLine(Color.GRAY, false, 1));
  NumericalInterval yInterval3 = new NumericalInterval(0, 1.0, new GridLine(Color.LIGHT_GRAY, false, 1));

  NumericalInterval xInterval1 = new NumericalInterval(0, 10.0, new GridLine(Color.BLACK, false, 1));
  NumericalInterval xInterval2 = new NumericalInterval(0, 5.0, new GridLine(Color.GRAY, false, 1));
  NumericalInterval xInterval3 = new NumericalInterval(0, 1.0, new GridLine(Color.LIGHT_GRAY, false, 1));

  YAxis yAxis = new YAxis(new LinearNumericalAxisScalingY(0.0, 100.0, yInterval1, yInterval2, yInterval3), "Y Axis");
  XAxis xAxis = new XAxis(new LinearNumericalAxisScalingX(0.0, 100.0, xInterval1, xInterval2, xInterval3), "X Axis");

  XYChart lineChart = new XYChart(new ArrayList<DataPoint>(), "Graphpaper", yAxis, xAxis);

  return lineChart;

Produces the following graph :

Grid Fills

GridFills can be passed into the IntervalStyling constructor :

  IntervalStyling stylingX = new IntervalStyling(2, 
  		new GridLine(Color.GRAY, false, 0),
  		new GridFill(
  				new Color(179, 209, 255), 
  				new Color(172, 109, 215), false));

The following code produces alternating color along the X-Axis. Note that styling is defined as the second styling for X in the constructor (the fourth paramater). If the alternating color styling were the first interval, then it wouldn't look so good; ie. the first color would fill to zero, the next would fill to 100, and then there would be a remainder fill.

  XYDataSeries series = new XYDataSeries(null, 
  		new Line(Color.BLUE, false, 3), 
  		"Blue Series");
  series.dataPoints = getSeries1();
  
  XYDataSeries series2 = new XYDataSeries(null, 
  		new Line(Color.RED, false, 3), 
  		"Red Series");
  series2.dataPoints = getSeries2();
  
  ArrayList<XYDataSeries> xySeriesList = new ArrayList<XYDataSeries>();

  xySeriesList.add(series);
  xySeriesList.add(series2);

  IntervalStyling stylingX = new IntervalStyling(2, 
  		new GridLine(Color.GRAY, false, 0),
  		new GridFill(
  				new Color(179, 209, 255), 
  				new Color(172, 109, 215), false));
  
  IntervalStyling stylingY = new IntervalStyling(8,
  		new GridLine(Color.GRAY, false, 1), 
  		null);
  
  XYChart lineChart = new XYChart(xySeriesList, "Alternate Grid Fill", null, 
  		stylingX, 
  		null, 
  		null, 
  		stylingY, 
  		null, "X Axis", "Y Axis");

The graph should look like the following below. Note how the first interval on X defines the grid lines and interval labels, and it is only the second interval that defines the alternating colors.

Naturally it is also possible to create the alternating colors on the Y-Axis as well.

The following code..

  XYDataSeries series = new XYDataSeries(null, new Line(Color.BLUE, false, 3), "Blue");
  series.dataPoints = getSeries1();
  
  ArrayList<XYDataSeries> xySeriesList = new ArrayList<XYDataSeries>();

  xySeriesList.add(series);
  
  IntervalStyling xStyling = new IntervalStyling(1, new GridLine(Color.GRAY, false, 1),
  		null);
  
  IntervalStyling yStyling = new IntervalStyling(1, new GridLine(Color.GRAY, false, 0),
  		new GridFill(
  				new Color(179, 209, 255), 
  				new Color(172, 109, 215), false));

  XYChart chart = new XYChart(xySeriesList, "Alternate Grid Fill Y", 
  		null, 
  		xStyling, //second level interval
  		null, 
  		null, 
  		yStyling, //second level interval
  		null, "X axis", "Y Axis");

Should produce something that looks like this :

Another feature in Iceberg Charts is the ability to create something called a "Gradient Fill".

By switching the third parameter in the GridFill constructor to "true" :

new GridFill(Color.LIGHT_GRAY, Color.WHITE, true);

Instead of alternating between colors, a color gradient fill is created and applied to all intervals.

The following code :

  ArrayList<DataPoint> values = new ArrayList<DataPoint>();
  values.add(new DataPoint(5, 5));
  values.add(new DataPoint(7, 8));
  values.add(new DataPoint(8, 14));

  NumericalInterval yInterval1 = new NumericalInterval(2, 10.0, new GridLine(Color.GRAY, false, 1));
  NumericalInterval yInterval2 = new NumericalInterval(1, 1.0, null);
  NumericalInterval yInterval3 = new NumericalInterval(0, 1.0, null);

  NumericalInterval xInterval1 = new NumericalInterval(0, 10.0, new GridLine(Color.BLACK, false, 0));
  
  xInterval1.styling.graphFill = new GridFill(Color.LIGHT_GRAY, Color.WHITE, true);
  
  NumericalInterval xInterval2 = new NumericalInterval(0, 2.0, new GridLine(Color.LIGHT_GRAY, false, 1));
  
  YAxis yAxis = new YAxis(new LinearNumericalAxisScalingY(0.0, 35.0, yInterval1, yInterval2, yInterval3), "Y Axis");
  XAxis xAxis = new XAxis(new LinearNumericalAxisScalingX(15.0, 68.0, xInterval1, xInterval2, null), "X Axis");

  XYChart lineChart = new XYChart(values, "Gradiant", yAxis, xAxis);

Should create something that looks like this :

Grid Lines and Grid Fills - oliverwatkins/Iceberg-Charts GitHub Wiki

Default Stylings

Custom Stylings

Grid Fills

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️