Bab 2

Diagram Sankey, Diagram Scatter, dan Steeped Area Chart

1.1 Diagram Sankey

Diagram sankey adalah sebuah visualisasi yang digunakan untuk menggambarkan aliran dari satu set nilai ke yang lainnya. Yang telah terhubung disebut node dan koneksinya disebut link. Sankey sangat berguna ketika anda ingin menunjukkan pemetaan many-to-many antara dua domain, misalnya universitas dan jurusan. Atau beberapa jalur melalui serangkaian tahap, misalnya Google Analytics menggunakan sankey untuk menunjukkan bagaimana arus lalu lintas dari satu halaman ke halaman lain di situs web anda.

Dalam pengertian lain, diagram sankey adalah salah satu jenis tertentu dari diagram alir, dimana lebar panah ditampilkan secara proporsional dengan kuantitas aliran. Diagram sankey mewakili semua energi primer yang mengalir ke pabrik. Lebar dari kumpulan energi tersebut berbanding lurus dengan produksi energi, pemanfaatan, dan kerugian. Sumber energi primer adalah gas, listrik, dan batubara/minyak dan mewakili masukan energi pada sisi sebelah kiri diagram sankey. Mereka juga dapat memvisualisasikan rekening energi, rekening aliran material pada tingkat regional atau nasional, dan juga rincian biaya dari barang atau jasa.

Diagram sankey berbentuk panah dan memiliki cabang. Beberapa panah pada sankey dapat memiliki tingkatan atau juga tidak memiliki tingkatan. Karena pada dasarnya sankey merupakan diagram alur proses seperti flowchart. Flowchart adalah suatu bagan dengan simbol-simbol tertentu yang menggambarkan urutan proses secara mendetail dan hubungan antara suatu proses dengan proses lainnya. Namun diagram sankey dan flowchart memiliki perbedaan. Flowchart lebih terstruktur dan memiliki instruksi pada setiap prosesnya dan flowchart digunakan untuk menyelesaikan permasalahan melalui tingkatan langkah-langkah yang terurut, sedangkan diagram sankey tidak.

Persamaan antara diagram sankey dan flowchart adalah merupakan diagram alur untuk menjelaskan suatu proses. Namun flowchart lebih detail dan terstruktur. Method adalah sarana bagi programmer untuk memodularisasi, artinya membreak atau memecah program kompleks menjadi bagian yang kecil-kecil sehingga nantinya dapat digunakan berulang-ulang, daripada menulis beberapa baris kode yang sama.

Figure 1.1: Aliran Diagram Sankey

Diagram sankey menempatkan penekanan visual pada transfer besar atau aliran di dalam sebuah sistem. Mereka membantu dalam kontribusi dominan terhadap aliran keseluruhan. Seringkali, diagram sankey menunjukkan jumlah yang dilestarikan dalam batas sistem yang didefinisikan.

1.1.1 Sejarah Diagram Sankey

Diagram Sankey dinamai dari kapten Irlandia bernama Matthew Henry Phineas Riall Sankey, yang menggunakan jenis diagram ini pada tahun 1898 menunjukkan efisiensi energi dari mesin uap. Sedangkan grafik pertama dalam warna hitam dan putih hanya digunakan untuk menampilkan satu jenis aliran (uap), menggunakan warna untuk berbagai jenis arus telah menambahkan derajat kebebasan utnuk diagram sankey.

Figure 1.2: Matthew Henry Phineas Riall Sankey

Mathew H. Sankey adalah seorang insinyur dari Irlandia. Ia lahir pada November 9, 1853 di Nenagh, co. Tipperary (sumber lain : dia lahir di Modeshill, co. Tipperary atau Bawnmore, co. Cork) untuk keluarga militer. Ayahnya, William, adalah Lieut-Col. di resimen ke-62. Sankey bergabung dengan militer serta dan menjadi seorang insinyur di Korps Royal Engineers (R.E.) dengan pangkat kapten.

