BarChartView in Sketchware

In Sketchware project, if you have a List Map containing a key with numerical values, it can be displayed in a graph form using the BarChartView code created by me. Follow the steps given below to understand how to use it.

1. Create a new page graph.xml to display the bar chart.

2. On the page containing the List Map, add a button to move to In the event of Button onClick, save List Map in Intent put Extra key "list" by converting it to Json String and then move to

3. In graph.xml add a LinearV linear1.

4. In add a ListMap listmap.

5. In onCreate event use blocks to get json string in Intent extra key "list", and convert it to listmap. Then use codes to display this ListMap in BarChartView.

The code used in add source directly block is
BarChartView chart = new BarChartView(this, listmap, "totalConfirmed", "loc");
Here 'loc' is the key in listmap whose values will act as labels or x-axis in the graph. Whereas 'totalConfirmed' is the key in listmap whose numerical values will be used to plot the graph.

6. Create a More Block extra.

7. In the more block extra, use an add source directly block and put codes to define a View class BarChartView.
public class BarChartView extends View {
private int barCol;
private int progressCol;
private int progress=0;
private Paint myPaint;
private ArrayList<HashMap<String, Object>> list = new ArrayList<>();
private String numkey;
private String labelkey;
int viewWidth = 0;
int viewHeight = 0;
int barWidth = 0;
int lastBase = 0;
double selected = -1;
float touchX = 0;
float touchY = 0;

public BarChartView(Context context, ArrayList<HashMap<String, Object>> list, String numkey, String labelkey){
myPaint = new Paint();
barCol = Color.BLACK;
progressCol = Color.RED;
progress = 0;
this.list = list;
this.numkey = numkey;
this.labelkey = labelkey;

protected void onDraw(Canvas canvas) {
int viewWidth = this.getMeasuredWidth();
int viewHeight = this.getMeasuredHeight(); myPaint.setStyle(;
canvas.drawLine(40, viewHeight -40, 40, 40, myPaint);
canvas.drawLine(40, viewHeight -40, viewWidth -20, viewHeight -40, myPaint);

lastBase = 40;
barWidth = (int)(viewWidth - 80)/list.size();

float max = Float.valueOf(list.get(0).get(numkey).toString());
for (int i =0; i<list.size(); i++){
if(max < Float.valueOf(list.get(i).get(numkey).toString())) {
max = Float.valueOf(list.get(i).get(numkey).toString());
} }
int maxHeight = viewHeight - 120;
for (int i =0; i<list.size(); i++){
int col = 100+(155*i/list.size());
myPaint.setColor(Color.rgb(0, col, col));
canvas.drawRect(lastBase+1, viewHeight -40 - (Float.valueOf(list.get(i).get(numkey).toString()))*maxHeight/max, lastBase + barWidth, viewHeight - 40, myPaint);;
canvas.rotate(270f, 0, 0);
canvas.drawText(list.get(i).get(labelkey).toString(), -viewHeight +100, lastBase+1 +barWidth*2/3, myPaint);
lastBase = lastBase + barWidth;

if (selected > 0 & selected < list.size()+1){
if (touchX<viewWidth/2){
myPaint.setColor(Color.rgb(255, 250, 250));
canvas.drawRect(touchX+SketchwareUtil.getDip(GraphActivity.this, 20), touchY - SketchwareUtil.getDip(GraphActivity.this,40), touchX + SketchwareUtil.getDip(GraphActivity.this,120), touchY - SketchwareUtil.getDip(GraphActivity.this,120), myPaint);

canvas.drawText(list.get((int)selected-1).get(labelkey).toString(), touchX+SketchwareUtil.getDip(GraphActivity.this, 30), touchY - SketchwareUtil.getDip(GraphActivity.this,100), myPaint);
canvas.drawText(list.get((int)selected-1).get(numkey).toString(), touchX+SketchwareUtil.getDip(GraphActivity.this, 30), touchY - SketchwareUtil.getDip(GraphActivity.this,70), myPaint);
} else {
myPaint.setColor(Color.rgb(255, 250, 250));
canvas.drawRect(touchX-SketchwareUtil.getDip(GraphActivity.this, 120), touchY - SketchwareUtil.getDip(GraphActivity.this,40), touchX - SketchwareUtil.getDip(GraphActivity.this,20), touchY - SketchwareUtil.getDip(GraphActivity.this,120), myPaint);

canvas.drawText(list.get((int)selected-1).get(labelkey).toString(), touchX-SketchwareUtil.getDip(GraphActivity.this, 110), touchY - SketchwareUtil.getDip(GraphActivity.this,100), myPaint);
canvas.drawText(list.get((int)selected-1).get(numkey).toString(), touchX-SketchwareUtil.getDip(GraphActivity.this, 110), touchY - SketchwareUtil.getDip(GraphActivity.this,70), myPaint);
canvas.drawLine(touchX, viewHeight -40, touchX, 40, myPaint);

public boolean onTouchEvent(MotionEvent event) {
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
touchX = event.getX();
touchY = event.getY();
selected = Math.ceil((touchX-40)/barWidth);
case MotionEvent.ACTION_MOVE:
touchX = event.getX();
touchY = event.getY();
selected = Math.ceil((touchX-40)/barWidth);
case MotionEvent.ACTION_UP:
selected = -1;
return true;

This code only works for positive numerical values.

8. Save and Run the project.


  1. Hello sir, I have read all the articles in this blog to find help about "placing the item at the top when it was added to the listview using the listmap".

    But I failed to find it, can you help me by making the tutorial?

    1. list displayed in reverse order


Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

A Flash Light App in Sketchware

Admob rewarded video Ads in Sketchware

Simple car racing android game in Sketchware

Firebase auth in Sketchware for Login Activity