aiCharts Custom Drawing

Check following recommendation to start drawing custom graphics on chart.
  • Your need to extend ChartView class. Example:
    class MyChartView extends ChartView
    {
    	// constructors
    	// ...
    	
    	protected void onDraw(Canvas c)
    	{
    		super.onDraw(c);
    		
    		// your code
    	}
    }
    
  • Check Canvas class API
    protected void onDraw(Canvas c)
    {
    	super.onDraw(c);
    	
    	Paint p = new Paint();
    	p.setColor(Color.GREEN);
    	c.drawRect(50, 50, 100, 100, p);
    }
    
  • Find the bounds where you want to draw
    • aiCharts can contain several areas. Use - getBounds() to get area bounds
    • Each area contains a rectangle, where series will draw - getSeriesBounds()
    • Other components (ChartAxis, ChartLegend, ChartTitle) also contain getBounds() API
    If you use getBounds() API before onDraw, make sure that ensureLayout(boolean) is called.
    protected void onDraw(Canvas c)
    {
    	super.onDraw(c);
    
    	if(getAreas().size() > 0)
    	{
    		Paint p = new Paint();
    		p.setColor(Color.GREEN);
    		p.setStyle(Style.STROKE);
    		c.drawRect(getAreas().get(0).getSeriesBounds(), p);
    	}
    }
    
  • Check the ChartTransform API. It will help you to find chart point coordinates.
    protected void onDraw(Canvas c)
    {
    	super.onDraw(c);
    	double custorPosition = 3;
    
    	if(getAreas().size() > 0)
    	{
    		Paint p = new Paint();
    		p.setColor(Color.GREEN);
    		
    		ChartTransform transform = ChartTransform.obtain(getAreas().get(0));
    		Rect rect = getAreas().get(0).getSeriesBounds(); 
    		
    		PointF pt = new PointF(); 
    		transform.getPoint(custorPosition, 0, pt);
    		c.drawLine(pt.x, rect.top, pt.x, rect.bottom, p);
    		
    		transform.recycle();
    	}
    }
    
  • Also you can extend Drawable class and set it for series or other part of chart.
    class CustomDrawable extends Drawable
    {
    	public void draw(Canvas canvas)
    	{
    		canvas.clipRect(getBounds());
    		canvas.drawColor(Color.GREEN);
    	}
    	
    	public int getOpacity()
    	{
    		return 255;
    	}
    	
    	public void setAlpha(int arg0)
    	{
    		
    	}
    	
    	public void setColorFilter(ColorFilter arg0)
    	{
    	}
    }
    
    ...
    
    chartSeries.serBackDrawable(new CustomDrawable());
    
↑ Go to top