Kemudian dia berhenti militer dan bergabung William bekerja, di mana ia terus bekerja pada peningkatan efisiensi mesin uap. Ia menjadi anggota AM dari Institution of Civil Engineers. Dari tahun 1920 sampai 1921 ia bertindak sebagai presiden Lembaga British of Mechanical Engineers.

Figure 1.3: Efisiensi Mesin Uap

Salah satu diagram sankey paling terkenal adalah Peta Charles Minard dari Kampanye Rusia Napoleon tahun 1812. Ini adalah peta aliran, melapisi diagram sankey ke peta geografis. Ini diciptakan pada tahun 1869, sehingga mendahului sankey pertama yaitu diagram sankey tahun 1898.

Figure 1.4: Peta Charles Minard

1.1.2 Langkah Pembuatan Diagram Sankey

Pada AQA GCSE ada cara untuk membuat diagram Sankey :

1. Input dari kiri diagram
2. Output yang dicari berada disebelah kanan
3. Semua yang tidak diinginkan (terbuang) output dibuat panah vertikal ke bawah.

• Ingat total masukkan selalu sama dengan total output, tapi sistem yang efisien akan memiliki persentase output yang tinggi. Contoh seperti gambar dibawah ini :

Figure 1.5: Input dan Output pada Diagram Sankey

1.1.3 Tujuan Penggunaan Diagram Sankey

Seperti yang dijelaskan bahwa diagram sankey merupakan diagram alir untuk menunjukkan aliran data atau proses. Diagram Sankey digunakan untuk menyajikan alur atau proses dalam bentuk tanda panah yang memiliki cabang. Setiap ujung panah memiliki keterangan bisa berupa proses atau alur.

1.1.4 Fungsi Diagram Sankey

Fungsi dari diagram adalah untuk menyajikan alur dari suatu proses atau informasi yang terdiri dari tanda panah yang memiliki keterangan di ujungnya. Diagram ini biasanya menunjukkan alur kerja.

1.2 Diagram Scatter

Grafik scatter atau disebut juga grafik pencar adalah jenis plot atau diagram matematika menggunakan koordinat kartesius untuk menampilkan nilai yang biasanya terdiri dari dua variabel untuk satu set data. Jika poinnya adalah kode berwarna, anda dapat meningkatkan jumlah variabel yang ditampilkan menjadi tiga. Data ditampilkan sebagai koleksi dari poin-poin, masing-masing memiliki nilai satu variabel menentukan posisi pada sumbu horisontal dan nilai dari variabel lainnya menentukan posisi pada sumbu vertikal.

Sebuah plot pencar (grafik scatter) dapat digunakan suatu ketika salah satu variabel kontinu yang berada di bawah kendali eksperimen dan yang lainnya bergantung pada itu atau ketika kedua variabel kontinu independen atau bebas. Jika parameter ada yang bertambah secara sistematis dan atau dikurangi oleh yang lain, hal itu dikatakan kontrol parameter atau variabel independen dan lazim diplot sepanjang sumbu horisontal. Variabel yang diukur atau bergantung lazim diplot sepanjang sumbu vertikal. Jika tidak ada variabel yang bergantung, baik jenis variabel dapat diplot di kedua sumbu dan plot pencar hanya akan menggambarkan tingkat korelasi atau hubungan (bukan sebab akibat) antara dua variabel.

