Tugas Softskill Pengertian Column Chart, Combo Chart dan Diff Chart

BAB 5

Penutup

Diff chart, coloumn chart, dan combo chart yaitu sebuah sistem yang merupakan bagian dari google chart, ketiga bagian dari google chart itu dapat memudahkan user atau pengguna untuk menyelesaikan pekerjaan atau masalah.

Daftar Pustaka

https://developers.google.com/chart/interactive/docs/gallery/diffchart

https://developers.google.com/chart/interactive/docs/gallery/combochart

https://developers.google.com/chart/interactive/docs/gallery/columnchart

https://www.programmableweb.com/api/google-chart

http://dul.web.id/belajar/apa-itu/arti/html-html5.php

http://repository.uksw.edu/bitstream/123456789/1742/3/T1_672007113_BAB%20II.pdf

https://developers.google.com/chart/interactive/docs/dev/dsl_about

https://www.npmjs.com/package/angular2-google-chart

http://www.dumetschool.com/blog/Apa-itu-Angular

http://stackoverflow.com/questions/12994282/php-mysql-google-chart-json-complete-example

https://developers.google.com/chart/interactive/docs/dev/dsl_about 

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);

Tugas Softskill Pengertian Column Chart, Combo Chart dan Diff Chart

BAB 3

Prangkat Lunak

3.1 Google chart

Google Chart API memungkinkan Anda secara dinamis menghasilkan grafik dengan string URL dan menanamkan grafik ini pada halaman web, atau men-download gambar untuk penggunaan lokal atau offline. Google Chart Tools memungkinkan menambahkan grafik hidup untuk setiap halaman web. Mereka memberikan keuntungan seperti galeri yang kaya visualisasi disediakan sebagai grafik gambar dan grafik interaktif dan mereka dapat membaca data langsung dari berbagai sumber data. Pengguna menanamkan data dan parameter format dalam permintaan HTTP, dan Google mengembalikan citra PNG dari grafik. Banyak jenis grafik yang didukung, dan dengan membuat permintaan ke tag gambar grafik dapat dimasukkan dalam halaman web.

3.2 HTML

HTML adalah kepanjangan dari HyperText Markup Language, merupakan bahasa interpretasi yang digunakan pada sebuah halaman web. HTML mendeskripsikan struktur halaman web yang ditulis dengan element atau tag yang yang mengapit konten atau teks didalamnya.

Penjelasan lebih rinci mengenai arti kata-perkata dari HTML adalah sebagai berikut :

HyperText: adalah istilah teks aktif, yang apabila diklik akan meloncat atau menuju halaman lain. Ini merupakan kemampuan dari sebuah halaman web yang dapat saling berhubungan antara halaman satu dengan lainnya. Markup: Merupakan tag-tag yang biasanya diawali dengan tag pembuka (opening tag) dan tag penutup (closing tag) yang memberi kemampuan untuk menata layout atau memformat struktur halaman web pada sebuah konten teks sederhana didalam file HTML itu sendiri. Language: yaitu bahasa yang digunakan oleh HTML itu sendiri. Perintah-perintah tag menggunakan bahasa yang dapat dimengerti oleh browser atau interpreter lainnya. HTML bukanlah sebuah bahasa pemrograman pada umumnya, seperti Java, C, C++, visual basic dan sejenisnya, melainkan bahasa markup / markah yang ditulis dengan perintah tag-tag atau element yang menaungi (mengapit) konten didalamnya yang akan ditampilkan pada sebuah halaman web oleh browser atau HTML interpreter (penerjemah HTML) lainnya.

HTML berguna untuk menampilkan konten, menghubungkan (link) antar halaman, memberi struktur dan informasi terkait dengan sebuah halaman web. konten sebuah web tidak hanya terbatas pada teks saja, melainkan konten interaktif lainnya seperti video, audio, gambar dan animasi dapat disisipkan dan ditampilkan pada halaman web.

3.3 HTML 5

HTML5 adalah kepanjangan dari HyperText Markup Language versi 5, merupakan HTML baru penerus dari HTML 4, XHTML1, dan DOM Level 2 HTML. HTML5 merupakan pengembangan bahasa HTML yang lebih baik, lebih berarti atau semantik (semantic meaning) yang sebelumnya adalah bahasa markup sederhana menjadi sebuah flatform canggih, penuh fitur dan kaya akan antarmuka pemrograman aplikasi yang disebut API (Application Programming Interface).

3.4 Angular JS

