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. 

Tugas Softskill Pengertian Column Chart, Combo Chart dan Diff Chart

BAB 1

PENDAHULUAN

\pagenumberingarabic

1.1 Latar Belakang

Pada Era modern, hal yang berkaitan dengan komputer sudah menjadi hal yang lumrah, termasuk dalam bidang teknologi terutama dalam bidang pemasaran hal ini terbentuk karena tekanan pada zaman yang sudah canggih. Dalam hal ini bidang pemasaran yang akan ditekankan pada proses presentasi, presentasi sendiri merupakan proses penyampaian ide, produk baru atau hasil pekerjaan yang ditampilkan dan dijelaskan pada audiens(peserta/penonton).

Sejarahnya, presentasi sudah dilakukan sejak 15000 tahun SM (Sebelum Masehi), pada masa itu presentasi yang dilakukan dalam bentuk storytelling dengan menggunakan media lukisan - lukisan pada dinding. Pada perkembangannya di tahun 500 SM, Yunani mulai memperkenalkan metode public speaking sebagai salah satu metode penyampaian ide. Lalu metode public speaking ini kemudian berkembang sampai ke Roma yang kemudian sering digunakan oleh pengacara maupun politikus. Metode public speaking ini melibatkan lebih banyak audiens dari sebelumnya serta telah merubah sejarah awal presentasi yang berupa penyampaian informasi/sejarah menjadi penyampaian ide yang disertai dengan bukti-bukti yang kuat untuk memperkuat pendapat/ide presenter.

Media visual dari presentasi kian berkembang hingga dimana pada tahun 1350 M bar graph (grafik batang) pertama kali dibuat oleh Bishop Nicole Oresme. Kemudian pada tahun 1845 M, komik strip modern diumumkan oleh Rudolphe Töpffer yang memuat teks dan gambar dalam satu frame cerita.

Alat untuk menampilkan presentasi pun kian berkembang ditandai dengan ditemukannya OHP pada tahun 1945 M. Seiring dengan berkembangnya teknologi, software PowerPoint pun ditemukan di tahun 1987 M yang kemudian terus berkembang hingga kini. Selain PowerPoint, software pembuat tampilan presentasi pun semakin banyak bermunculan seperti Prezi dan Keynote.

Lalu dalam mempresentasikan sesuatu yang berhubungan dengan grafik dilakukan dalam bentuk chart, hal ini dilakukan agar penyampaiannya pada audiens bisa lebih jelas dan tersirat. Chart memiliki jenis yang banyak namun yang dibahas kali ini yaitu column chart, combo chart dan diff chart. Column chart merupakan chart berformat kolom (vertikal) sehingga pembacaan data grafik akan terlihat secara vertikal, kemudian untuk combo chart memiliki format yang terdiri atas line, area, bars, batang lilin dan stepped area, terakhir diff chart, chart ini memiliki desain yang unik dimana antara dua data dilakukan perbandingan dengan grafik yang sama serta nilai-nilai analognya yang menonjol sehingga dapat mengungkapkan variasi antara dataset.

1.2 Tujuan Penulisan

Buku ini disusun dengan tujuan :

1. Memahami konsep chart (terutama pada column, combo dan diff) pada presentasi.
2. Memahami proses pengoperasian chart (terutama pada column, combo dan diff) pada presentasi.
3. Menerapkan chart (terutama pada column, combo dan diff) pada presentasi.

1.3 Ruang Lingkup

Ruang lingkup dari penulisan buku ini yaitu yang berkaitan dengan chart (terutama pada column, combo, dan diff) mengenai fungsi dan dampak secara tersirat pada audiens. 

Hujan

Hujan

           Hujan akan turun dikala awan sudah mendung, dikala waktunya memang akan turun ia akan turun. Biasanya setelah turunnya hujan akan munculnya pelangi dan kesejukan, membawa cuaca menjadi lebih sejuk. Banyak orang menyebut hujan turun ini membawa berkah. Tapi sebagian orang hujan ini dianggap bencana  dan menyalahkan hujan. Padahal jika ada bencana setelah hujan itu sesungguhnya bukan karna kesalahan hujan itu sendiri, itu karna kesalahan manusia itu sendiri yang sering kali sebagian umat manusia merusak alam dan tidak memikirkan apa akibatnya ke sekitarnya.

       Hujan adalah peristiwa alam yang akan turun berjangka waktu, dia akan turun di bulan september sampai dengan januari tetapi semakin jaman maju dan teknologi semakin canggih maka periode datangnya musim hujan dan musim kemarau tidak sesuai, dan sekarang tidak pastinya kapan akan turun hujan dan kapan musim kemarau dikarenakan banyaknya teknologi yang merusak alam yang tidak memperhatikan dampaknya itu sendiri.

         Peristiwa alam khususnya hujan tidak akan menimbulkan bencana jika kita umat manusia menjaga kelestarian alam menjaga tumbuhan, jika kita menyayangi dan menjaga alam maka alam juga akan menyayangi kita.

             Hal yang dapat kita pelajari dalam peristiwa alam khususnya peristiwa hujan ini. Kita sebagai umat manusia tidak sepantasnya menyalahkan peristiwa alam yang menyebabkan bencana, justru kita harus intopeksi ke diri kita sendiri masing-masing apa yang sudah kia sudah rusak? Apa yang sudah kita lakukan kepada alam sekitar kita? Maka dari itu kita harus menyayangi alam dan menjaganya seperti kita menyayangi diri kita sendiri.