Sebuah plot pencar dapat menyarankan berbagai jenis korelasi antara variabel dengan selang kepercayaan tertentu. Sebagai contoh, berat dan tinggi badan, berat badan akan berada pada sumbu y dan tinggi badan akan berada pada sumbu x. Korelasi mungkin dapat positif (naik), negatif (turun), atau null (tidak berkorelasi). Jika pola titik menaik dari kiri bawah ke kanan atas, ini menunjukkan korelasi positif antara variabel yang diteliti. Jika pola titik menurun dari kiri atas ke kanan bawah, itu menunjukkan korelasi negatif. Sebuah garis yang paling cocok atau sering disebut trendline, dapat digambarkan untuk mempelajari hubungan antar variabel. Persamaan untuk korelasi antara variabel dapat ditentukan dengan menetapkan prosedur terbaik. Untuk korelasi linear, prosedur terbaik dikenal sebagai regresi linear dan dijamin untuk menghasilkan solusi yang tepat dalam waktu yang terbatas. Tidak ada universal prosedur terbaik yang dijamin untuk menghasilkan solusi yang tepat untuk hubungan yang sewenang-wenang. Sebuah plot pencar juga sangat berguna ketika kita ingin melihat bagaiman dua set data yang sebanding dapat cocok dengan satu sama lain. Dalam kasus ini, sebuah garis identitas yaitu garis y = x atau garis 1 : 1, sering ditarik sebagai referensi. Semakin dua set data cocok, semakin scatter cenderung untuk berkonsentrasi di sekitar garis identitas. Jika dua set data identik secara numerik, scatter jatuh persis pada garis identitas.

Salah satu aspek yang paling kuat dari plot scatter adalah kemampuan untuk menunjukkan hubungan non linear antara variabel. Kemampuan untuk melakukan hal ini dapat ditingkatkan dengan menambahkan sebuah garis harus seperti loess. Selanjutnya, jika data yang diwakili oleh model campuran dari hubungan sederhana, hubungan ini akan secara visual terlihat sebagai pola yang ditumpangkan.

Diagram scatter adalah satu dari tujuh alat dasar kontrol kualitas. Grafik pencar dapat dibangun dalam bentuk gelembung, penanda, atau grafik garis.

Grafik scatter plot poin pada grafik. Ketika pengguna melayang jauh diatas titik, tooltips ditampilkan dengan informasi lebih lanjut. Google scatter chart diberikan dalam browser menggunakan SVG atau VML tergantung pada kemampuan browser.

1.2.1 Sejarah Diagram Scatter

Umumnya diagram scatter digunakan untuk menggambarkan hubungan antara dua variabel, histogram digunakan untuk memvisualisasikan struktur data. Namun, sarana mengamati jenis hubungan antara variabel yang dibutuhkan. Menggunakan teori regresi linear yang berasal dari studi yang dilakukan oleh Sir Francis Galton (1822 - 1911), diagram scatter dikembangkan sehingga kesimpulan intuitif dan kualitatif dapat ditarik tentang data yang dipasangkan, atau variabel. Konsep korelasi digunakan untuk memutuskan apakah hubungan yang signifikan ada antara data yang dipasangkan. Selanjutnya, analisis regresi digunakan untuk mengidentifikasi sifat yang tepat dari hubungan.

Pedoman Pengendalian Mutu dan Kualitas Statistik Pengendalian Handbook, ditulis oleh seorang konsultan kualitas Jepang bernama Kaoru Ishikawa berguna dalam memberikan pengertian tentang cara menggunakan dan menginterpretasikan diagram scatter. Ishikawa percaya bahwa tidak ada akhir untuk kualitas perbaikan dan pada tahun 1985 menunjukkan bahwa tujuh alat dasar digunakan untuk pengumpulan dan analisis data quality. Di antaranya adalah diagram scatter.

1.2.2 Pola Diagram Scatter

Terdapat 3 pola dalam Diagram Scatter yaitu :

1. Pola Positif Diagram Scatter
   Yaitu pola yang menunjukkan hubungan atau korelasi positif di antara variabel X dan variabel Y dimana nilai-nilai besar dari variabel X berhubungan dengan nilai-nilai besarnya variabel Y, sedangkan nilai-nilai kecil variabel X berhubungan dengan nilai-nilai kecil variabel Y.