Definisi Angular JS merupakan framework javascript open souce yang dirilis oleh google pada tahun 2009. Konsep dari Angular JS adalah meningkatkan fungsi dari HTML untuk membangun web app. Bayangkan awalnya HTML hanya digunakan untuk membuat halaman website statis dan kini bisa berfungsi untuk membuat web app dengan menggunakan Angular JS. Angular JS bukan berupa libary melainkan framwork yang solid. Sama seperti framwork lainnya. Angular JS memiliki onsep MVC (Model, View, Control) meskipun dengan cara yang berbeda. Angular JS memiliki banyak keunggulan diantaranya :

1. Mengenalkan browser dengan sintak HTML baru

HTML5 telah menawarkan elemen baru seperti video, audio, canvas dan sebagainya. Dengan Angular JS kita dapat menambah banyak lagi elemen baru yang dimengerti oleh browser seperti draggable yang berfungsi agar elemen bisa di drag, zippy yang membuat akordion, juga sintak bisa dibuat dalam bahasa indonesia seperti <sembunyikan> yang berfungsi jika diklik maka elemen akan disembunyikan. Fungsi ini disebut Directive. Kitalah yang bertanggung jawab dalam pembuatan atau penambahan fungsi elemen HTML atau dengan kata lain kita mengajari browser mengerti bahasa sintak HTML yang kita buat.

2. HTML Template

Template yang digunakan Angular JS adalah template HTML biasa dengan penambahan ekspresi. Tidak perlu template yang memiliki engine khusus

3. Dependency Injection

Developer dapat membuat beberapa komponen kode yang bisa digunakan fungsinya berulang kali. Komponen ini disebut juga reusable komponen. Developer dapat memanggil komponen yang dibuat secara terpisah.

Contoh bagan Google menggunakan data tabel MySQL sebagai sumber data yang menggunakan non-ajax.

Google table MySQL Figure None.22

Contoh chart PHP-MySQL-JSON-Google

Chart PHP MySQL JSON Google Figure None.23

Contoh ChartPHP-PDO-JSON-MySQL-Google

ChartPHP-PDO-JSON-MySQL-Google Figure None.24

Contoh Chart PHP-MySQLi-JSON-Google

Chart PHP-MySQLi-JSON-Google Figure None.25

4. Sumber Data Java Library

Panduan ini menjelaskan cara menggunakan Visualisasi Sumber Data Perpustakaan Google untuk menerapkan sumber data.

Panduan ini menyediakan bagian tutorial Persiapan setelah konsep dalam Pendahuluan. Pendekatan ini memungkinkan Anda membuat sumber data sederhana dan mengujinya menggunakan visualisasi. Bagian tutorial lainnya Menggunakan Eksternal Data Store dan Mendefinisikan Kemampuan dan Aliran Events, yang mencakup implementasi lebih kompleks. Tergantung pada kebutuhan Anda, Anda mungkin tidak perlu untuk menyelesaikan semua tiga tutorial, meskipun dianjurkan bahwa Anda setidaknya menyelesaikan bagian Persiapan. Bagian lain dari buku yang membantu Anda untuk membangun pengetahuan Anda.

1. Isi
• Hadirin
• Ikhtisar
• panduan
• Contoh Referensi Cepat
• Informasi lebih lanjut
2. Ikhtisar panduan

Panduan ini berisi bagian berikut:

• Pengantar

Memperkenalkan perpustakaan, memberikan gambaran tentang bagaimana sumber data bekerja.

• Instalasi

Menjelaskan prasyarat dan dependensi perpustakaan, dan bagaimana untuk men-download dan membangun kode sumber.

• Mulai

Memperkenalkan SimpleExampleServlet. SimpleExampleServlet adalah contoh implementasi yang paling sederhana yang disediakan dengan perpustakaan. Bagian ini juga menyediakan petunjuk langkah demi langkah tentang bagaimana menjalankan dan menguji SimpleExampleServlet.

• Menggunakan Toko External Data

Memperkenalkan CsvDataSourceServlet. CsvDataSourceServlet adalah contoh implementasi yang menggunakan file CSV sebagai toko data eksternal. Bagian ini juga menyediakan petunjuk langkah demi langkah tentang bagaimana menjalankan dan menguji CsvDataSourceServlet.

• Mendefinisikan Kemampuan dan Arus Acara

Memperkenalkan AdvancedExampleServlet2. AdvancedExampleServlet2 adalah contoh implementasi yang mendefinisikan kemampuan dan aliran peristiwa. Bagian ini juga menyediakan petunjuk langkah demi langkah tentang bagaimana menjalankan dan menguji AdvancedExampleServlet2.

• Penanganan Keamanan, Kesalahan, Peringatan, dan Logging

Menjelaskan cara membuat sumber data Anda aman, dan bagaimana menangani kesalahan, peringatan, dan penebangan.

• Pelaksanaan Tips

Memberikan informasi yang akan membantu Anda menulis lebih implementasi kompleks perpustakaan.

