I am building a line chart for one of our applications. The line part in the chart is working fine but now I have to fill the area below the line with a color, something like this image below.
I am using this code to draw the line on to a bitmap using a canvas.
List<Float> xCoordinates = (List<Float>) coordinates[0];
List<Float> yCoordinates = (List<Float>) coordinates[1];
for (int i = 0; i < xCoordinates.size(); i++) {
if (!firstSet) {
x = xCoordinates.get(i);
y = yCoordinates.get(i);
p.moveTo(x, y);
firstSet = true;
} else {
x = xCoordinates.get(i);
y = yCoordinates.get(i);
p.lineTo(x, y);
}
}
textureCanvas.drawPath(p, pG);
What I need to know is, is there a way to easily find the area below the line and make it a color or will I have to calculate each area between 3 points for the graph and fill it with a color?
I cannot use existing chart libraries like AchartEngine, ChartDroid, aFreeChart ect.
Found a solution
I first painted the gradient, after that I painted the line chart and erased all along the line by creating another path that followed the line chart and closed it up at the end. After that I painted the area transparent to erase the top part of the gradient.
List<Float> xCoordinates = coordinates.first;
List<Float> yCoordinates = coordinates.second;
for (int i = 0; i < xCoordinates.size(); i++) {
if (!firstSet) {
x = xCoordinates.get(i);
y = yCoordinates.get(i);
linePath.moveTo(x, y);
erasePath.moveTo(x, 0);
erasePath.lineTo(x, y);
firstSet = true;
} else {
x = xCoordinates.get(i);
y = yCoordinates.get(i);
linePath.lineTo(x, y);
erasePath.lineTo(x, y);
}
}
erasePath.lineTo(getWidth(), y);
erasePath.lineTo(getWidth(), 0);
erasePath.lineTo(0, 0);
getTextureCanvas().drawPath(erasePath, clear);
getTextureCanvas().drawPath(linePath, pG);
The result looked like this
Another way to do this is to follow the path exactly and clip around the bottom edges and just paint the gradient inside the second path. This will give the same result but all content above the graph will be kept and nothing will be erased.
Related
I have been using Graphview for some time and mostly LineGraph and PointGraph, link to GraphView can be found here: Link to GraphView.
But now I need a LineGraph that would fill the whole 0-100 and 100-200 when needed. For example when the point is 70, it would fill the whole 0-100 space, which would look something like this.
Another requirement is that is still needs to be like a LineGraph since it needs to be able to move to the right.
Does anyone have an idea how this could be done using GraphView or if it can be done at all with GraphView.
Or maybe if I set the point to be 50 and line thickness so it would cover exactly +/- 50 then it would also be the same but the problem here is that the line thickness is different on every screen.
You can use a custom shape for the PointGraphSeries to get the effect that you like. In the following code I am creating a custom rectangle. This can give you some ideas on what to do:
int mX = 0;
private void addPoints(double point, PointsGraphSeries<DataPoint> series) {
point = Math.floor(point / 100) * 100;
DataPoint dataPoint = new DataPoint(mX++, point);
series.appendData(dataPoint, false, 100);
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
GraphView graph = findViewById(R.id.graph);
// Set manual X bounds
graph.getViewport().setXAxisBoundsManual(true);
graph.getViewport().setMinX(0);
graph.getViewport().setMaxX(10);
// Set manual Y bounds
graph.getViewport().setYAxisBoundsManual(true);
graph.getViewport().setMinY(0);
graph.getViewport().setMaxY(1000);
// Set up the number of division for horizontal and vertical units
graph.getGridLabelRenderer().setNumHorizontalLabels(11);
graph.getGridLabelRenderer().setNumVerticalLabels(11);
PointsGraphSeries<DataPoint> series = new PointsGraphSeries<>();
series.setCustomShape(new PointsGraphSeries.CustomShape() {
#Override
public void draw(Canvas canvas,
Paint paint,
float x,
float y,
DataPointInterface dataPoint) {
canvas.drawRect(x, y - 100, x + 175, y, paint);
}
});
int[] points = {450, 512, 323, 240, 70, 790};
for (int i = 0; i < points.length; i++) {
addPoints(points[i], series);
}
graph.addSeries(series);
}
This will give you the following picture based on the provided points:
I am using MpChart's LineChart for showing my graphs. I have added multiple data set lines. Everything is working fine. But i want the MarkerView should be set to some point in the middle and should be visible by default. Right now marker view is visible only when I touch it. Is there any method to achieve this ?
Initial graph
Markerview shown after graph is touched
Is it help?
for (IDataSet set : mChart.getData().getDataSets())
set.setDrawValues(true);
mChart.invalidate();
I've done this in the IOS version of this lib.But as the documentation says they almost identical, so i hope my answer is correctly "translated".
What i did was get a point where your default marker will always be shown.
Default point were the marker should be locked, define own your point based on HighestVisibleX or something else.
Then on first render i highlight this point:
Highlight myFirstRenderedHighlight = new Highlight(myLockedMarkerPoint.x, 0);
someChart.highlightValues(new Highlight[] { myFirstRenderedHighlight });
So if u always want to show this point even when dragging along x-axis, then u need to redraw the highlight. This can be done by listening on chartTranslation This can be done by implementing the interface OnChartGestureListener. onChartTranslate() , example:
// same logic as picking first point with HighestVisibleX or something
Highlight movingHighlight = new Highlight(entryInLockedPoint.x,0);
someChart.highlightValues(new Highlight[] { movingHighlight });
And if you want to mark several of graphs then choose from charts datasets.
Hope this was what your were looking for :)
There is no default implementation to do this in the library.
One way to do this can be to modify the LineChartRenderer class in the library. MpAndroidCharts allows you to draw circles on plotted points, you can modify this by defining a new constructor for LineChartEntry and pass a bitmap to it. You can then draw your bitmap at the plotted point instead of the circle that is drawn.
ArrayList<Entry> values = new ArrayList<Entry>();
Drawable d;
for (int i = 0; i < dataList.size(); i++) {
LineChartData data = dataList.get(i);
float val = Float.valueOf(Utils.decimalValuePrecisionTwoPlaces((float) data.getDataVolGallon()));
if (data.getImageIndex() >= 0) {
d = ContextCompat.getDrawable(getContext(), resIcon[data.getImageIndex()]);
bitmap = ((BitmapDrawable) d).getBitmap();
bitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth() / 2, bitmap.getHeight() / 2, false);
values.add(new Entry(i, val, bitmap));
} else {
values.add(new Entry(i, val));
}
}
Above code is an example for how to set entries with and without bitmap.
if(e.getBitmap() != null)
{
c.drawBitmap(e.getBitmap(),mCirclesBuffer[0] - circleRadius, mCirclesBuffer[1] - circleRadius, mRenderPaint);
}
This the code to draw the image from bitmap, just comment the line to draw circles in drawCircles() of LineChartRenderer and use this instead.
Leave a comment if you have any question.Hope this helps !!
To adjust start x,y position of your Marker just override this method in your MarkerView class. This also adjust your marker x position if it gets out of bounds of your chart view.
override fun draw(canvas: Canvas, positionX: Float, positionY: Float) {
// Check marker position and update offsets.
var posx = positionX
val posy: Float
val w = width
val h = height
posx -= if (resources.displayMetrics.widthPixels - positionX < w) {
w.toFloat()
} else {
w / 2.toFloat() // Draw marker in the middle of highlight
}
posy = lineChart.height - h.toFloat() * 2 // Always starts from middle of chart
// Translate to the correct position and draw
canvas.translate(posx, posy)
draw(canvas)
canvas.translate(-posx, -posy)
}
The following question might sound a bit stupid but I guess stupidity has no limit so here it goes. I am drawing a Heart using Canvas in Android and have got no issues in drawing the heart but I am not able to make the heart sharp in the meeting point. My heart looks like
CODE :
left_x_moveto = 200;
left_y_moveto = 45;
left_x1 = 197;
left_y1 = -35;
left_x2 = 60;
left_y2 = 20;
left_x3 = 193;
left_y3 = 130;
right_x_moveto = 200;
right_y_moveto = 45;
right_x1 = 197;
right_y1 = -35;
right_x2 = 345;
right_y2 = 20;
right_x3 = 193;
right_y3 = 130;
heart_outline_paint.setColor(getResources().getColor(R.color.heart_outline_color)); // Change the boundary color
heart_outline_paint.setStrokeWidth(15);
heart_outline_paint.setStyle(Paint.Style.STROKE);
path.moveTo(left_x_moveto, left_y_moveto);
path.cubicTo(left_x1, left_y1, left_x2, left_y2, left_x3, left_y3);
path.moveTo(right_x_moveto, right_y_moveto);
path.cubicTo(right_x1, right_y1, right_x2, right_y2, right_x3, right_y3);
canvas.drawPath(path, heart_outline_paint);
What have I tried so far :
Reducing or increasing the points of left_x_moveto,left_y_moveto and vice versa but the heart is completely disfigured for which I am unable to find the reason.
When the right_x_moveto = 198 and right_y_moveto = 45, the heart looks like
I am not sure why this is happening.
Reducing the width of the heart_outline_paint would give me what I want but I want the thickness of the heart to be the same so reducing the setStrokeWidth is not an option.
In short, I want both the curves to MEET AND MERGE and not just MEET.
Any help will be much appreciated. Thanks in advance.
You need to perform a couple of this.
Close the path via path.close().
You need to set the stroke join via heart_outline_paint.setStrokeJoin(Paint.Join.MITER);
A path can be closed only if it's drawn continuously. Hence I have modified the code so that path.close() can be done properly. Below is the code.
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
heart_outline_paint = new Paint(Paint.ANTI_ALIAS_FLAG);
heart_outline_paint.setStrokeJoin(Paint.Join.MITER);
path = new Path();
int left_x_moveto = 200;
int left_y_moveto = 45;
int left_x1 = 180;
int left_y1 = -20;
int left_x2 = 30;
int left_y2 = 20;
int left_x3 = 193;
int left_y3 = 130;
int right_x_moveto = 200;
int right_y_moveto = 45;
int right_x1 = 214;
int right_y1 = -20;
int right_x2 = 375;
int right_y2 = 20;
int right_x3 = 193;
int right_y3 = 130;
heart_outline_paint.setColor(Color.RED); // Change the boundary color
heart_outline_paint.setStrokeWidth(15);
heart_outline_paint.setStyle(Paint.Style.STROKE);
path.moveTo(left_x_moveto, left_y_moveto);
path.cubicTo(left_x1, left_y1, left_x2, left_y2, left_x3, left_y3);
path.cubicTo(right_x2, right_y2, right_x1, right_y1, right_x_moveto, right_y_moveto);
path.close();
canvas.drawPath(path, heart_outline_paint);
}
Paint.Join.MITER is the one that does what you want.
The outer edges of a join meet at a sharp angle
Now this MITER join works only when the angle is <= 90 degree. But here, based on the values that you have provided, the angle is 90 degree and hence the MITER join doesn't work. I have modified the values to get the following image. The image is not exact, but you need to play around with the value the get the right one.
You could set the ROUND join method to get the following.
The problem is with Path.cubicTo(). It's very hard to get the MITTER join work without getting the heart shape squished. So instead of cubicTo, I tried with lineTo and arcTo to create a simple heart. The below is the code for that. You will notice that I have rotated the canvas to 45 degrees and then drew the heart shape. This is purely for convenience, so that the coordinates are simple and does not involve pythagoras theorem.
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
heart_outline_paint = new Paint(Paint.ANTI_ALIAS_FLAG);
heart_outline_paint.setStrokeJoin(Paint.Join.MITER);
heart_outline_paint.setColor(Color.RED); // Change the boundary color
heart_outline_paint.setStrokeWidth(15);
heart_outline_paint.setStyle(Paint.Style.STROKE);
path = new Path();
float length = 100;
float x = canvas.getWidth()/2;
float y = canvas.getHeight()/2;
canvas.rotate(45,x,y);
path.moveTo(x,y);
path.lineTo(x-length, y);
path.arcTo(new RectF(x-length-(length/2),y-length,x-(length/2),y),90,180);
path.arcTo(new RectF(x-length,y-length-(length/2),x,y-(length/2)),180,180);
path.lineTo(x,y);
path.close();
canvas.drawPath(path, heart_outline_paint);
}
The final rendered image of this code is below:
What's happening is that the thickness of the line is being drawn on one side, not on both. In true MS paint fashion:
(The left is what's happening, the right is what you want. Black is the actual position of the line would width be 1px, red is the "padding", the 2nd, 3rd through 15th pixel, heart_outline_paint.setStrokeWidth(15);)
To fix this, try to subtract half the width of the line from the x of right line, and add it to the x of the left line. Doing so will work around this problem, not fix it
I'm in need of assistance with the program that I'm writing.
The code basically list of words from an array, chops it into specific Strings at certain indexes, then into Chars and displaying it into the canvas.
Then, the chars animates while sliding down the canvas.
But, whenever it animates slowly, the characters are on top of each other, and whenever it animates fast, the characters are separated.
How do I get the chars to be separated equally WHILE animating slowly?
One solution I came up with was to find a way to edit the frame rate, but I don't know how to do it :(.
public sketchUp(Context context) {
super(context);
}
String arr [] = {"love","happiness"};
protected void onDraw (Canvas canvas){
super.onDraw(canvas);
Rect disRect = new Rect();
disRect.set(0,0, canvas.getWidth(), canvas.getHeight()/2);
Paint col = new Paint();
Paint txt = new Paint();
txt.setTextSize(20);
txt.setColor(Color.BLACK);
col.setColor(Color.GREEN);
col.setStyle(Paint.Style.FILL);
canvas.drawRect(disRect, col);
if(y<canvas.getHeight()/2){
y+=1;
}
else{
y=0;
}
// if(x<canvas.getWidth()){
// x+=10;
// }
// else{
// x=0;
// }
for(int i=0; i<arr.length; i++){
for(int j=0; j<arr[i].length(); j++){
char result = arr[i].charAt(j);
// System.out.println(result);
canvas.drawText(String.valueOf(result), x, y+=0.5, txt);
//
}
}
invalidate();
}
Think of it this way:
That y+=0.5 sets the separation of the characters. It is the only thing that makes each character's position different. If it was just y, the characters would be on top of each other.
Why it affects animation speed
Each y+=0.5 changes y. So after drawing the characters y is lower than it was before.
How to fix this
First, you have to decide what y is supposed to be. You should rename it, so you remember what it is. For example it could become firstCharacterY.
Obviously, the first characters y should not change when drawing the characters, but should change each frame. To fix the drawing part, you can either set y = firstCharacterY - 0.5 before the loop or calculate y from i and j each iteration.
I have an isometric map which I draw to the canvas. When I try and move the map around, these black lines flicker in between some of the tiles making the whole thing look rather shoddy.
Here is the relevant code from my updating thread
public void run() {
Canvas c;
while (isRunning){
c = null;
try {
c = cellMap.getHolder().lockCanvas(null);
synchronized (cellMap.getHolder()) {
cellMap.onDraw(c);
}
} finally {
if( c != null){
cellMap.getHolder().unlockCanvasAndPost(c);
}
}
}
}
and from my CellMap class (which extends SurfaceView):
public void onDraw(Canvas canvas){
canvas.drawColor(Color.BLACK);
int x = 0;
int y = 0;
for(int i = 0; i < mapSize; i++){
for(int j = 0; j < mapSize; j++){
x = (i-j) * 30 + xOffset;
y = (i+j) * 15 + yOffset;
mapCells[i][j].draw(canvas, paint, x, y);
}
}
mapCells[][] is an array of objects which contain the Bitmap image that needs to be drawn. The draw() function is only 1 line canvas.drawBitmap(bitmapImage, x, y, null)
I have discovered that removing the line Canvas.draw(Color.black) gets rid of the flicker. However, when I move the map the canvas is not cleared so I still see the image from the previous frames. I'd imagine it is because it is taking too long to draw the bitmaps? but the map is only very small at the moment.
I found the problem. When moving the map, the offset values were being changed. This lead to sections of the map being drawn temporarily with different offset values - creating the tearing. duh!
I solved this by copying the xOffset and yOffset values at the start of the onDraw() method, and using those values for the update.