There are times when you might want to show data in visual format. This tutorial will show you how to create an animated line chart using Sketchware. The image below shows how the final result will look.
Step 1.
Create a more block with a view variable named "layout", a listmap variable named "list", a number variable named "radius" and another named "margin"
Add an add source directly block in the moreblock. Inside the block place the following code:
final LinearLayout viewGroup = (LinearLayout) _layout;
viewGroup.removeAllViews();
viewGroup.setPadding(0,0,0,0);
viewGroup.setOrientation(LinearLayout.HORIZONTAL);
viewGroup.setGravity(Gravity.BOTTOM);
viewGroup.post(new Runnable() {
@Override
public void run() {
final float length = _list.size();
final float group_height = viewGroup.getHeight();
final float child_width = (viewGroup.getWidth())/length;
//getProsent(child_width,100-_margin)
for (int i = 0; i < length; i++) {
float getValue = Integer.parseInt(_list.get(i).get("value").toString());
float value = drawValueDetector(getValue,group_height);
LinearLayout child = new LinearLayout(_layout.getContext());
setLayoutParams(child,child_width,group_height,(int)_margin,1);
child.setGravity(Gravity.BOTTOM|Gravity.CENTER_HORIZONTAL);
LinearLayout back_view = new LinearLayout(_layout.getContext());
setLayoutParams(back_view,getProsent((float)child_width,(float)(100-_margin)),group_height,0,1);
back_view.setGravity(Gravity.BOTTOM);
background((View)back_view,(int)_radius,"#339e9e9e");
final LinearLayout fore_view = new LinearLayout(_layout.getContext());
//========================================================================
setLayoutParams(fore_view,0,0,0,1);
Animation ani = new ShowAnim(fore_view, (int) value/* target layout height */);
ani.setDuration(500/* animation time */);
ani.setInterpolator(new android.view.animation.DecelerateInterpolator());
fore_view.startAnimation(ani);
//========================================================================
if (_list.get(i).containsKey("color")){
background((View)fore_view,(int)_radius,_list.get(i).get("color").toString());
}
else {
background((View)fore_view,(int)_radius,"#9e9e9e");
}
back_view.addView(fore_view);
child.addView(back_view);
viewGroup.addView(child);
}
}
private int getProsent(float value, float i) {
return (int) (value/100*i);
}
int getDip(int value){
return (int) (value*0.75);
}
int getPix(int value){
return (int) (value/0.75);
}
private float drawValueDetector(float value, float max_value) {
float min_value = max_value/maxValue(_list);
return min_value*value;
}
private float maxValue(ArrayList<HashMap<String, Object>> list) {
float save_max = 0;
for (int i = 0; i < list.size(); i++) {
float draw = (float) Integer.parseInt(_list.get(i).get("value").toString());
if (save_max<draw){
save_max = draw;
}
}
return save_max;
}
private void setLayoutParams(LinearLayout view, float width,float height,int margin,int weight){
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams((int) width,(int) height,(float) weight);
params.setMargins(margin,0,margin,0);
view.setLayoutParams(params);
}
private void background(View view,int radius,String color){
android.graphics.drawable.GradientDrawable drawable = new android.graphics.drawable.GradientDrawable();
drawable.setColor(android.graphics.Color.parseColor(color));
drawable.setCornerRadius(radius);
view.setBackground(drawable);
}
class ShowAnim extends android.view.animation.Animation {
int targetHeight;
View view;
public ShowAnim(View view, int targetHeight) {
this.view = view;
this.targetHeight = targetHeight;
}
@Override
protected void applyTransformation(float interpolatedTime, android.view.animation.Transformation t) {
view.getLayoutParams().height = (int) (targetHeight * interpolatedTime);
view.requestLayout();
}
@Override
public void initialize(int width, int height, int parentWidth,
int parentHeight) {
super.initialize(width, height, parentWidth, parentHeight);
}
@Override
public boolean willChangeBounds() {
return true;
}
}
});
SETTING UP
Once we have created our moreblock we can then use this logic where we want it to work. You can place this onButtonClick or onCreate. We can get the data from shared preferences or a preset list.... but for the sake of this example I will use the logic below:
Once we have placed our blocks and configured our list we can now run the app.
Comments