• Paket Perpustakaan dan Kelas Key

Memberikan pengenalan tingkat tinggi untuk paket perpustakaan dan kelas utama. Contoh Referensi Cepat

Tugas Softskill Pengertian Column Chart, Combo Chart dan Diff Chart

Bab 2

KONSEP

2.1 Pengertian Chart

Sebagai suatu kombinasi antara angka, huruf, simbol, gambar, lambang, perkataan, lukisan, yang disajikan satu media untuk memberi konsep maupun ide dari pengirim kepada sasarannya dalam proses menyampaikan. Ada juga pengertian Grafik yang lainnya yaitu merupakan suatu rangka untuk membentuk Objek visualisasi tabel. Tabel yang terdiri dari angka-angka dapat disajikan atau dapat ditampilkan ke dalam bentuk gambar, bisa dalam berbentuk garis, lingkaran, batang dll.

jenis-jenis chart :

1. DIFF CHART

Bagan yang dirancang untuk menyoroti perbedaan antara dua grafik dengan data pembanding. Atau Diff data Bagan add-in yaitu alat di Excel untuk memvisualisasikan perubahan set 2 data. Ada 3 jenis Charts Diff Data yang tersedia: Pie Chart, Kolom Chart dan sebar Chart. Dengan membuat perubahan antara nilai analog menonjol, mereka dapat mengungkapkan variasi antara dataset. Anda membuat grafik diff dengan memanggil metode computeDiff dengan dua dataset untuk menghasilkan dataset ketiga mewakili diff, dan kemudian menggambar itu.grafik Diff tersedia untuk bar chart, grafik kolom, diagram lingkaran, dan grafik scatter.

Ada 4 set data sampel yang disediakan untuk menunjukkan struktur data untuk grafik :

• Pie atauKolom grafik sampel dengan string kategori
• Pie atauKolom grafik sampel dengan kategori tanggal
• Sampel Tebar Bagan dengan string kategori
• Sampel Tebar Bagan dengan kategori tanggal

Ini add-in mudah digunakan yang memungkinkan pengguna untuk menggunakan data sampel template untuk membangun / data mereka sendiri ditetapkan dengan menyisipkan format data yang sama ke dalam tabel data sampel. Tidak ada set khusus up diperlukan.

3 jenis Diff data Bagan tersedia. Pie Chart, Kolom Chart, Sebar Chart

• Mouse untuk menampilkan data rinci.
• Tipe data dalam kategori dapat angka, string dan tanggal.
• Masukkan judul disukai dengan mengklik pada teks judul.
• Mudah digunakan dengan mengikuti format data sampel yang dipilih untuk membangun data yang sendiri.
• Grafik ini teraktif yang grafik diperbarui saat data yang dimasukkan dalam sel spreadsheet.

10.          Charts Diff Sebar

Untuk menunjukkan grafik pencar diff, mari kita pertimbangkan sepasang percobaan, masing-masing membandingkan dua obat-obatan. Berikut adalah hasil dari dua percobaan, dan grafik diff yang dihasilkan:

Chart diff Sebar Figure None.1

Jika Anda bola mata dua grafik, Anda dapat memberitahu sesuatu telah berubah, tapi sulit untuk tahu persis apa. Grafik diff pencar membuat jelas dengan menunjukkan lintasan setiap titik data.

Berikut adalah garis utama menghasilkan tiga grafik di atas:

Coding Chart Diff Sebar Figure None.2

11.            Diff Pie Charts

Chart diff pie nestles data yang lebih tua di dalam data yang lebih baru. Mempertimbangkan perubahan dalam popularitas dari lima jurusan kuliah AS antara tahun 2000 dan 2010 (mouse di atas wedges untuk melihat nilai-nilai, data dari Pusat Nasional untuk Statistik Pendidikan). Berikut data tahun 2000, data 2010, dan perbedaan di antara mereka :

Diff Pie Chart Figure None.3

Berikut kode untuk menghasilkan tiga grafik:

Coding Diff Pie Chart Figure None.4

12.            Diff Bar dan Kolom

Data diff bar dan grafik kolom diff overlay baru di atas data yang lebih tua. Di sini, kita mengambil dua grafik-sederhana kolom data lama, salah satu yang baru-dan diff mereka:

Diff Bar Chart Figure None.5

Untuk contoh yang lebih rumit, mari kita lihat bagaimana popularitas beberapa nama (khususnya, nama-nama magang Visualisasi musim panas Google) telah berubah dari tahun 1980-an hingga saat ini (nomor per jutaan bayi, courtesy of Wizard Nama Bayi) .

Pertama, sebelum dan setelah nomor. Perhatikan bahwa skala yang berbeda :

