Of Stack

Android Drawing Dynamic Line Chart

  • 2021-10-27 08:57:10
  • OfStack

The so-called dynamic line chart, that is, the line chart can be drawn dynamically with the sliding of fingers, which will definitely produce animation effect. Based on this effect, SurfaceView is used for mapping here.

The steps are as follows:

(1): A new drawing ChartView is created here, which inherits SurfaceView and realizes SurfaceHolder. Callback and Runnable interfaces. The main drawing work is completed in sub-threads.
(2): Realize three methods of SurfaceHolder. Callback interface, and open sub-threads in surfaceCreated to draw.
(3): Rewrite the onTouchEvent method, in the Move event, according to the sliding distance of the finger to calculate the offset, see the specific implementation of the code.
(4): The coordinate values of the line chart here are added at will, and can be added according to the needs in the actual project.
(5): In this example, there are a large number of elements added and removed from the collection, so it is recommended to use LinkedList to save data.

Customize ChartView: 


public class ChartView extends SurfaceView implements SurfaceHolder.Callback , Runnable
{
 private Context mContext;
 private Paint mPaint;
 private Resources res;
 private DisplayMetrics dm;

 private int canvasHeight;
 private int canvasWidth;
 private int bHeight = 0;
 private int bWidth;
 private boolean isMeasure = true;
 private boolean canScrollRight = true;
 private boolean canScrollLeft = true;

 //y Axis maximum 
 private int maxValue;
 //y Axis spacing value 
 private int averageValue;
 private int marginTop = 20;
 private int marginBottom = 80;

 // Total number of points on a curve 
 private Point[] mPoints;
 // Ordinal value 
 private LinkedList<Double> yRawData;
 // Abscissa value 
 private LinkedList<String> xRawData;
 // Each calculated from the interval X Value of 
 private LinkedList<Integer> xList = new LinkedList<>();
 private LinkedList<String> xPreData = new LinkedList<>();
 private LinkedList<Double> yPreData = new LinkedList<>();

 private LinkedList<String> xLastData = new LinkedList<>();
 private LinkedList<Double> yLastData = new LinkedList<>();
 private int spacingHeight;

 private SurfaceHolder holder;
 private boolean isRunning = true;
 private int lastX;
 private int offSet;
 private Rect mRect;

 private int xAverageValue = 0;


 public ChartView(Context context)
 {
  this(context , null);
 }

 public ChartView(Context context , AttributeSet attrs)
 {
  super(context, attrs);
  this.mContext = context;
  initView();
 }

 private void initView()
 {
  this.res = mContext.getResources();
  this.mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  dm = new DisplayMetrics();
  WindowManager wm = (WindowManager) mContext.getSystemService(Context.WINDOW_SERVICE);
  wm.getDefaultDisplay().getMetrics(dm);

  xPreData.add("05-18");
  xPreData.add("05-17");
  xPreData.add("05-16");
  xPreData.add("05-15");
  xPreData.add("05-14");
  xPreData.add("05-13");

  yPreData.add(4.53);
  yPreData.add(3.45);
  yPreData.add(6.78);
  yPreData.add(5.21);
  yPreData.add(2.34);
  yPreData.add(6.32);

  xLastData.add("05-26");
  xLastData.add("05-27");
  xLastData.add("05-28");
  xLastData.add("05-29");
  xLastData.add("05-30");
  xLastData.add("05-31");

  yLastData.add(2.35);
  yLastData.add(5.43);
  yLastData.add(6.23);
  yLastData.add(7.33);
  yLastData.add(3.45);
  yLastData.add(2.45);

  holder = this.getHolder();
  holder.addCallback(this);
 }

 @Override
 protected void onSizeChanged(int w , int h , int oldW , int oldH)
 {
  if (isMeasure)
  {
   this.canvasHeight = getHeight();
   this.canvasWidth = getWidth();
   if (bHeight == 0)
   {
    bHeight = canvasHeight - marginBottom;
   }
   bWidth = dip2px(30);
   xAverageValue = (canvasWidth - bWidth) / 7;
   isMeasure = false;
  }
 }


 @Override
 public void run()
 {
  while (isRunning)
  {
   drawView();
   try
   {
    Thread.sleep(100);
   }
   catch (InterruptedException e)
   {
    e.printStackTrace();
   }
  }
 }

 private void drawView()
 {
  Canvas canvas = holder.lockCanvas();
  canvas.drawColor(Color.WHITE);
  mPaint.setColor(res.getColor(R.color.color_f2f2f2));
  drawAllXLine(canvas);
  mRect = new Rect(bWidth - 3, marginTop - 5 ,
    bWidth + (canvasWidth - bWidth) / yRawData.size() * (yRawData.size() - 1) + 3, bHeight + marginTop + marginBottom);
  // Lock drawing area 
  canvas.clipRect(mRect);
  drawAllYLine(canvas);

  mPoints = getPoints();

  mPaint.setColor(res.getColor(R.color.color_ff4631));
  mPaint.setStrokeWidth(dip2px(2.5f));
  mPaint.setStyle(Paint.Style.STROKE);
  drawLine(canvas);

  mPaint.setStyle(Paint.Style.FILL);
  for (int i = 0 ; i < mPoints.length ; i++)
  {
   canvas.drawCircle(mPoints[i].x , mPoints[i].y , 5 , mPaint);
  }

  holder.unlockCanvasAndPost(canvas);
 }

 // Draw a line chart 
 private void drawLine(Canvas canvas)
 {
  Point startP = null;
  Point endP = null;
  for (int i = 0 ; i < mPoints.length - 1; i++)
  {
   startP = mPoints[i];
   endP = mPoints[i + 1];
   canvas.drawLine(startP.x , startP.y , endP.x , endP.y , mPaint);
  }
 }

