HIGHCHART
KATA PENGANTAR
Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa karena dengan rahmat, karunia, serta taufik dan hidayah-Nya kami dapat menyelesaikan buku tentang Column Chart, Combo Chart, dan Diff Chart ini dengan baik meskipun banyak kekurangan didalamnya. Dan juga kami berterima kasih pada Bapak I Made Wiryana selaku Dosen mata kuliah Desain Pemodelan Grafik Universitas Gunadarma yang telah memberikan tugas ini kepada kami. Kami sangat berharap Buku ini dapat berguna dalam rangka menambah wawasan serta pengetahuan kita mengenai Teknik-teknik Column Chart, Combo Chart, dan Diff Chart. Kami juga menyadari sepenuhnya bahwa di dalam buku ini terdapat kekurangan dan jauh dari kata sempurna. Oleh sebab itu, kami berharap adanya kritik, saran dan usulan demi perbaikan buku yang telah kami buat di masa yang akan datang, mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun. Semoga buku sederhana ini dapat dipahami bagi siapapun yang membacanya. Sekiranya buku yang telah disusun ini dapat berguna bagi kami sendiri maupun orang yang membacanya. Sebelumnya kami mohon maaf apabila terdapat kesalahan kata-kata yang kurang berkenan dan kami memohon kritik dan saran yang membangun dari Anda demi perbaikan buku ini di waktu yang akan datang.
Depok, Desember 2016
Penyusun
BAB I
PENDAHULUAN
1 Latar Belakang Masalah
Desain biasa diterjemahkan sebagai seni terapan, arsitektur, dan berbagai pencapaian kreatif lainnya. Dalam sebuah kalimat, kata "desain" bisa digunakan, baik sebagai kata benda maupun kata kerja. Sebagai kata kerja, "desain" memiliki arti "proses untuk membuat dan menciptakan obyek baru". Sebagai kata benda, "desain" digunakan untuk menyebut hasil akhir dari sebuah proses kreatif, baik itu berwujud sebuah rencana, proposal, atau berbentuk benda nyata. Model adalah rencana, representasi, atau deskripsi yang menjelaskan suatu objek, sistem, atau konsep, yang seringkali berupa penyederhanaan atau idealisasi. Bentuknya dapat berupa model fisik (maket, bentuk prototipe), model citra (gambar rancangan, citra komputer), atau rumusan matematis. Maka pemodelan adalah tahap dimana akan dibentuk suatu obyek. Obyek yang dibuat akan dibentuk seolah-olah menjadi nyata. Dengan proses desain, obyek tersebut akan dibuat menjadi 2D maupun 3D. Proses pemodelan ini memerlukan perancangan dengan beberapa langkah saat pembuatannya. Misalnya menentukan obyek apa yang akan dibuat, metode apa yang akan digunakan, serta animasi apa yang sesuai dengan tujuan pembuatan obyek tersebut. Grafik atau Grafis identik dengan suatu garis, titik, tanda, dan bentuk huruf. Grafik merupakan cara membentuk bentuk huruf, tanda serta gambar menggunakan proses pencetakan. Grafik juga didefinisikan sebagai suatu pembuatan, penyimpanan serta manipulasi model dan citra. Jadi Desain Pemodelan Grafik adalah suatu proses menciptakan objek berupa citra (gambar rancangan, citra komputer) yang dibuat untuk informasi, ilustrasi, atau hiburan yang dibuat melalui aplikasi komputer.
2 Rumusan Masalah
Rumusan masalah dalam penulisan buku ini adalah bagaimana membuat suatu chart dalam aplikasi yang digunakan highchart yang di dalamnya terdapat berbagai macam jenis chart yang ada.
3 Batasan Masalah
Batasan masalah yang penulis uraikan disini adalah konsep dari Column Chart, Combo Chart, dan Diff Chart. Penulis juga menyertakan perangkat lunak yang mendukung dan contoh kasus dari Column Chart, Combo Chart, dan Diff Chart.
4 Tujuan Penulisan
Tujuan dari penulisan buku ini adalah agar pembaca dapat memahami teknik-teknik yang digunakan dalam menggunakan highchart sehingga, para pembaca dapat mengaplikasikannya dalam pembuatan suatu chart.
5 Metode Penelitian
Metode penelitian dari penulisan buku ini adalah referensi buku dan referensi internet dimana dalam hal ini penulis mencari materi tentang jenis-jenis chart, kemudian penulis mencoba mengaplikasikannya dalam membuat macam-macam chart dengan highchart.
6 Sistematika Penulisan
Sistematika penulisan, penulis menguraikannya dalam beberapa bab sebagai gambaran singkat tentang pokok pembahasan penulisan. Sistematika penulisan sebagai berikut :
• BAB I PENDAHULUAN
Bab ini membahas latar belakang masalah, rumusan masalah, batasan masalah, tujuan penulisan, metode penelitian dan sistematika penulisan.
• BAB II KONSEP DAN TEORI COLUMN CHART, COMBO CHART, DIFF CHART
Bab ini membahas konsep dari Column Chart, Combo Chart, dan Diff Chart. Teknik-teknik yang ada dalam membuat Column Chart, Combo Chart, dan Diff Chart.
• BAB III PERANGKAT LUNAK YANG BERHUBUNGAN DENGAN HIGHCHART
Bab ini membahas perangkat lunak yang mendukung atau menerangkan konsep pada bab 2, dan deskripsi perangkat lunak tersebut.
• BAB IV CONTOH KASUS PEMANFAATAN HIGHCHART
Bab ini berisi kasus atau contoh serta manfaat yang bisa kita dapatkan dari Column Chart, Combo Chart, dan Diff Chart yang menggunakan HIGHCHART.
• BAB V PENUTUP
Bab ini berisi kesimpulan dari pembahasan yang telah dikemukakan dalam bab-bab sebelumnya dan saran-saran yang sifatnya mengarah kepada penyempurnaan dari apa yang telah disajikan dalam tulisan ini.
BAB II
KONSEP DAN TEORI COLUMN CHART, COMBO CHART, DIFF CHART
COLUMN CHART ( GRAFIK KOLOM)
Sebuah grafik kolom menampilkan data seperti bar vertikal. Grafik Kolom sangat berguna untuk menunjukkan perubahan data dalam periode waktu tertentu atau menggambarkan perbandingan antar beberapa item. Jenis grafik itu sering juga disebut diagram batang. Grafik kolom atau diagram batang umum digunakan dalam dunia statistik untuk menampilkan data pertambahan dan perbandingan jumlah penduduk dari waktu ke waktu. Grafik kolom memiliki pilihan yang sama sebagai seri.
Y
HISTOGRAM
Grafik kolom dapat digunakan untuk membuat grafik histogram dengan menetapkan padding antara titik dan kelompok untuk 0.
Perhatikan bahwa BorderWidth dan bayagan juga dimatikan dalam contoh sehingga kolom tidak tumpang tindih.
COMBO CHART
Sebuah grafik yang memungkinkan untuk 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, tentukan seriesType properti. Gunakan series properti untuk menentukan sifat dari setiap seri individual.
DIFF CHART
Sebuah grafik diff adalah bagan yang dirancang untuk menyoroti perbedaan antara dua grafik dengan data pembanding. Dengan membuat perubahan antara nilai analog menonjol, mereka dapat mengungkapkan variasi antara dataset. Anda membuat grafik diff dengan memanggil computeDiff metode 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 .
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:
Charts Diff Pie
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 Bar dan Charts 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:
BAB III
PERANGKAT LUNAK YANG BERHUBUNGAN DENGAN TEORI COLUMN, COMBO, DAN DIFF CHART
MS. EXCEL
Microsoft Excel merupakan program aplikasi pengolah angka yang menyediakan menu fitur pembuatan grafik dengan berbagai jenis grafik. Dengan fitur tersebut kita dapat membuat grafik sesuai kebutuhan. Ketika hendak membuat grafik tertentu kita harus faham dengan jenis apa yang sesuai untuk menyajikan data yang kita miliki dalam bentuk grafik. Tidak semua jenis grafik dapat begitu saja kita gunakan untuk menyajikan data. Data dan jenis grafik harus disesuaikan agar informasi yang ingin disampaikan tidak berubah maknanya dan dapat dengan mudah difahami. Oleh karena itu pada bahasan ini hanya menjelaskan teori column, combo, dan diff chart.
COLUMN CHART PADA MS. EXCEL
COMBO CHART PADA MS.EXCEL
DIFF CHART PADA MS.EXCEL
• DIFF CHART SEBAR
• DIFF CHART PIE
• DIFF BAR DAN CHARTS KOLOM
HIGHCHART
Apa itu Highchart? Highcharts adalah charting library berbasis javascript yang dibuat oleh perusahaan Highsoft Solution AS. Highcharts ini ada yang berbayar juga ada yang free. Pihak perusahaan memberikan license Free bila kita menggunakannya untuk kepentingan personal atau non profit project contohnya pelajar, universitas dan personal webiste non commercial. dengan Highcharts kita dapat membuat beberapa bentuk grafik seperti line Chart, pie, Bar Column atau Area Chart dan masih banyak lagi.
• BANYAK JENIS BAGAN
Highcharts mendukung line, spline, daerah, areaspline, kolom, bar, pie, scatter, alat pengukur sudut, arearange, areasplinerange, columnrange dan polar jenis bagan. Banyak dari ini dapat dikombinasikan dalam satu grafik.
• DINAMIS
Melalui API penuh Anda dapat menambah, menghapus dan memodifikasi seri dan poin atau memodifikasi sumbu setiap saat setelah penciptaan grafik. Sejumlah kait peristiwa pasokan untuk pemrograman terhadap grafik. Ini membuka untuk solusi seperti grafik hidup terus-menerus memperbarui dengan nilai-nilai dari server, pengguna disediakan data dan banyak lagi.
• BEBERAPA AXES
Kadang-kadang Anda ingin membandingkan variabel yang tidak skala yang sama - untuk suhu misalnya terhadap curah hujan dan tekanan udara. Highcharts memungkinkan Anda menetapkan sumbu y untuk setiap seri - atau sumbu x jika Anda ingin membandingkan data set dari berbagai kategori. Setiap sumbu dapat ditempatkan ke kanan atau kiri, atas atau bawah grafik. Semua pilihan dapat diatur secara individual, termasuk membalikkan, styling dan posisi.
• LABEL TOOLTIP
Pada melayang grafik Highcharts dapat menampilkan teks tooltip dengan informasi pada setiap titik dan seri. tooltip berikut sebagai pengguna menggerakkan mouse ke grafik, dan upaya-upaya besar telah diambil untuk membuatnya tetap ke titik terdekat serta sehingga mudah untuk membaca titik yang berada di bawah titik lain.
• DATETIME AXIS
75% dari semua grafik dengan X dan Y axis memiliki tanggal-waktu X axis. Oleh karena itu Highchart sangat cerdas tentang nilai waktu. Dengan milidetik sumbu unit, Highcharts menentukan di mana untuk menempatkan kutu sehingga mereka selalu menandai awal bulan atau minggu, tengah malam dan tengah hari, jam penuh dll
• EKSPOR DAN CETAK
Dengan modul mengekspor diaktifkan, pengguna dapat mengekspor grafik untuk PNG, JPG, PDF atau format SVG di klik tombol, atau mencetak grafik secara langsung dari halaman web.
• ZOOMING
Dengan zoom pada grafik Anda dapat memeriksa bagian sangat menarik dari data lebih dekat. Zooming bisa dalam X atau dimensi Y, atau keduanya.
• PENGUKUR SUDUT
Ideal untuk dashboard, alat pengukur sudut memberikan grafik speedometer-seperti, mudah dibaca sekilas cepat.
• GRAFIK POLAR
jenis grafik Cartesian seperti garis, bidang, spline atau areaspline dapat dikonversi ke grafik polar atau radial oleh salah satu pilihan sederhana.
• BAGAN TERBALIK ATAU TERBALIK AXIS
Kadang-kadang Anda perlu untuk flip atas grafik dan membuat sumbu X muncul vertikal, seperti misalnya dalam bar chart. Membalikkan sumbu, dengan nilai tertinggi muncul terdekat Origo, juga didukung.
• ROTASI TEKS UNTUK LABEL
Semua label teks, termasuk label sumbu, label data untuk judul titik dan sumbu, bisa diputar di setiap sudut.
COLUMN CHART MENGGUNAKAN HIGHCHART
COMBO CHART MENGGUNAKAN HIGHCHART
DIFF CHART MENGGUNAKAN HIGHCHART
BAB IV
CONTOH KASUS PEMANFAATAN HIGHCHART
COLUMN CHART
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 .
CONTOH :
• KOLOM MEWARNAI
Grafik kepadatan dari empat logam mulia:
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 :
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:
• GAYA KOLOM
Peran gaya memungkinkan kendali Anda beberapa aspek dari penampilan kolom dengan deklarasi CSS seperti:
1. color
2. opacity
3. fill-color
4. fill-opacity
5. stroke-color
6. stroke-opacity
7. stroke-width
Kami tidak menyarankan Anda mencampur gaya terlalu bebas dalam bagan-memilih gaya dan tetap dengan itu-tapi untuk menunjukkan semua atribut gaya, inilah sampler:
Dua yang pertama kolom masing-masing menggunakan tertentu color (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. Pada kolom ketiga, opacity dari 0,2 digunakan, mengungkapkan gridline tersebut. Di keempat, tiga atribut gaya yang digunakan: stroke-color dan stroke-width untuk menarik perbatasan, dan fill-color untuk menentukan warna persegi panjang di dalam. Kolom paling kanan tambahan menggunakan stroke-opacity dan fill-opacity untuk memilih kekeruhan untuk perbatasan dan isi:
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ 'Tahun', 'kunjungan', {peran: 'gaya'}],
[ '2010', 10, 'warna: abu-abu'],
[ '2020', 14, 'color: # 76A7FA'],
[ '2030', 16, 'opacity: 0.2'],
[ '2040', 22, 'stroke color: # 703593; Stroke-width: 4; mengisi-color: # C5A5CF '],
[ '2050', 28, 'stroke color: # 871B47; Stroke-opacity: 0.6; Stroke-width: 8; mengisi-color: # BC5679; mengisi-opacity: 0.2 ']
]);
• KOLOM TABEL
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:
Pada tabel data kami, kami mendefinisikan kolom baru dengan { role: 'annotation' } memegang label kolom kami:
Sementara pengguna dapat mengarahkan kursor ke kolom untuk melihat nilai-nilai data, Anda mungkin ingin menyertakan mereka pada kolom sendiri:
Ini adalah sedikit lebih rumit dari yang seharusnya, karena kita membuat DataView untuk menentukan penjelasan untuk masing-masing kolom.
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( "saat ini", {paket: [ 'corechart']});
google.charts.setOnLoadCallback (drawChart);
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ "Element", "Kepadatan", {peran: "gaya"}],
[ "Tembaga", 8.94, "# b87333"],
[ "Perak", 10,49, "silver"],
[ "Emas", 19.30, "emas"],
[ "Platinum", 21,45, "color: # e5e4e2"]
]);
lihat var = new google.visualization.DataView (data);
view.setColumns ([0, 1,
{Calc: "stringify",
sourceColumn: 1,
Jenis: "string",
Peran: "penjelasan"},
2]);
Pilihan var = {
title: "Kepadatan Logam Mulia, di g / cm ^ 3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
Legenda: {position: "none"},
};
var grafik = google.visualization.ColumnChart baru (document.getElementById ( "columnchart_values"));
chart.draw (lihat, opsi);
}
</ Script>
<Div id = "columnchart_values" style = "width: 900px; height: 300px;"> </ div>
Jika kita ingin memformat nilai berbeda, kita bisa mendefinisikan formatter dan membungkusnya dalam fungsi seperti ini:
berfungsi getValueAt (kolom, dataTable, baris) {
kembali dataTable.getFormattedValue (baris, kolom);
}
Kemudian kita bisa menyebutnya dengan calc: getValueAt.bind(undefined, 1) .
Jika label terlalu besar untuk muat seluruhnya di dalam kolom, itu ditampilkan di luar:
• GRAFIK KOLOM DITUMPUK
Sebuah grafik kolom ditumpuk adalah bagan kolom yang menempatkan nilai-nilai terkait atas satu sama lain. Jika ada nilai-nilai negatif, mereka ditumpuk dalam urutan terbalik di bawah baseline grafik ini. Ini biasanya digunakan ketika kategori alami terbagi menjadi komponen. Misalnya, pertimbangkan beberapa penjualan buku hipotetis, dibagi berdasarkan genre dan dibandingkan seluruh waktu:
Anda membuat bagan kolom ditumpuk dengan menetapkan isStacked pilihan untuk true :
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: 'percent' , yang format setiap nilai sebagai persentase dari 100%, dan isStacked: 'relative' , yang format setiap nilai sebagai sebagian kecil dari 1. Ada juga isStacked: 'absolute' pilihan, yang secara fungsional setara dengan isStacked: true .
Catatan di ditumpuk grafik 100% di sebelah kanan, nilai-nilai tick didasarkan pada relatif 0-1 skala sebagai pecahan dari 1, tetapi nilai-nilai sumbu ditampilkan sebagai persentase. Hal ini karena kutu persentase sumbu adalah hasil dari menerapkan format "#. ##%" Dengan relatif 0-1 nilai skala. Bila menggunakan isStacked: 'percent' , pastikan untuk menentukan nilai-nilai kutu / axis menggunakan relatif skala 0-1.
• DITUMPUK
• 100% TUMPUKAN
• MEMBUAT MATERIAL KOLOM GRAFIK
Pada tahun 2014, Google mengumumkan pedoman dimaksudkan untuk mendukung tampilan umum dan merasa seluruh properti dan aplikasi (seperti aplikasi Android) yang berjalan di platform Google. Kami menyebutnya upaya ini Desain Material. Kami akan menyediakan "Material" versi dari semua grafik utama kami; Anda dipersilakan untuk menggunakan mereka jika Anda suka bagaimana mereka terlihat. Membuat Kolom Bagan Bahan ini mirip dengan menciptakan apa yang sekarang kita akan sebut "klasik" Kolom Chart. Anda memuat Google Visualisasi API (meskipun dengan 'bar' paket bukan 'corechart' paket), mendefinisikan DataTable Anda, dan kemudian membuat objek (tapi kelas google.charts.Bar bukan google.visualization.ColumnChart ). Sejak bar chart dan grafik kolom pada dasarnya identik tetapi untuk orientasi, kita sebut kedua Material Bar Charts, terlepas dari apakah bar vertikal (klasik, bagan kolom) atau horizontal (bar chart). Material, satu-satunya perbedaan adalah di bars pilihan. Bila diatur ke 'horizontal' , orientasi akan menyerupai tradisional klasik Bar Chart; jika tidak, bar akan vertikal.
Catatan: Charts Bahan tidak akan bekerja di versi lama dari Internet Explorer. (IE8 dan versi sebelumnya tidak mendukung SVG, yang Charts Material membutuhkan.)
Company Performance
Sales, Expenses,dan Profit:2014-2017
Charts bahan Kolom memiliki banyak perbaikan kecil lebih Charts Kolom klasik, termasuk palet warna ditingkatkan, bulat sudut, label format yang lebih jelas, jarak standar ketat antara seri, gridlines lebih lembut dan judul (dan penambahan sub judul).
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawChart);
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ 'Tahun', 'Penjualan', 'Beban', 'Laba'],
[ '2014', 1000, 400, 200],
[ '2015', 1170, 460, 250],
[ '2016', 660, 1120, 300],
[ '2017', 1030, 540, 350]
]);
Pilihan var = {
grafik: {
Judul: 'Kinerja Perusahaan,
subtitle: 'Penjualan, Biaya, dan Profit: 2014-2017',
}
};
var grafik = google.charts.Bar baru (document.getElementById ( 'columnchart_material'));
chart.draw (data, opsi);
}
</ Script>
</ Head>
<Body>
<Div id = "columnchart_material" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
Charts Material yang dalam versi beta. Penampilan dan interaktivitas sebagian besar akhir, tapi banyak dari pilihan yang tersedia di Charts Klasik belum tersedia di dalamnya. Anda dapat menemukan daftar pilihan yang belum didukung dalam masalah ini . Juga, pilihan cara dinyatakan tidak selesai, sehingga Anda harus mengkonversi pilihan Anda dengan mengganti baris ini: chart.draw(data, options); dengan ini:
chart.draw(data, google.charts.Bar.convertOptions(options));
Menggunakan google.charts.Bar.convertOptions() memungkinkan Anda untuk mengambil keuntungan dari fitur tertentu, seperti hAxis/vAxis.format pilihan preset.
• GRAFIK DUAL-Y
Catatan: sumbu Dual-Y tersedia hanya untuk grafik Material (yaitu, orang-orang dengan paket bar ).
Kadang-kadang Anda akan ingin menampilkan dua seri di bagan kolom, dengan dua independen Y-sumbu: sumbu tersisa untuk satu seri, dan sumbu yang tepat untuk yang lain:
Perhatikan bahwa tidak hanya kami dua y-sumbu berlabel berbeda ( "parsec" versus "magnitudo tampak") tetapi mereka masing-masing memiliki skala independen mereka sendiri dan gridlines. Jika Anda ingin menyesuaikan perilaku ini, gunakan vAxis.gridlines pilihan. Dalam kode di bawah ini, axes dan series pilihan bersama-sama menentukan penampilan dual-Y dari grafik. The series opsi menentukan sumbu yang digunakan untuk setiap ( 'distance' dan 'brightness' , mereka tidak perlu memiliki hubungan dengan nama kolom dalam DataTable). The axes pilihan kemudian membuat grafik ini grafik dual-Y, menempatkan 'distance' sumbu di sebelah kiri (berlabel "parsec") dan 'brightness' sumbu di sebelah kanan (berlabel "jelas besarnya").
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawStuff);
berfungsi drawStuff () {
Data var = google.visualization.arrayToDataTable baru ([
[ 'Galaxy', 'Jarak', 'Brightness'],
[ 'Canis Major Dwarf', 8000, 23,3],
[ 'Sagitarius Dwarf', 24000, 4.5],
[ 'Dwarf Ursa Major II', 30000, 14,3],
[ 'Lg. Magellanic Cloud ', 50000, 0,9],
[ 'Bootes I', 60000, 13,1]
]);
Pilihan var = {
width: 900,
grafik: {
Judul: 'galaksi Terdekat',
subtitle: 'jarak di sebelah kiri, kecerahan di sebelah kanan'
},
seri: {
0: {axis: 'jarak'}, // Ikat seri 0 sumbu bernama 'jarak'.
1: {axis: 'kecerahan'} // Ikat seri 1 ke sumbu bernama 'kecerahan'.
},
sumbu: {
y: {
Jarak: {label: 'parsec'}, // Kiri y-axis.
kecerahan: {sisi: 'kanan', label: 'magnitudo tampak'} // kanan y-axis.
}
}
};
var grafik = baru google.charts.Bar (document.getElementById ( 'dual_y_div'));
chart.draw (data, opsi);
};
</ Script>
</ Head>
<Body>
<Div id = "dual_y_div" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
• GRAFIK TOP-X
Catatan: sumbu Top-X hanya tersedia untuk grafik Material (yaitu, orang-orang dengan paket bar ).
Jika Anda ingin menempatkan label sumbu X dan judul di bagian atas grafik Anda daripada bagian bawah, Anda dapat melakukannya di tangga lagu Material dengan axes.x opsi:
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawStuff);
berfungsi drawStuff () {
Data var = google.visualization.arrayToDataTable baru ([
[ 'Pindah', 'Persentase'],
[ "Raja pion (e4)", 44],
[ "Ratu pion (d4)", 31],
[ "Knight ke King 3 (Nf3)", 12],
[ "Uskup pion Ratu (c4)", 10],
[ 'Lain', 3]
]);
Pilihan var = {
Judul: 'pembukaan Catur bergerak',
width: 900,
Legenda: {position: 'none'},
grafik: {subtitle: 'popularitas dengan persentase'},
sumbu: {
x: {
0: {sisi: 'top', label: 'White bergerak'} // Top x-axis.
}
},
bar: {groupWidth: "90%"}
};
var grafik = baru google.charts.Bar (document.getElementById ( 'top_x_div'));
// Mengkonversi pilihan klasik untuk pilihan Material.
chart.draw (data, google.charts.Bar.convertOptions (pilihan));
};
</ Script>
</ Head>
<Body>
<Div id = "top_x_div" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
Pemuatan
The google.charts.load nama paket adalah "corechart" .
google.charts.load ( "saat ini", {paket: [ "corechart"]}); Untuk Charts Kolom Material, google.charts.load nama paket adalah "bar" . (Tidak kesalahan ketik: Bahan Bar Chart menangani kedua orientasi.)
google.charts.load ( "saat ini", {paket: [ "bar"]}); Nama kelas visualisasi adalah google.visualization.ColumnChart .
var visualisasi = baru google.visualization.ColumnChart (kontainer); Untuk Charts Kolom Material, nama kelas visualisasi adalah google.charts.Bar . (Tidak kesalahan ketik: Bahan Bar Chart menangani kedua orientasi.)
var grafik = baru google.charts.Bar (kontainer); format data
Setiap baris di tabel mewakili sekelompok bar yang berdekatan.
Baris: Setiap baris di tabel mewakili sekelompok bar.
kolom:
Pilihan konfigurasi
COMBO CHARTS
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, tentukan seriesType properti. Gunakan series properti untuk menentukan sifat dari setiap seri individual.
Pemuatan
The google.charts.load nama paket adalah "corechart"
Nama kelas visualisasi adalah google.visualization.ComboChart
Format Data
Baris: Setiap baris di tabel mewakili satu set titik data dengan lokasi sumbu x sama.
kolom:
• PILIHAN KONFIGURASI
• METODE
Acara
Untuk informasi lebih lanjut tentang cara menggunakan peristiwa ini, lihat Dasar Interaktivitas , Penanganan Events , dan Firing Acara .
Kebijakan Data
Semua kode dan data diproses dan diberikan dalam browser. Tidak ada data yang dikirim ke server apapun.
DIFF CHART
Sebuah grafik diff adalah bagan yang dirancang untuk menyoroti perbedaan antara dua grafik dengan data pembanding. Dengan membuat perubahan antara nilai analog menonjol, mereka dapat mengungkapkan variasi antara dataset. Anda membuat grafik diff dengan memanggil computeDiff metode 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 .
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:
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:
Anda dapat mengubah opacity dari ekor dengan diff.oldData.opacity pilihan, dan opacity dari titik data baru dengan diff.newData.opacity opsi:
var options = { diff: { oldData: { opacity: 1.0 } } };
var options = { diff: { newData: { opacity: 0.5 } } };
Charts Diff Pie
Berikut kode untuk menghasilkan tiga grafik:
Anda dapat mengontrol ukuran relatif dari lingkaran dengan diff.innerCircle.radiusFactor , perbatasan antara dua dengan diff.innerCircle.borderFactor , dan transparansi masing-masing dengan diff.oldData.opacity dan diff.newData.opacity . Akhirnya, Anda dapat membalikkan perilaku sehingga data tertua mengelilingi data terbaru dengan diff.oldData.inCenter . Contoh masing-masing:
Diff Bar dan Charts 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:
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 Wisaya Nama Bayi ) .
Kode untuk menghasilkan keempat grafik:
Diff kolom dan bar chart membiarkan Anda mengontrol lebar relatif dari bar lama dan baru dengan diff.newData.widthFactor opsi:
BAB V
KATA PENUTUP
Demikianlah buku yang kami buat semoga bermanfaat bagi orang yang membacanya dan menambah wawasan bagi orang yang membaca buku ini. Dan penulis mohon maaf apabila ada kesalahan dalam penulisan kata dan kalimat yang tidak jelas, mengerti, dan lugas mohon jangan dimasukan ke dalam hati.
Dan kami juga sangat mengharapkan yang membaca buku ini akan bertambah motivasinya dan mengapai cita-cita yang di inginkan, karena kami membuat buku ini mempunyai arti penting yang sangat mendalam.
Sekian penutup dari kami semoga berkenan di hati dan kami ucapkan terima kasih yang sebesar-besarnya.
DAFTAR PUSTAKA
https://developers.google.com/chart/interactive/docs/gallery/columnchart
https://developers.google.com/chart/interactive/docs/gallery/combochart
https://developers.google.com/chart/interactive/docs/gallery/diffchart
Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa karena dengan rahmat, karunia, serta taufik dan hidayah-Nya kami dapat menyelesaikan buku tentang Column Chart, Combo Chart, dan Diff Chart ini dengan baik meskipun banyak kekurangan didalamnya. Dan juga kami berterima kasih pada Bapak I Made Wiryana selaku Dosen mata kuliah Desain Pemodelan Grafik Universitas Gunadarma yang telah memberikan tugas ini kepada kami. Kami sangat berharap Buku ini dapat berguna dalam rangka menambah wawasan serta pengetahuan kita mengenai Teknik-teknik Column Chart, Combo Chart, dan Diff Chart. Kami juga menyadari sepenuhnya bahwa di dalam buku ini terdapat kekurangan dan jauh dari kata sempurna. Oleh sebab itu, kami berharap adanya kritik, saran dan usulan demi perbaikan buku yang telah kami buat di masa yang akan datang, mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun. Semoga buku sederhana ini dapat dipahami bagi siapapun yang membacanya. Sekiranya buku yang telah disusun ini dapat berguna bagi kami sendiri maupun orang yang membacanya. Sebelumnya kami mohon maaf apabila terdapat kesalahan kata-kata yang kurang berkenan dan kami memohon kritik dan saran yang membangun dari Anda demi perbaikan buku ini di waktu yang akan datang.
Depok, Desember 2016
Penyusun
BAB I
PENDAHULUAN
1 Latar Belakang Masalah
Desain biasa diterjemahkan sebagai seni terapan, arsitektur, dan berbagai pencapaian kreatif lainnya. Dalam sebuah kalimat, kata "desain" bisa digunakan, baik sebagai kata benda maupun kata kerja. Sebagai kata kerja, "desain" memiliki arti "proses untuk membuat dan menciptakan obyek baru". Sebagai kata benda, "desain" digunakan untuk menyebut hasil akhir dari sebuah proses kreatif, baik itu berwujud sebuah rencana, proposal, atau berbentuk benda nyata. Model adalah rencana, representasi, atau deskripsi yang menjelaskan suatu objek, sistem, atau konsep, yang seringkali berupa penyederhanaan atau idealisasi. Bentuknya dapat berupa model fisik (maket, bentuk prototipe), model citra (gambar rancangan, citra komputer), atau rumusan matematis. Maka pemodelan adalah tahap dimana akan dibentuk suatu obyek. Obyek yang dibuat akan dibentuk seolah-olah menjadi nyata. Dengan proses desain, obyek tersebut akan dibuat menjadi 2D maupun 3D. Proses pemodelan ini memerlukan perancangan dengan beberapa langkah saat pembuatannya. Misalnya menentukan obyek apa yang akan dibuat, metode apa yang akan digunakan, serta animasi apa yang sesuai dengan tujuan pembuatan obyek tersebut. Grafik atau Grafis identik dengan suatu garis, titik, tanda, dan bentuk huruf. Grafik merupakan cara membentuk bentuk huruf, tanda serta gambar menggunakan proses pencetakan. Grafik juga didefinisikan sebagai suatu pembuatan, penyimpanan serta manipulasi model dan citra. Jadi Desain Pemodelan Grafik adalah suatu proses menciptakan objek berupa citra (gambar rancangan, citra komputer) yang dibuat untuk informasi, ilustrasi, atau hiburan yang dibuat melalui aplikasi komputer.
2 Rumusan Masalah
Rumusan masalah dalam penulisan buku ini adalah bagaimana membuat suatu chart dalam aplikasi yang digunakan highchart yang di dalamnya terdapat berbagai macam jenis chart yang ada.
3 Batasan Masalah
Batasan masalah yang penulis uraikan disini adalah konsep dari Column Chart, Combo Chart, dan Diff Chart. Penulis juga menyertakan perangkat lunak yang mendukung dan contoh kasus dari Column Chart, Combo Chart, dan Diff Chart.
4 Tujuan Penulisan
Tujuan dari penulisan buku ini adalah agar pembaca dapat memahami teknik-teknik yang digunakan dalam menggunakan highchart sehingga, para pembaca dapat mengaplikasikannya dalam pembuatan suatu chart.
5 Metode Penelitian
Metode penelitian dari penulisan buku ini adalah referensi buku dan referensi internet dimana dalam hal ini penulis mencari materi tentang jenis-jenis chart, kemudian penulis mencoba mengaplikasikannya dalam membuat macam-macam chart dengan highchart.
6 Sistematika Penulisan
Sistematika penulisan, penulis menguraikannya dalam beberapa bab sebagai gambaran singkat tentang pokok pembahasan penulisan. Sistematika penulisan sebagai berikut :
• BAB I PENDAHULUAN
Bab ini membahas latar belakang masalah, rumusan masalah, batasan masalah, tujuan penulisan, metode penelitian dan sistematika penulisan.
• BAB II KONSEP DAN TEORI COLUMN CHART, COMBO CHART, DIFF CHART
Bab ini membahas konsep dari Column Chart, Combo Chart, dan Diff Chart. Teknik-teknik yang ada dalam membuat Column Chart, Combo Chart, dan Diff Chart.
• BAB III PERANGKAT LUNAK YANG BERHUBUNGAN DENGAN HIGHCHART
Bab ini membahas perangkat lunak yang mendukung atau menerangkan konsep pada bab 2, dan deskripsi perangkat lunak tersebut.
• BAB IV CONTOH KASUS PEMANFAATAN HIGHCHART
Bab ini berisi kasus atau contoh serta manfaat yang bisa kita dapatkan dari Column Chart, Combo Chart, dan Diff Chart yang menggunakan HIGHCHART.
• BAB V PENUTUP
Bab ini berisi kesimpulan dari pembahasan yang telah dikemukakan dalam bab-bab sebelumnya dan saran-saran yang sifatnya mengarah kepada penyempurnaan dari apa yang telah disajikan dalam tulisan ini.
BAB II
KONSEP DAN TEORI COLUMN CHART, COMBO CHART, DIFF CHART
COLUMN CHART ( GRAFIK KOLOM)
Sebuah grafik kolom menampilkan data seperti bar vertikal. Grafik Kolom sangat berguna untuk menunjukkan perubahan data dalam periode waktu tertentu atau menggambarkan perbandingan antar beberapa item. Jenis grafik itu sering juga disebut diagram batang. Grafik kolom atau diagram batang umum digunakan dalam dunia statistik untuk menampilkan data pertambahan dan perbandingan jumlah penduduk dari waktu ke waktu. Grafik kolom memiliki pilihan yang sama sebagai seri.
Y
HISTOGRAM
Grafik kolom dapat digunakan untuk membuat grafik histogram dengan menetapkan padding antara titik dan kelompok untuk 0.
Perhatikan bahwa BorderWidth dan bayagan juga dimatikan dalam contoh sehingga kolom tidak tumpang tindih.
COMBO CHART
Sebuah grafik yang memungkinkan untuk 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, tentukan seriesType properti. Gunakan series properti untuk menentukan sifat dari setiap seri individual.
DIFF CHART
Sebuah grafik diff adalah bagan yang dirancang untuk menyoroti perbedaan antara dua grafik dengan data pembanding. Dengan membuat perubahan antara nilai analog menonjol, mereka dapat mengungkapkan variasi antara dataset. Anda membuat grafik diff dengan memanggil computeDiff metode 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 .
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:
Charts Diff Pie
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 Bar dan Charts 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:
BAB III
PERANGKAT LUNAK YANG BERHUBUNGAN DENGAN TEORI COLUMN, COMBO, DAN DIFF CHART
MS. EXCEL
Microsoft Excel merupakan program aplikasi pengolah angka yang menyediakan menu fitur pembuatan grafik dengan berbagai jenis grafik. Dengan fitur tersebut kita dapat membuat grafik sesuai kebutuhan. Ketika hendak membuat grafik tertentu kita harus faham dengan jenis apa yang sesuai untuk menyajikan data yang kita miliki dalam bentuk grafik. Tidak semua jenis grafik dapat begitu saja kita gunakan untuk menyajikan data. Data dan jenis grafik harus disesuaikan agar informasi yang ingin disampaikan tidak berubah maknanya dan dapat dengan mudah difahami. Oleh karena itu pada bahasan ini hanya menjelaskan teori column, combo, dan diff chart.
COLUMN CHART PADA MS. EXCEL
COMBO CHART PADA MS.EXCEL
DIFF CHART PADA MS.EXCEL
• DIFF CHART SEBAR
• DIFF CHART PIE
• DIFF BAR DAN CHARTS KOLOM
HIGHCHART
Apa itu Highchart? Highcharts adalah charting library berbasis javascript yang dibuat oleh perusahaan Highsoft Solution AS. Highcharts ini ada yang berbayar juga ada yang free. Pihak perusahaan memberikan license Free bila kita menggunakannya untuk kepentingan personal atau non profit project contohnya pelajar, universitas dan personal webiste non commercial. dengan Highcharts kita dapat membuat beberapa bentuk grafik seperti line Chart, pie, Bar Column atau Area Chart dan masih banyak lagi.
• BANYAK JENIS BAGAN
Highcharts mendukung line, spline, daerah, areaspline, kolom, bar, pie, scatter, alat pengukur sudut, arearange, areasplinerange, columnrange dan polar jenis bagan. Banyak dari ini dapat dikombinasikan dalam satu grafik.
• DINAMIS
Melalui API penuh Anda dapat menambah, menghapus dan memodifikasi seri dan poin atau memodifikasi sumbu setiap saat setelah penciptaan grafik. Sejumlah kait peristiwa pasokan untuk pemrograman terhadap grafik. Ini membuka untuk solusi seperti grafik hidup terus-menerus memperbarui dengan nilai-nilai dari server, pengguna disediakan data dan banyak lagi.
• BEBERAPA AXES
Kadang-kadang Anda ingin membandingkan variabel yang tidak skala yang sama - untuk suhu misalnya terhadap curah hujan dan tekanan udara. Highcharts memungkinkan Anda menetapkan sumbu y untuk setiap seri - atau sumbu x jika Anda ingin membandingkan data set dari berbagai kategori. Setiap sumbu dapat ditempatkan ke kanan atau kiri, atas atau bawah grafik. Semua pilihan dapat diatur secara individual, termasuk membalikkan, styling dan posisi.
• LABEL TOOLTIP
Pada melayang grafik Highcharts dapat menampilkan teks tooltip dengan informasi pada setiap titik dan seri. tooltip berikut sebagai pengguna menggerakkan mouse ke grafik, dan upaya-upaya besar telah diambil untuk membuatnya tetap ke titik terdekat serta sehingga mudah untuk membaca titik yang berada di bawah titik lain.
• DATETIME AXIS
75% dari semua grafik dengan X dan Y axis memiliki tanggal-waktu X axis. Oleh karena itu Highchart sangat cerdas tentang nilai waktu. Dengan milidetik sumbu unit, Highcharts menentukan di mana untuk menempatkan kutu sehingga mereka selalu menandai awal bulan atau minggu, tengah malam dan tengah hari, jam penuh dll
• EKSPOR DAN CETAK
Dengan modul mengekspor diaktifkan, pengguna dapat mengekspor grafik untuk PNG, JPG, PDF atau format SVG di klik tombol, atau mencetak grafik secara langsung dari halaman web.
• ZOOMING
Dengan zoom pada grafik Anda dapat memeriksa bagian sangat menarik dari data lebih dekat. Zooming bisa dalam X atau dimensi Y, atau keduanya.
• PENGUKUR SUDUT
Ideal untuk dashboard, alat pengukur sudut memberikan grafik speedometer-seperti, mudah dibaca sekilas cepat.
• GRAFIK POLAR
jenis grafik Cartesian seperti garis, bidang, spline atau areaspline dapat dikonversi ke grafik polar atau radial oleh salah satu pilihan sederhana.
• BAGAN TERBALIK ATAU TERBALIK AXIS
Kadang-kadang Anda perlu untuk flip atas grafik dan membuat sumbu X muncul vertikal, seperti misalnya dalam bar chart. Membalikkan sumbu, dengan nilai tertinggi muncul terdekat Origo, juga didukung.
• ROTASI TEKS UNTUK LABEL
Semua label teks, termasuk label sumbu, label data untuk judul titik dan sumbu, bisa diputar di setiap sudut.
COLUMN CHART MENGGUNAKAN HIGHCHART
COMBO CHART MENGGUNAKAN HIGHCHART
DIFF CHART MENGGUNAKAN HIGHCHART
BAB IV
CONTOH KASUS PEMANFAATAN HIGHCHART
COLUMN CHART
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 .
CONTOH :
• KOLOM MEWARNAI
Grafik kepadatan dari empat logam mulia:
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 :
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:
• GAYA KOLOM
Peran gaya memungkinkan kendali Anda beberapa aspek dari penampilan kolom dengan deklarasi CSS seperti:
1. color
2. opacity
3. fill-color
4. fill-opacity
5. stroke-color
6. stroke-opacity
7. stroke-width
Kami tidak menyarankan Anda mencampur gaya terlalu bebas dalam bagan-memilih gaya dan tetap dengan itu-tapi untuk menunjukkan semua atribut gaya, inilah sampler:
Dua yang pertama kolom masing-masing menggunakan tertentu color (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. Pada kolom ketiga, opacity dari 0,2 digunakan, mengungkapkan gridline tersebut. Di keempat, tiga atribut gaya yang digunakan: stroke-color dan stroke-width untuk menarik perbatasan, dan fill-color untuk menentukan warna persegi panjang di dalam. Kolom paling kanan tambahan menggunakan stroke-opacity dan fill-opacity untuk memilih kekeruhan untuk perbatasan dan isi:
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ 'Tahun', 'kunjungan', {peran: 'gaya'}],
[ '2010', 10, 'warna: abu-abu'],
[ '2020', 14, 'color: # 76A7FA'],
[ '2030', 16, 'opacity: 0.2'],
[ '2040', 22, 'stroke color: # 703593; Stroke-width: 4; mengisi-color: # C5A5CF '],
[ '2050', 28, 'stroke color: # 871B47; Stroke-opacity: 0.6; Stroke-width: 8; mengisi-color: # BC5679; mengisi-opacity: 0.2 ']
]);
• KOLOM TABEL
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:
Pada tabel data kami, kami mendefinisikan kolom baru dengan { role: 'annotation' } memegang label kolom kami:
Sementara pengguna dapat mengarahkan kursor ke kolom untuk melihat nilai-nilai data, Anda mungkin ingin menyertakan mereka pada kolom sendiri:
Ini adalah sedikit lebih rumit dari yang seharusnya, karena kita membuat DataView untuk menentukan penjelasan untuk masing-masing kolom.
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( "saat ini", {paket: [ 'corechart']});
google.charts.setOnLoadCallback (drawChart);
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ "Element", "Kepadatan", {peran: "gaya"}],
[ "Tembaga", 8.94, "# b87333"],
[ "Perak", 10,49, "silver"],
[ "Emas", 19.30, "emas"],
[ "Platinum", 21,45, "color: # e5e4e2"]
]);
lihat var = new google.visualization.DataView (data);
view.setColumns ([0, 1,
{Calc: "stringify",
sourceColumn: 1,
Jenis: "string",
Peran: "penjelasan"},
2]);
Pilihan var = {
title: "Kepadatan Logam Mulia, di g / cm ^ 3",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
Legenda: {position: "none"},
};
var grafik = google.visualization.ColumnChart baru (document.getElementById ( "columnchart_values"));
chart.draw (lihat, opsi);
}
</ Script>
<Div id = "columnchart_values" style = "width: 900px; height: 300px;"> </ div>
Jika kita ingin memformat nilai berbeda, kita bisa mendefinisikan formatter dan membungkusnya dalam fungsi seperti ini:
berfungsi getValueAt (kolom, dataTable, baris) {
kembali dataTable.getFormattedValue (baris, kolom);
}
Kemudian kita bisa menyebutnya dengan calc: getValueAt.bind(undefined, 1) .
Jika label terlalu besar untuk muat seluruhnya di dalam kolom, itu ditampilkan di luar:
• GRAFIK KOLOM DITUMPUK
Sebuah grafik kolom ditumpuk adalah bagan kolom yang menempatkan nilai-nilai terkait atas satu sama lain. Jika ada nilai-nilai negatif, mereka ditumpuk dalam urutan terbalik di bawah baseline grafik ini. Ini biasanya digunakan ketika kategori alami terbagi menjadi komponen. Misalnya, pertimbangkan beberapa penjualan buku hipotetis, dibagi berdasarkan genre dan dibandingkan seluruh waktu:
Anda membuat bagan kolom ditumpuk dengan menetapkan isStacked pilihan untuk true :
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: 'percent' , yang format setiap nilai sebagai persentase dari 100%, dan isStacked: 'relative' , yang format setiap nilai sebagai sebagian kecil dari 1. Ada juga isStacked: 'absolute' pilihan, yang secara fungsional setara dengan isStacked: true .
Catatan di ditumpuk grafik 100% di sebelah kanan, nilai-nilai tick didasarkan pada relatif 0-1 skala sebagai pecahan dari 1, tetapi nilai-nilai sumbu ditampilkan sebagai persentase. Hal ini karena kutu persentase sumbu adalah hasil dari menerapkan format "#. ##%" Dengan relatif 0-1 nilai skala. Bila menggunakan isStacked: 'percent' , pastikan untuk menentukan nilai-nilai kutu / axis menggunakan relatif skala 0-1.
• DITUMPUK
• 100% TUMPUKAN
• MEMBUAT MATERIAL KOLOM GRAFIK
Pada tahun 2014, Google mengumumkan pedoman dimaksudkan untuk mendukung tampilan umum dan merasa seluruh properti dan aplikasi (seperti aplikasi Android) yang berjalan di platform Google. Kami menyebutnya upaya ini Desain Material. Kami akan menyediakan "Material" versi dari semua grafik utama kami; Anda dipersilakan untuk menggunakan mereka jika Anda suka bagaimana mereka terlihat. Membuat Kolom Bagan Bahan ini mirip dengan menciptakan apa yang sekarang kita akan sebut "klasik" Kolom Chart. Anda memuat Google Visualisasi API (meskipun dengan 'bar' paket bukan 'corechart' paket), mendefinisikan DataTable Anda, dan kemudian membuat objek (tapi kelas google.charts.Bar bukan google.visualization.ColumnChart ). Sejak bar chart dan grafik kolom pada dasarnya identik tetapi untuk orientasi, kita sebut kedua Material Bar Charts, terlepas dari apakah bar vertikal (klasik, bagan kolom) atau horizontal (bar chart). Material, satu-satunya perbedaan adalah di bars pilihan. Bila diatur ke 'horizontal' , orientasi akan menyerupai tradisional klasik Bar Chart; jika tidak, bar akan vertikal.
Catatan: Charts Bahan tidak akan bekerja di versi lama dari Internet Explorer. (IE8 dan versi sebelumnya tidak mendukung SVG, yang Charts Material membutuhkan.)
Company Performance
Sales, Expenses,dan Profit:2014-2017
Charts bahan Kolom memiliki banyak perbaikan kecil lebih Charts Kolom klasik, termasuk palet warna ditingkatkan, bulat sudut, label format yang lebih jelas, jarak standar ketat antara seri, gridlines lebih lembut dan judul (dan penambahan sub judul).
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawChart);
Fungsi drawChart () {
var data = google.visualization.arrayToDataTable ([
[ 'Tahun', 'Penjualan', 'Beban', 'Laba'],
[ '2014', 1000, 400, 200],
[ '2015', 1170, 460, 250],
[ '2016', 660, 1120, 300],
[ '2017', 1030, 540, 350]
]);
Pilihan var = {
grafik: {
Judul: 'Kinerja Perusahaan,
subtitle: 'Penjualan, Biaya, dan Profit: 2014-2017',
}
};
var grafik = google.charts.Bar baru (document.getElementById ( 'columnchart_material'));
chart.draw (data, opsi);
}
</ Script>
</ Head>
<Body>
<Div id = "columnchart_material" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
Charts Material yang dalam versi beta. Penampilan dan interaktivitas sebagian besar akhir, tapi banyak dari pilihan yang tersedia di Charts Klasik belum tersedia di dalamnya. Anda dapat menemukan daftar pilihan yang belum didukung dalam masalah ini . Juga, pilihan cara dinyatakan tidak selesai, sehingga Anda harus mengkonversi pilihan Anda dengan mengganti baris ini: chart.draw(data, options); dengan ini:
chart.draw(data, google.charts.Bar.convertOptions(options));
Menggunakan google.charts.Bar.convertOptions() memungkinkan Anda untuk mengambil keuntungan dari fitur tertentu, seperti hAxis/vAxis.format pilihan preset.
• GRAFIK DUAL-Y
Catatan: sumbu Dual-Y tersedia hanya untuk grafik Material (yaitu, orang-orang dengan paket bar ).
Kadang-kadang Anda akan ingin menampilkan dua seri di bagan kolom, dengan dua independen Y-sumbu: sumbu tersisa untuk satu seri, dan sumbu yang tepat untuk yang lain:
Perhatikan bahwa tidak hanya kami dua y-sumbu berlabel berbeda ( "parsec" versus "magnitudo tampak") tetapi mereka masing-masing memiliki skala independen mereka sendiri dan gridlines. Jika Anda ingin menyesuaikan perilaku ini, gunakan vAxis.gridlines pilihan. Dalam kode di bawah ini, axes dan series pilihan bersama-sama menentukan penampilan dual-Y dari grafik. The series opsi menentukan sumbu yang digunakan untuk setiap ( 'distance' dan 'brightness' , mereka tidak perlu memiliki hubungan dengan nama kolom dalam DataTable). The axes pilihan kemudian membuat grafik ini grafik dual-Y, menempatkan 'distance' sumbu di sebelah kiri (berlabel "parsec") dan 'brightness' sumbu di sebelah kanan (berlabel "jelas besarnya").
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawStuff);
berfungsi drawStuff () {
Data var = google.visualization.arrayToDataTable baru ([
[ 'Galaxy', 'Jarak', 'Brightness'],
[ 'Canis Major Dwarf', 8000, 23,3],
[ 'Sagitarius Dwarf', 24000, 4.5],
[ 'Dwarf Ursa Major II', 30000, 14,3],
[ 'Lg. Magellanic Cloud ', 50000, 0,9],
[ 'Bootes I', 60000, 13,1]
]);
Pilihan var = {
width: 900,
grafik: {
Judul: 'galaksi Terdekat',
subtitle: 'jarak di sebelah kiri, kecerahan di sebelah kanan'
},
seri: {
0: {axis: 'jarak'}, // Ikat seri 0 sumbu bernama 'jarak'.
1: {axis: 'kecerahan'} // Ikat seri 1 ke sumbu bernama 'kecerahan'.
},
sumbu: {
y: {
Jarak: {label: 'parsec'}, // Kiri y-axis.
kecerahan: {sisi: 'kanan', label: 'magnitudo tampak'} // kanan y-axis.
}
}
};
var grafik = baru google.charts.Bar (document.getElementById ( 'dual_y_div'));
chart.draw (data, opsi);
};
</ Script>
</ Head>
<Body>
<Div id = "dual_y_div" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
• GRAFIK TOP-X
Catatan: sumbu Top-X hanya tersedia untuk grafik Material (yaitu, orang-orang dengan paket bar ).
Jika Anda ingin menempatkan label sumbu X dan judul di bagian atas grafik Anda daripada bagian bawah, Anda dapat melakukannya di tangga lagu Material dengan axes.x opsi:
<Html>
<Head>
<Script type = "text / javascript" src = "https://www.gstatic.com/charts/loader.js"> </ script>
<Script type = "text / javascript">
google.charts.load ( 'sekarang', { 'paket': [ 'bar']});
google.charts.setOnLoadCallback (drawStuff);
berfungsi drawStuff () {
Data var = google.visualization.arrayToDataTable baru ([
[ 'Pindah', 'Persentase'],
[ "Raja pion (e4)", 44],
[ "Ratu pion (d4)", 31],
[ "Knight ke King 3 (Nf3)", 12],
[ "Uskup pion Ratu (c4)", 10],
[ 'Lain', 3]
]);
Pilihan var = {
Judul: 'pembukaan Catur bergerak',
width: 900,
Legenda: {position: 'none'},
grafik: {subtitle: 'popularitas dengan persentase'},
sumbu: {
x: {
0: {sisi: 'top', label: 'White bergerak'} // Top x-axis.
}
},
bar: {groupWidth: "90%"}
};
var grafik = baru google.charts.Bar (document.getElementById ( 'top_x_div'));
// Mengkonversi pilihan klasik untuk pilihan Material.
chart.draw (data, google.charts.Bar.convertOptions (pilihan));
};
</ Script>
</ Head>
<Body>
<Div id = "top_x_div" style = "width: 900px; height: 500px;"> </ div>
</ Body>
</ Html>
Pemuatan
The google.charts.load nama paket adalah "corechart" .
google.charts.load ( "saat ini", {paket: [ "corechart"]}); Untuk Charts Kolom Material, google.charts.load nama paket adalah "bar" . (Tidak kesalahan ketik: Bahan Bar Chart menangani kedua orientasi.)
google.charts.load ( "saat ini", {paket: [ "bar"]}); Nama kelas visualisasi adalah google.visualization.ColumnChart .
var visualisasi = baru google.visualization.ColumnChart (kontainer); Untuk Charts Kolom Material, nama kelas visualisasi adalah google.charts.Bar . (Tidak kesalahan ketik: Bahan Bar Chart menangani kedua orientasi.)
var grafik = baru google.charts.Bar (kontainer); format data
Setiap baris di tabel mewakili sekelompok bar yang berdekatan.
Baris: Setiap baris di tabel mewakili sekelompok bar.
kolom:
Pilihan konfigurasi
COMBO CHARTS
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, tentukan seriesType properti. Gunakan series properti untuk menentukan sifat dari setiap seri individual.
Pemuatan
The google.charts.load nama paket adalah "corechart"
Nama kelas visualisasi adalah google.visualization.ComboChart
Format Data
Baris: Setiap baris di tabel mewakili satu set titik data dengan lokasi sumbu x sama.
kolom:
• PILIHAN KONFIGURASI
• METODE
Acara
Untuk informasi lebih lanjut tentang cara menggunakan peristiwa ini, lihat Dasar Interaktivitas , Penanganan Events , dan Firing Acara .
Kebijakan Data
Semua kode dan data diproses dan diberikan dalam browser. Tidak ada data yang dikirim ke server apapun.
DIFF CHART
Sebuah grafik diff adalah bagan yang dirancang untuk menyoroti perbedaan antara dua grafik dengan data pembanding. Dengan membuat perubahan antara nilai analog menonjol, mereka dapat mengungkapkan variasi antara dataset. Anda membuat grafik diff dengan memanggil computeDiff metode 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 .
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:
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:
Anda dapat mengubah opacity dari ekor dengan diff.oldData.opacity pilihan, dan opacity dari titik data baru dengan diff.newData.opacity opsi:
var options = { diff: { oldData: { opacity: 1.0 } } };
var options = { diff: { newData: { opacity: 0.5 } } };
Charts Diff Pie
Berikut kode untuk menghasilkan tiga grafik:
Anda dapat mengontrol ukuran relatif dari lingkaran dengan diff.innerCircle.radiusFactor , perbatasan antara dua dengan diff.innerCircle.borderFactor , dan transparansi masing-masing dengan diff.oldData.opacity dan diff.newData.opacity . Akhirnya, Anda dapat membalikkan perilaku sehingga data tertua mengelilingi data terbaru dengan diff.oldData.inCenter . Contoh masing-masing:
Diff Bar dan Charts 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:
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 Wisaya Nama Bayi ) .
Kode untuk menghasilkan keempat grafik:
Diff kolom dan bar chart membiarkan Anda mengontrol lebar relatif dari bar lama dan baru dengan diff.newData.widthFactor opsi:
BAB V
KATA PENUTUP
Demikianlah buku yang kami buat semoga bermanfaat bagi orang yang membacanya dan menambah wawasan bagi orang yang membaca buku ini. Dan penulis mohon maaf apabila ada kesalahan dalam penulisan kata dan kalimat yang tidak jelas, mengerti, dan lugas mohon jangan dimasukan ke dalam hati.
Dan kami juga sangat mengharapkan yang membaca buku ini akan bertambah motivasinya dan mengapai cita-cita yang di inginkan, karena kami membuat buku ini mempunyai arti penting yang sangat mendalam.
Sekian penutup dari kami semoga berkenan di hati dan kami ucapkan terima kasih yang sebesar-besarnya.
DAFTAR PUSTAKA
https://developers.google.com/chart/interactive/docs/gallery/columnchart
https://developers.google.com/chart/interactive/docs/gallery/combochart
https://developers.google.com/chart/interactive/docs/gallery/diffchart
Komentar
Posting Komentar