Kolom Chart Figure None.6

Sekarang, sehingga kolom diff grafik dan diff bar chart :

Kolom Chart 2 Figure None.7

Kode untuk menghasilkan keempat grafik :

Koding Kolom Diff chart Figure None.8

2. Combo Chart

Sebuah grafik yang memungkinkan Anda membuat setiap seri sebagai jenis yang berbeda penanda dari daftar berikut: garis, bidang, bar, lilin, dan daerah melangkah.Untuk menetapkan jenis penanda default untuk seri, menentukan properti seriesType. Gunakan properti seri untuk menentukan sifat dari setiap seri individual.

Combo Chart Figure None.9

Coding Combo Chart Figure None.10

3. Column Chart

Grafik kolom berguna untuk menampilkan perubahan data selama periode waktu atau untuk menggambarkan perbandingan antara barang-barang. Dalam grafik kolom, kategori biasanya diselenggarakan sepanjang sumbu horizontal dan nilai-nilai sepanjang sumbu vertikal.

Sebuah grafik kolom adalah bar chart vertikal diberikan di browser menggunakan SVG atau VML, mana yang sesuai untuk browser pengguna. Seperti semua grafik Google, kolom grafik display tooltips ketika pengguna melayang di atas data. Untuk versi horizontal grafik ini, melihat grafik batang.

kolom mewarnai Mari grafik kepadatan dari empat logam mulia :

Clolumn Chart 1 Figure None.11

Di atas, semua warna adalah biru default. Itu karena mereka semua bagian dari seri yang sama; jika ada seri kedua, yang akan telah berwarna merah. Kami dapat menyesuaikan warna-warna ini dengan peran gaya:

Column Chart 2 Figure None.12

Ada tiga cara yang berbeda untuk memilih warna, dan tabel data kami menampilkan mereka semua: nilai RGB, nama warna bahasa Inggris, dan deklarasi CSS seperti

Coding Column Chart 2 Figure None.13

gaya kolom Peran kolom stylesThe gaya memungkinkan kendali Anda beberapa aspek dari penampilan kolom dengan deklarasi CSS seperti

• warna
• kegelapan
• isi warna
• mengisi opacity
• stroke warna
• stroke opacity
• stroke lebar

Column Chart 3 Figure None.14

Dua yang pertama kolom masing-masing menggunakan warna tertentu (yang pertama dengan nama Inggris, yang kedua dengan nilai RGB). Tidak ada opacity dipilih, sehingga default dari 1,0 (sangat lengkap) digunakan; itu sebabnya kolom kedua mengaburkan gridline belakangnya. Dalam kolom ketiga, opacity 0,2 digunakan, mengungkapkan gridline tersebut. Di keempat, tiga atribut gaya yang digunakan: stroke warna dan stroke-width untuk menarik perbatasan, dan mengisi warna untuk menentukan warna persegi panjang di dalam. Kolom paling kanan tambahan menggunakan langkah-opacity dan mengisi opacity untuk memilih kekeruhan untuk perbatasan dan isi :

Coding Column Chart 3 Figure None.15

7. Kolom label Grafik

memiliki beberapa jenis label, seperti label centang, label legenda, dan label dalam tooltips. Pada bagian ini, kita akan melihat bagaimana untuk menempatkan label dalam (atau dekat) kolom di bagan kolom. Katakanlah kita ingin membubuhi keterangan setiap kolom dengan simbol kimia yang sesuai. Kita dapat melakukannya dengan peran penjelasan :

Column Chart 3 Figure None.16

Pada tabel data kami, kami mendefinisikan kolom baru dengan {peran: ’penjelasan’} memegang label kolom kami :

Coding Column Chart 3 Figure None.17

Sementara pengguna dapat mengarahkan kursor ke kolom untuk melihat nilai-nilai data, Anda mungkin ingin menyertakan mereka pada kolom sendiri :

Column Chart 4 Figure None.18

Coding Column Chart 4 Figure None.19

8. Grafik kolom ditumpuk

Chart Kolom Tumpuk Figure None.20

Anda membuat bagan kolom ditumpuk dengan menetapkan pilihan isStacked untuk benar :

Coding Chart kolom tumpuk Figure None.21

Ditumpuk grafik kolom juga mendukung 100% susun, dimana tumpukan elemen pada setiap domain-nilai yang rescaled sehingga mereka menambahkan hingga 100%. Pilihan untuk ini isStacked: ’persen’, yang format setiap nilai sebagai persentase dari 100%, dan isStacked: ’relatif’, yang format setiap nilai sebagai sebagian kecil dari 1. Ada juga isStacked: ’mutlak’ pilihan, yang secara fungsional setara dengan isStacked: true.