2. Pola Negatif Diagram Scatter
   Yaitu pola yang menunjukkan hubungan atau korelasi negatif di antara variabel X dan variabel Y dimana nilai-nilai besar variabel X berhubungan dengan nilai-nilai kecil variabel Y sedangkan nilai-nilai kecil variabel X berhubungan dengan nilai-nilai besar variabel X.
3. Pola Tidak Memiliki Hubungan (Tidak Berkorelasi)
   Yaitu pola yang berkemungkinan tidak memiliki hubungan karena tidak ada kecenderungan nilai-nilai tertentu pada variabel X terhadap nilai-nilai tertentu pada variabel Y.
   Berikut ini gambar 3 jenis pola dalam menilai hubungan atau korelasi antara pasangan data X dan Y :

Figure 1.6: Pola Diagram Scatter

1.2.3 Tujuan Penggunaan Diagram Scatter

• Menguji bagaimana kuatnya hubungan antara dua variabel.
• Menentukkan jenis hubungan dari dua variabel itu, apakah positif, negatif dan tidak ada hubungan.

1.2.4 Fungsi Diagram Scatter

Diagram Scatter merupakan alat interpretasi data yang akan digunakan untuk :

1. Menguji seberapa kuat hubungan antara dua variabel (misalnya, hubungan antara biaya iklan dengan penjualan, lama pengalaman dengan kinerja karyawan, dll).
2. Memastikan ”firasat” akan hubungan sebab-akibat langsung antara jenis-jenis variabel.
3. Menentukan jenis hubungan (positif, negatif, dll).

1.2.5 Manfaat Diagram Scatter

Dikatakan juga bahwa scatter diagram menunjukkan hubungan antara dua variabel. Scatter diagram sering digunakan sebagai analisis tindak lanjut untuk menentukan apakah penyebab yang ada benar-benar memberikan dampak kepada karakteristik kualitas. Pada contoh terlihat scatter diagram yang menggambarkan plot pengeluaran untuk iklan dengan penjualan perusahaan yang mengindikasikan hubungan kuat positif diantara dua variabel. Jika pengeluaran untuk iklan meningkat, penjualan cenderung meningkat.

Figure 1.7: Contoh Diagram Scatter

Pada umumnya, bila kita berbicara tentang hubungan antara dua macam data, kita sesungguhnya membicarakan tentang :

1. Hubungan penyebab dan akibatnya
2. Hubungan antara satu penyebab dengan penyebab lainnya
3. Hubungan antara satu penyebab dengan dua penyebab

Secara grafis, jika kita menggambarkan “akibat pada sumbu vertikal” dan “penyebab pada sumbu horisontal”, maka kita akan mendapatkan sebuah peta yang disebut dengan scatter diagram.

1.2.6 Langkah Pembuatan Diagram Scatter

Cara untuk membuat scatter diagram adalah sebagai berikut :

1. Kumpulkan pasangan data (x, y) yang akan dipelajari hubungannya serta susunlah data itu dalam tabel. Diperlukan untuk mempunyai paling saling 30 pasangan data.
2. Tentukan nilai-nilai maksimum dan minimum untuk kedua variabel x dan y. Buatlah skala pada sumbu horizontal dan vertikal dengan ukuran yang sesuai agar diagram akan menjadi lebih mudah untuk dibaca. Apabila kedua variabel yang akan dipelajari itu adalah karakteristik kualitas dan faktor yang mempengaruhinya, gunakan sumbu horizontal, x, untuk faktor yang mempengaruhi karakteristik kualitas dan sumbu vertikal, y, untuk karakteristik kualitas.
3. Tebarkan (plot) data pada selembar kertas. Apabila dijumpai data bernilai sama dari pengamatan yang berbeda, gambarkan titik-titik itu seperti lingkaran konsentris (.), atau plot titik kedua yang bernilai sama itu disekitar titik pertama.
4. Berikan informasi secukupnya agar orang lain dapat memahami diagram tebar itu. Informasi yang biasa diberikan adalah :Interval waktuBanyaknya pasangan data (n), Judul dan unit pengukuran dari setiap variabel pada garis horizontal dan vertikal, Judul dari grafik itu, Apabila dipandang perlu dapat mencantumkan nama dari orang yang membuat diagram tebar itu.