 // Draw all vertical dividing lines 
 private void drawAllYLine(Canvas canvas)
 {
  for (int i = 0 ; i < yRawData.size() ; i++)
  {
   if (i == 0)
   {
    canvas.drawLine(bWidth, marginTop , bWidth, bHeight + marginTop , mPaint);
   }
   if (i == yRawData.size() - 1)
   {
    canvas.drawLine(bWidth + xAverageValue * i, marginTop , bWidth + xAverageValue * i , bHeight + marginTop , mPaint);
   }
   xList.add(bWidth + xAverageValue * i);
   canvas.drawLine(bWidth + xAverageValue * i + offSet, marginTop , bWidth + xAverageValue * i + offSet , bHeight + marginTop , mPaint);
   drawText(xRawData.get(i) , bWidth + xAverageValue * i - 30 + offSet, bHeight + dip2px(26) , canvas);

  }
 }

 // Draw all horizontal dividing lines 
 private void drawAllXLine(Canvas canvas)
 {
  for (int i = 0 ; i < spacingHeight + 1 ; i++)
  {
   canvas.drawLine(bWidth , bHeight - (bHeight / spacingHeight) * i + marginTop ,
     bWidth + xAverageValue * (yRawData.size() - 1) , bHeight - (bHeight / spacingHeight) * i + marginTop , mPaint);
   drawText(String.valueOf(averageValue * i) , bWidth / 2 , bHeight - (bHeight / spacingHeight) * i + marginTop, canvas);
  }
 }

 // Drawing coordinate values 
 private void drawText(String text , int x , int y , Canvas canvas)
 {
  Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
  p.setTextSize(dip2px(12));
  p.setColor(res.getColor(R.color.color_999999));
  p.setTextAlign(Paint.Align.LEFT);
  canvas.drawText(text , x , y , p);
 }

 @Override
 public void surfaceCreated(SurfaceHolder surfaceHolder)
 {
  new Thread(this).start();
  Log.d("OOK" , "Created");
 }

 @Override
 public void surfaceChanged(SurfaceHolder surfaceHolder, int i, int i1, int i2)
 {
  Log.d("OOK" , "Changed");
 }

 @Override
 public void surfaceDestroyed(SurfaceHolder surfaceHolder)
 {
  isRunning = false;
  try
  {
   Thread.sleep(500);
  }
  catch (InterruptedException e)
  {
   e.printStackTrace();
  }
 }

 @Override
 public boolean onTouchEvent(MotionEvent event)
 {
  int action = event.getAction();
  int rawX = (int) event.getX();
  switch (action)
  {
   case MotionEvent.ACTION_DOWN:
    lastX = rawX;
    break;
   case MotionEvent.ACTION_MOVE:
    int offsetX = rawX - lastX;
    if (xPreData.size() == 0 && offSet > 0)
    {
     offSet = 0;
     canScrollRight = false;
    }
    if (xLastData.size() == 0 && offSet < 0)
    {
     offSet = 0;
     canScrollLeft = false;
    }
    offSet = offSet + offsetX;
    if (offSet > xAverageValue && canScrollRight)
    {
     offSet = offSet % xAverageValue;
     xRawData.addFirst(xPreData.pollFirst());
     yRawData.addFirst(yPreData.pollFirst());
     xLastData.addFirst(xRawData.removeLast());
     yLastData.addFirst(yRawData.removeLast());
     canScrollLeft = true;
    }


    if (offSet < -xAverageValue && canScrollLeft)
    {
     offSet = offSet % xAverageValue;
     xRawData.addLast(xLastData.pollFirst());
     yRawData.addLast(yLastData.pollFirst());
     xPreData.addFirst(xRawData.removeFirst());
     yPreData.addFirst(yRawData.removeFirst());
     canScrollRight = true;
    }
    lastX = rawX;
    break;
   case MotionEvent.ACTION_UP:
    break;
  }
  return true;
 }

 private Point[] getPoints()
 {
  Point[] points = new Point[yRawData.size()];
  for (int i = 0 ; i < yRawData.size() ; i++)
  {
   int ph = bHeight - (int)(bHeight * (yRawData.get(i) / maxValue));

   points[i] = new Point(xList.get(i) + offSet , ph + marginTop);
  }
  return points;
 }

 public void setData(LinkedList<Double> yRawData , LinkedList<String> xRawData , int maxValue , int averageValue)
 {
  this.maxValue = maxValue;
  this.averageValue = averageValue;
  this.mPoints = new Point[yRawData.size()];
  this.yRawData = yRawData;
  this.xRawData = xRawData;
  this.spacingHeight = maxValue / averageValue;
 }

 private int dip2px(float dpValue)
 {
  return (int) (dpValue * dm.density + 0.5f);
 }
}

MainActivity code: 


public class MainActivity extends Activity
{
 LinkedList<Double> yList;
 LinkedList<String> xRawData;
 ChartView chartView;
 @Override
 protected void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main_activity);
  chartView = (ChartView) findViewById(R.id.chartView);

  yList = new LinkedList<>();
  yList.add(2.203);
  yList.add(4.05);
  yList.add(6.60);
  yList.add(3.08);
  yList.add(4.32);
  yList.add(2.0);
  yList.add(5.0);

  xRawData = new LinkedList<>();
  xRawData.add("05-19");
  xRawData.add("05-20");
  xRawData.add("05-21");
  xRawData.add("05-22");
  xRawData.add("05-23");
  xRawData.add("05-24");
  xRawData.add("05-25");

  chartView.setData(yList , xRawData , 8 , 2);
 }
}

This example page layout is relatively simple, that is, add a custom ChartView in the main page layout, which is no longer posted here. May write a little hasty, if not appropriate, please criticize and correct, thank you!

Related articles: