I have created a line chart:
Now I want to fill the space between the x axis and the line by creating a polygon and filling it. But the code (see below) results in some weird filling behavior:
The chart line looks different because I'm using random values for creating the chart. Here is the code:
function draw(dc) {
dc.setColor(Graphics.COLOR_BLACK, Graphics.COLOR_BLACK);
var fillPolygonCoordinates = [];
fillPolygonCoordinates.add([minX, minY]);
// construct and draw lines
for(var i=1; i < 50; ++i) {
var x1 = minX + xAxis.getLengthInPixels() * ((i - 1) / 50.0d);
var x2 = minX + xAxis.getLengthInPixels() * (i / 50.0d);
var y1 = yRelativePixels[i-1];
var y2 = yRelativePixels[i];
var point1 = new Geo.Point(x1, y1);
var point2 = new Geo.Point(x2, y2);
var line = new Geo.Line(point1, point2);
line.draw(dc);
fillPolygonCoordinates.addAll([[x1, y1], [x2, y2]]);
}
fillPolygonCoordinates.addAll([[maxX, minY], [minX, minY]]);
dc.setColor(Graphics.COLOR_GREEN, Graphics.COLOR_GREEN);
dc.fillPolygon(fillPolygonCoordinates); // This is commented out for the first screenshot
}
What am I doing wrong here?