1.2.7 Bentuk Diagram Scatter

Berikut contoh dan pembacaan scatter diagram yang benar harus mengarah kepada tindakan yang tepat. Untuk mempelajari kemampuan membaca yang benar dapat diuraikan secara umum seperti dibawah ini :

Figure 1.8: Bentuk - bentuk Diagram Scatter

Keterangan :

• Grafik 1 Pertambahan dalam y tergantung pada pertambahan dalam x. Bila x dikendalikan, y terkendali pula.
• Grafik 2, bila x bertambah, y akan bertambah beberapa, tetapi y seolah–olah mempunyai penyebab selain dari x.
• Grafik 3 menunjukkan tidak terdapat korelasi.
• Grafik 4 menunjukkan bahwa pertambahan dalam x menyebabkan kecenderungan untuk penurunan y.
• Sementara grafik 5 mengandung intepretasi bahwa pertambahan dalam x akan menyebabkan penurunan Y. Oleh sebab itu, apabila x dikendalikan maka y terkendali pula.

(Hendra Poerwanto G)

1.2.8 Membaca Diagram Scatter

Pada umumnya data dalam gambar diagram akan berpencar dan membentuk pola tertentu, dan pola pencaran data tersebutlah dapat dilakukan analisa kecenderungan hubungan kedua faktor yang diuji, misalnya : Pola pencaran data dari bagian bawah kiri naik ke arah kanan seolah membentuk sudut. Dan bila ditarik suatu garis imajiner (bayangan), maka kita bisa membuat garis linear sebagai wakil dari kelompok atau pencaran data tersebut. Garis ini dalam istilah statistik dinamakan sebagai Garis Regresi.

Dalam Scatter Diagram dikenal 2 macam hubungan, yaitu :

• Ada korelasi yang ditandai dengan korelasi kuat dan lemah
• Tidak ada korelasi

Bila ada korelasi, hubungan ini masih dibagi dengan korelasi yang positif dan korelasi yang negatif. Korelasi positif diartikan : bila faktor “A” muncul semakin besar, maka faktor “B” akan muncul semakin besar pula. Sedangkan korelasi negatif diartikan : bila faktor “A” muncul semakin besar, faktor “B” justru akan muncul semakin kecil. Kedua korelasi tersebut (positif dan negatif) dapat ditandai dengan kuat dan lemah, sehingga dalam Scatter Diagram sebenarnya dapat ditandai 5 jenis korelasi, yaitu :

1. Korelasi Positif Kuat
2. Korelasi Positif Lemah
3. Korelasi Negatif Kuat
4. Korelasi Negatif Lemah
5. Tanpa Korelasi

1.3 Stepped Area Chart

Stepped area chart digambarkan ke dalam browser menggunakan SVG atau VML. Menampilkan ujungnya ketika melewati tingkatannya. Stepped Area Chart juga mendukung stacking (tumpukan), termasuk stacking 100%. Sebuah Stepped Area Chart bertumpuk adalah Stepped Area Chart yang menempatkan nilai yang saling terkait di atas satu sama lain. Jika Terdapat nilai negatif, tetap bertumpuk namun ke arah sebaliknya (ke bawah) dan dimulai dari garis bawah diagram.

Stepped area chart juga merupakan variasi dari daerah grafik dimana setiap titik data dari rangkaian terhubung dengan garis vertikal dan horizontal untuk membentuk perkembangan langkah kemajuan. Jenis daerah visualisasi berguna ketika anda ingin menyoroti kenaikan atau penurunan nilai dari waktu ke waktu.

Figure 1.9: Contoh Stepped Area Chart

1.3.1 Tujuan Penggunaan Stepped Area Chart

1. Untuk menampilkan perubahan data atau harga dalam sebuah proses kenaikan atau penurunan harga. Data akan di gambarkan pada stepped chart berdasarkan perubahan yang terjadi bukan berdasarkan pada range waktu.
2. Untuk membuat perkembangan langkah kemajuan.
3. Jenis daerah visualisasi berguna ketika menyoroti kenaikan atau penurunan nilai dari waktu ke waktu.

1.3.2 Jenis - jenis Stepped Area Chart

1.3.2.1 Stepped Area Tunggal

Figure 1.10: Stepped Chart Tunggal

Pada gambar di atas merupakan jenis stepped chart tunggal atau hanya terdiri dari satu jenis data saja, dimana stepped chart menggambarkan 1 buah kenaikan atau penurunan data. Jenis ini memiliki kekurangan yaitu tidak dapat membandingkan kenaikan atau penurunan yang signifikan sehingga hanya dapat fokus dalam 1 cangkupan saja.

1.3.2.2 Stepped Area Majemuk

Figure 1.11: Stepped Area Majemuk

Jenis steeped chart selanjutnya adalah stepped chart majemuk atau lebih dari satu data. Jenis ini dapat menyimpan beberapa data yang terkait yang memiliki hubungan antara satu dengan yang lainnya. Seperti gambar di atas yaitu survey penggunaan kendaraan dalam suatu kota.

Di dalam chart terdapat data mobil, motor, kendaraan sewaan dan kendaraan umum. Pengunaan masing-masing kendaraan terjadi peningkatan dan penurunan. Dengan menggunakan stepped chart majemuk kita dapat membandingkan kenaikan signifikan antara ke empat data yang disajikan. Kita juga dapat mengetahui perkembangan yang pesat maupun lamban seperti kendaraan sewaan yang kenaikan dan penurunannya tidak signifikan, berbeda dengan motor yang kenaikan dan penurunannya sangat signifikan.

1.3.2.3 Stepped Area Dasar

Berikut ini adalah contoh dari grafik dasar stepped area.

Configurations

Kami telah menggunakan kelas SteppedAreaChart utnuk menunjukkan grafik steeped area.

<html>
<head>
<title>Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com/
charts/loader.js"></script>
   <script type="text/javascript" src="https://www.google.com/
jsapi"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});
        </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; 
margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = google.visualization.arrayToDataTable([
      ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
      ['Alfred Hitchcock (1935)', 8.4,         7.9],
      ['Ralph Thomas (1959)',     6.9,         6.5],
      ['Don Sharp (1978)',        6.5,         6.4],
      ['James Hawes (2008)',      4.4,         6.2]
   ]);

   var options = {
      title: 'The decline of \'The 39 Steps\'',
      vAxis: {title: 'Accumulated Rating'}
         }; 
 
   // Instantiate and draw the chart.
   var chart = new google.visualization.SteppedAreaChart(
document.getElementById('container'));
   chart.draw(data, options);
} google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

Figure 1.12: Stepped Area Dasar

1.3.2.4 Stepped Chart Bertumpuk

Berikut ini adalah contoh dari grafik stepped area bertumpuk.

Configurations

Kami telah menggunakan konfigurasi isStacked untuk menunjukkan grafik ditumpuk.

// Set chart options
var options = {
   isStacked: true
};

<html>
<head>
<title>Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com
/charts/loader.js"></script>
   <script type="text/javascript" src="https://www.google.com
/jsapi"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});
        </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; 
margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = google.visualization.arrayToDataTable([
      ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
      ['Alfred Hitchcock (1935)', 8.4,         7.9],
      ['Ralph Thomas (1959)',     6.9,         6.5],
      ['Don Sharp (1978)',        6.5,         6.4],
      ['James Hawes (2008)',      4.4,         6.2]
   ]);

   var options = {
      title: 'The decline of \'The 39 Steps\'',
      vAxis: {title: 'Accumulated Rating'},
      isStacked: true
         };
 
   // Instantiate and draw the chart.
   var chart = new google.visualization.SteppedAreaChart
