Penerapan Candlestick Chart Dalam Teknologi Informasi
Perkembangan teknologi informasi yang sangat pesat membawa seluruh elemen-elemen yang ada, baik itu ekonomi, bisnis, pendidikan, kenegaraan dsb. Dalam dunia teknologi informasi khususnya dalam bidang bisnis kita dapat menyertakan diagram (chart) candlestick dengan menggunakan salah satu Google API (Application Progamming Interface) yaitu Google Chart.
Google Chart merupakan suatu API yang digunakan untuk memvisualisasikan data ke dalam bentuk garis, peta pohon hierarkis, hingga grafik. Cara yang paling umum untuk menggunakan Google Chart adalah dengan JavaScript sederhana yang dimasukkan ke dalam halaman Web anda.
Semua jenis grafik digambarkan oleh data dengan menggunakan kelas DataTable, sehingga mudah untuk beralih ke jenis grafik lain untuk menemukan penampilan grafik yang ideal. DataTable menyediakan metode untuk menyortir, memodifikasi, dan penyaringan data. Selain itu DataTable dapat diisi langsung dari halaman web anda, database, atau penyedia data (data provider) yang mendukung protokol Charts Google Datasouce (protokol tersebut termasuk SQL seperti bahasa queri yang diimplementasikan oleh Google Spreadsheets, Google Fusion Tables, dan pihak ketiga penyedia data seperti SalesForce).
Konfigurasi Opsional
METODE
EVENT
Berikut contoh pemodelan grafik candlestick pada Google Chart. Misal sebuah perusahaan bernama PT Maju Terus bertransaksi di Bea cukai dalam waktu 5 hari dengan data transaksi sebagai berikut :
Berikut code JavaScript untuk membuat grafik Candlestick :
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() { var data = google.visualization.arrayToDataTable([
['Senin', 20, 28, 38, 45], //[string,x1,y1,y2,x2]
['Selasa', 31, 38, 55, 66], //[string,x1,y1,y2,x2]
['Rabu', 50, 55, 77, 80], //[string,x1,y1,y2,x2]
['Kamis', 77, 77, 66, 50], //[string,x1,y1,y2,x2]
['Jumat', 68, 66, 22, 15] //[string,x1,y1,y2,x2]
// Treat first row as data as well.
], true);
var options = { legend:'none' };
var chart = new
google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options); }
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height:
500px;"></div>
</body>
</html>
Maka output (hasil) yang dikeluarkan sebagai berikut :
Penerapan Histogram
Membuat Histogram
Misalkan citra digital memiliki L derajat keabuan, yaitu dari nilai 0 sampai L – 1 (misalnya pada citra dengan kuantisasi derajat keabuan 8-bit, nilai derajat keabuan dari 0 sampai 255). Secara matematis histogram citra dihitung dengan rumus
yang dalam hal ini,
ni = jumlah pixel yang memiliki derajat keabuan
i n = jumlah seluruh pixel di dalam citra
Plot hi versus fi dinamakan histogram. Gambar 6.1 adalah contoh sebuah histogram citra. Secara grafis histogram ditampilkan dengan diagram batang. Perhatikan dari persamaan 6.1 bahwa nilai ni telah dinormalkan dengan membaginya dengan n. Nilai hi berada di dalam selang 0 sampai 1.
Sebagai contoh, misalkan matriks di bawah ini menyatakan citra dijital yang berukuran 8 ´ 8 pixel dengan derajat keabuan dari 0 sampai 15 (ada 16 buah derajat keabuan):
Tabulasi perhitungan histogramnya ditunjukan pada Tabel 6.1. Mudah dilihat bahwa semakin besar nilai ni maka semakin besar pula nilai hi .
Tabel perhitungan histogram
Contoh:
Berikut adalah histogram dari panjang dinosaurus:
Histogram tersebut memberitahu kita bahwa bin paling umum adalah <10 meter, dan bahwa hanya ada satu dinosaurus lebih dari 40 meter. Kita bisa membawa lebih bar untuk menemukan bahwa itu adalah Seismosaurus (yang mungkin hanya Diplodocus yang sangat besar; ahli paleontologi tidak yakin).
Kode untuk menghasilkan histogram ini ditampilkan di bawah. Setelah mendefinisikan data (google.visualization.arrayToDataTable), grafik didefinisikan dengan panggilan untuk visualisasi google. Histogram dan digambar dengan metode imbang.
Diagram histogram diatas bila akan lebih jelas bila dilihat pada web/browser karena pada bin/balok diagram tersebut terdapat keterangan dari dinasaurus yang disebutkan dalam kodingan html dibawah ini
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Dinosaur', 'Length'],
['Acrocanthosaurus (top-spined lizard)', 12.2],
['Albertosaurus (Alberta lizard)', 9.1],
['Allosaurus (other lizard)', 12.2],
['Apatosaurus (deceptive lizard)', 22.9],
['Archaeopteryx (ancient wing)', 0.9],
['Argentinosaurus (Argentina lizard)', 36.6],
['Baryonyx (heavy claws)', 9.1],
['Brachiosaurus (arm lizard)', 30.5],
['Ceratosaurus (horned lizard)', 6.1],
['Coelophysis (hollow form)', 2.7],
['Compsognathus (elegant jaw)', 0.9],
['Deinonychus (terrible claw)', 2.7],
['Diplodocus (double beam)', 27.1],
['Dromicelomimus (emu mimic)', 3.4],
['Gallimimus (fowl mimic)', 5.5],
['Mamenchisaurus (Mamenchi lizard)', 21.0],
['Megalosaurus (big lizard)', 7.9],
['Microvenator (small hunter)', 1.2],
['Ornithomimus (bird mimic)', 4.6],
['Oviraptor (egg robber)', 1.5],
['Plateosaurus (flat lizard)', 7.9],
['Sauronithoides (narrow-clawed lizard)', 2.0],
['Seismosaurus (tremor lizard)', 45.7],
['Spinosaurus (spiny lizard)', 12.2],
['Supersaurus (super lizard)', 30.5],
['Tyrannosaurus (tyrant lizard)', 15.2],
['Ultrasaurus (ultra lizard)', 30.5],
['Velociraptor (swift robber)', 1.8]]);
var options = {
title: 'Lengths of dinosaurs, in meters',
legend: { position: 'none' },
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Kodingan diatas dapat diketikkan melalu notepad dengan opsi save (.html), kemudian buka notepad menggunakan browser (klik kanan pada notepad – open with – (ex. google chrome) maka akan muncul diagram histogram seperti diatas dengan keterangannya.
MENGATUR WARNA
Berikut adalah histogram dari populasi nasional:
.
.
Ada lebih dari dua ratus negara dengan populasi kurang dari seratus juta, dan setelah itu mati. histogram ini menggunakan pilihan warna untuk meberikan warna hijau:
var options = {
title: 'Country Populations',
legend: { position: 'none' },
colors: ['green'],
};
Seperti semua Charts Google, warna dapat ditentukan baik sebagai nama bahasa Inggris atau sebagai nilai hex.
Penerapan Bar Chart Dalam Google Chart
Membuat Material Bar Chart
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 Material Bar Chart mirip dengan menciptakan apa yang sekarang kita akan sebut "klasik" Bar Chart. Anda memuat Google Visualisasi API (meskipun dengan paket 'bar' bukan paket 'corechart'), mendefinisikan DataTable Anda, dan kemudian membuat objek (tapi google.charts.Bar kelas bukan google.visualization.BarChart).
Bahan Bar Charts memiliki banyak perbaikan kecil lebih Classic Bar Charts, 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('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new
google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 900px; height: 500px;"></div>
</body>
</html>
Menggunakan google.charts.Bar.convertOptions() memungkinkan pengguna untuk mengambil keuntungan dari fitur tertentu, seperti pilihan preset hAxis/vAxis.format.
Grafik Dual-X
Kadang-kadang Anda akan ingin menampilkan dua seri dalam bar chart, dengan dua x-sumbu independen: sumbu atas untuk satu seri, dan sumbu bawah untuk lain:
Perhatikan bahwa tidak hanya dua x-sumbu berlabel berbeda ("parsec" versus "magnitudo semu") tetapi mereka masing-masing memiliki skala independen mereka sendiri dan gridlines. Jika Anda ingin menyesuaikan perilaku tersebut, gunakan opsi hAxis.gridlines.
Dalam kode di bawah, sumbu dan pilihan seri bersama-sama menentukan penampilan dual-X dari grafik. Opsi seri menentukan sumbu yang digunakan untuk setiap ('jarak' dan 'kecerahan', mereka tidak perlu memiliki hubungan dengan nama kolom dalam DataTable). Opsi sumbu kemudian membuat grafik ini grafik dual-X, menempatkan 'magnitudo tampak' sumbu di bagian atas dan sumbu 'parsec' di bagian bawah.
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 800,
chart: {
title: 'Nearby galaxies',
subtitle: 'distance on the left, brightness on the right'
},
bars: 'horizontal', // Required for Material Bar Charts.
series: {
0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
},
axes: {
x: {
distance: {label: 'parsecs'}, // Bottom x-axis.
brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis.
}
}
};
var chart = new
google.charts.Bar(document.getElementById('dual_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="dual_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Grafik top-X
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 pilihan axes.x:
<html>
<head>
<script type="text/javascript"
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new
google.visualization.arrayToDataTable([
['Opening Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new
google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Tidak ada komentar:
Posting Komentar