1. Pada aplikasi Sketchware buat proyek baru.
2. Pada main.xml tambahkan tombol dengan nama button2 dan tambahkan listview dengan nama listview2.
3. Buat CustomView items.xml dan tambahkan dua TextViews dengan nama textview1 dan textview2.
4. Buka dan pilih items.xml sebagai CustomView dari listview2.
5. Pada MainActivity.java, Tambahkan komponen Shared Preferences component dengan nama sp:sp, dan tambahkan komponen Intent dan berikan nama i.
6. Tambahkan Vatiabel String dengan mama jsondata, dan Variabel ListMap dengan nama maplist.
7. Pada Even klik onCreate gunakan blok set string arahkan ke jsondata pada kolom to data Json Anda yang berisi 'teks' dan 'angka' sebagai kunci. Konversikan ke ListMap dan setting ke maplist dan tampilkan di ListView.
Untuk kode Json String pada isian diata gunakan kode di bawah ini, Silahkan dirubah sesuai keinginan anda pada tilisan angka dan tulisan Negara :
[{
"text" : "Afghan Afghani",
"number" : "0.9532"
},
{
"text" : "Armenian Dram",
"number" : "0.1487"
},
{
"text" : "Bangladeshi Taka",
"number" : "0.8572"
},
{
"text" : "Cambodian Riel",
"number" : "0.1758"
},
{
"text" : "Indonesian Rupiah",
"number" : "0.005"
},
{
"text" : "Maldivian Rufiyaa",
"number" : "4.674"
},
{
"text" : "Pakistani Rupee",
"number" : "0.5832"
},
{
"text" : "Philippine Peso",
"number" : "1.332"
},
{
"text" : "Thai Baht",
"number" : "2.226"
}
]
8. Pada even onBindCustomView, tampilkan data dari maplist di TextViews dan di CustomView items.xml.
9. Buat tampilan baru dan berikan nama piechart.xml.
10. Pada even button2 klik pada onClick do MainActivity.java, Simpan maplist pada Shared Preferences dan gunakan Intent i untuk setscreen gulir ke PiechartActivity.java.
12. Selanjutnha pada PiechartActivity.java Tambahkan komponen Shared Preferences component berikan nama sp:sp, tambahkan variabel Map dan masih nama map, dan variabel ListMap berikan nama listmap.
13. Pada Event klik onCreate dan gunalam blok untuk memdapatka data dari komponen Shared Preferences ke listmap, dan pasang kode di bawah pada add sourche dirrectly pada PieChartView.
PieChartView chart = new PieChartView(this, listmap, "number", "text");
linear1.addView(chart);
Di sini 'teks' dan 'angka' adalah kunci yang digunakan dalam Json String di MainActivity.java.
14. Buat blok pada More Block dan berikan nama extra.
15. Pada blok more block extra, Gunaka blok add source directly dan taruhlah kode di bawah ini untuk View class PieChartView.
}
public class PieChartView extends View {
private Paint fillPaint;
private Paint strokePaint;
private ArrayList<HashMap<String, Object>> list = new ArrayList<>();
private String numkey;
private String labelkey;
public PieChartView(Context context, ArrayList<HashMap<String, Object>> list, String numkey, String labelkey){
super(context);
fillPaint = new Paint();
strokePaint = new Paint();
this.list = list;
this.numkey = numkey;
this.labelkey = labelkey;
}
@Override
protected void onDraw(Canvas canvas) {
int viewWidth = this.getMeasuredWidth();
int viewHeight = this.getMeasuredHeight();
float startAngle = 0;
float sweepAngle = 0;
int lineHeight = 0;
float total = 0;
for (int i =0; i<list.size(); i++){
total = total + Float.valueOf(list.get(i).get(numkey).toString());
}
fillPaint.setStyle(android.graphics.Paint.Style.FILL);
strokePaint.setStyle(android.graphics.Paint.Style.STROKE);
strokePaint.setStrokeWidth(2);
strokePaint.setColor(Color.BLACK);
for (int i =0; i<list.size(); i++){
int col = 100+(155*i/list.size());
fillPaint.setColor(Color.rgb(40, col, col));
startAngle = startAngle+sweepAngle;
sweepAngle = 360*Float.valueOf(list.get(i).get(numkey).toString())/total;
canvas.drawArc(80, 40, viewWidth-80, viewWidth-120, startAngle, sweepAngle, true, fillPaint);
canvas.drawArc(80, 40, viewWidth-80, viewWidth-120, startAngle, sweepAngle, true, strokePaint);
lineHeight = lineHeight + 80;
canvas.drawRect(40, viewWidth - 120 + lineHeight - 40, 80, viewWidth - 120+ lineHeight, fillPaint);
fillPaint.setColor(Color.BLACK); fillPaint.setTextSize(40); canvas.drawText(list.get(i).get(labelkey).toString() + " : " + list.get(i).get(numkey).toString(), 100, viewWidth - 120+ lineHeight, fillPaint);
}
}Kode ini hanya berfungsi untuk nilai positif.
Untuk menggunakan warna acak untuk PieChart, dalam kode di atas ubah kode di bawah ini.
int col = 100+(155*i/list.size());
fillPaint.setColor(Color.rgb(40, col, col));
Ke
int r = getRandom(0, 255);
int g = getRandom(0, 255);
int b = getRandom(0, 255);
fillPaint.setColor(Color.rgb(r, g, b));
16. Simpan dan Jalankan Proyek.
SHARE