(document.getElementById('container'));
   chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

Figure 1.13: Stepped Area Bertumpuk

1.3.2.5 100% Stepped Chart Bertumpuk

Berikut ini adalah contoh dari stepped area chart 100% bertumpuk.

Configurations

Kami telah menggunakan konfigurasi isStacked untuk menunjukkan grafik ditumpuk.

// Set chart options
var options = {
   isStacked: 'percent'
};

<html>
<head>
<title>Google Charts Tutorial</title>
   <script type="text/javascript" src="https://www.gstatic.com
/charts/loader.js"></script>
   <script type="text/javascript" src="https://www.google.com
/jsapi"></script>
   <script type="text/javascript">
     google.charts.load('current', {packages: ['corechart']});
        </script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; 
margin: 0 auto"></div>
<script language="JavaScript">
function drawChart() {
   // Define the chart to be drawn.
   var data = google.visualization.arrayToDataTable([
      ['Director (Year)',  'Rotten Tomatoes', 'IMDB'],
      ['Alfred Hitchcock (1935)', 8.4,         7.9],
      ['Ralph Thomas (1959)',     6.9,         6.5],
      ['Don Sharp (1978)',        6.5,         6.4],
      ['James Hawes (2008)',      4.4,         6.2]
   ]);

   var options = {
      title: 'The decline of \'The 39 Steps\'',
      vAxis: {title: 'Accumulated Rating'},isStacked: 'percent'
         };
 
   // Instantiate and draw the chart.
   var chart = new google.visualization.SteppedAreaChart
(document.getElementById('container'));
   chart.draw(data, options);
} google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>

Figure 1.14: 100% Stepped Area Bertumpuk

1.3.3 Langkah Pembuatan Stepped Area Chart

Seperti yang dijelaskan bahwa stepped digunakan untuk membuat perkembangan atau naik turunnya sebuah nilai. Dalam pembuatannya stepped dibuat dengan 2 buah sumbu yaitu sumbu x dan sumbu y. Data yang di masukkan dapat lebih dari satu sehingga dalam perbandingan jika menggunakan stepped area chart dalam mencari kenaikkan nilai yang signifikan.

Setelah memasukkan jumlah data selanjutnya adalah membuat range jumlah dan waktu. Range jumlah di tempatkan pada sumbu Y sedangkan range waktu di letakkan pada sumbu X. Stepped area chart digunakan untuk mencatat setiap perubahan data atau nilai. Contohnya adalah saham. Saham adalah surat berharga yang menunjukkan bagian kepemilikan atas suatu perusahaan yang harga perlembar sahamnya dapat naik dan turun dalam jarak waktu yang sangat singkat. Jika dalam satu bulan terjadi penurunan dan kenaikan sekaligus maka stepped area chart akan menggambarkannya per-perubahan bukan perubahan awal dan akhir yang dirangkum dalam satu bulan.

Sehingga stepped area chart dapat digunakan untuk mengetahui informasi yang detail kapan suatu nilai berubah atau naik turunnya suatu nilai tidak berdasarkan range waktu melainkan berdasarkan per setiap perubahan nilai. Setelah memasukkan data maka tampilan stepped chart akan menjadi seperti anak tangga yang tidak beratur yang menyerupai statistik dari nilai per setiap perubahan.

1.3.4 Fungsi Stepped Area Chart

Fungsi dari diagram ini adalah untuk menyajikan data yang perubahan kenaikan atau penurunan perperubahan tanpa range waktu. Diagram ini dapat digunakan untuk membandingkan perubahan antara beberapa data dan dapat digunakan sebagai acuan untuk menentukan nilai minimum dan maksimum.