Tugas Softskill Pengertian Column Chart, Combo Chart dan Diff Chart

BAB 4

Penerapan Konsep

4.1 Chart Diff

Coding Chart Diff Figure None.26

koding di atas untuk membuat chart seperti yang ada di bawah ini, var oldData untuk membuat chart data lama sedangkan var newDate umtuk data baru, var option itu untuk membandingkan data yang lama dengan data yang baru.

Chart Diff Pie Figure None.27

chart ini kita dapat edit, atau kita dapat ubah sesuka kita, ada beberapa cara :

Edit 1 Pie Figure None.28

ini untuk merubah ukurannya menjadi kecil dari yang akan bandingkan.

Edit 2 Pie Figure None.29

merubah ketebalan garis pada data yang di bandingkan.

Edit 3 Pie Figure None.30

untuk merubah ketebalan gambarnya

Edit 4 Pie Figure None.31

untuk merubah gambar menjadi jelas di tengah

Coding Contoh 2 Figure None.32

Untuk Kodingan di atas Outputnya

Contoh 2 Figure None.33

Dapat kita edit menjadi

Edit 1 Figure None.34

4.2 Chart Column

Coding Chart Column Figure None.35

Koding di atas akan menghasilkan output

Column Chart Figure None.36

Ada beberapa cara untuk mengedit Chart ini

Edit 1 Column Figure None.37

Jika kita mengganti koding awal menjadi seperti di gambar atas maka outputnya

Edit 1 Figure None.38

Edit 2 Figure None.39

Untuk koding di atas maka outputnya

Edit 2 Figure None.40

Edit 3 Figure None.41

untuk koding di atas outputnya

Edit 3 Figure None.42

Contoh lainnya

Coulmn Chart Batang Figure None.43

dengan Koding

Columnt Chart Batang Figure None.44

Contoh 2 Figure None.45

ini salah satu contohnya lagi dengan kodingan

Coding Contoh 2 Figure None.46

4.3 Chart Combo

Chart Combo Figure None.47

untuk output seperti di atas menggunakan koding

Coding Chart Combo Figure None.48

Memuat

untuk memuat paket dengan nama “corechart”

google.charts.load("current", {packages: ["corechart"]});

untuk visualisasi class dengan nama google.visualization.ComboChart

var visualization = new google.visualization.ComboChart(container);