• Beranda
  • Tentang Rosid
  • Kebijakan Penggunaan
  • Disclosure
  • Hubungi
No Result
View All Result
JURNAL ROSID
  • Bisnis
  • Gadget
  • Gaya Hidup
  • Humaniora
  • Metropolitan
  • Teknologi
  • Travelling
JURNAL ROSID
  • Bisnis
  • Gadget
  • Gaya Hidup
  • Humaniora
  • Metropolitan
  • Teknologi
  • Travelling
No Result
View All Result
JURNAL ROSID
Home Blog

Cara Mudah Membuat Diagram Interaktif di Halaman Blog

Rosid by Rosid
23 September 2016
in Blog
Reading Time: 3 mins read
2
Cara Mudah Membuat Diagram Interaktif di Halaman Blog - JURNAL ROSID
222
SHARES
Bagikan ke FacebookBagikan ke TwitterBagikan di WhatsApp

Ide penulisan artikel cara mudah membuat diagram interaktif di halaman blog ini bermula dari seorang teman yang ingin menampilkan diagram data di halaman blog yang ia kelola, tapi tidak mau hanya dalam bentuk gambar. Ia ingin diagram tersebut interaktif. Ketika cursor tetikus (mouse) diarahkan ke titik grafik, maka muncul keterangan data yang lebih animatif. Yang jadi permasalahan, dia tidak memiliki kemampuan bahasa pemrograman yang cukup untuk melakukannya. Kejadian seperti ini pernah terjadi juga dengan saya, mungkin juga Anda.

Jika menggunakan CMS WordPress, sebetulnya ada beberapa plugin yang bisa membantu kita membuat diagram di halaman blog. Seperti WordPress Charts and Graphs Lite dan Data Tables Generator by Supsystic. Tapi, jika tidak menggunakan WordPress, atau kalau pun pakai WordPress tidak mau menambah plugin lagi, disini kita bisa memakai jasa Google. Hasilnya kurang lebih akan seperti ini (arahkan tetikus ke titik pada diagram):

atau Pie Chart seperti ini:

Pembuatan kedua contoh diagram interaktif diatas, saya menggunanakan “jasa” Google Sheets. Diagram saya buat di Google Sheets (yang secara otomatis tersimpan di Google Sheets, kemudian di-embed ke halaman blog ini. Simak langkah-langkahnya.

Membuat Diagram di Google Sheets dan Meng-embed-nya di Halaman Blog

Sebelum membuat diagram, tentunya harus ada tabel data yang sudah Anda siapkan. Data tersebut bisa dibuat di Ms. Excel (atau sejenis) terlebih dahulu kemudian di salin ke Google Sheets, atau bisa juga langsung dibuat di Google Sheets.

Membuat Diagram di Google Sheets

Saya anggap Anda sudah menyiapkan tabel datanya di Google Sheets.

Contoh data di Google Sheets sebagai bahan pembuatan diagram
Contoh data di Google Sheets sebagai bahan pembuatan diagram

Jika sudah, seleksi tabel kemudian klik menu Insert > Chart

Seleksi data, Klik menu INSERT, Chart

 

Pilih jenis chart (diagram)

Pilih jenis chart (diagram)

Di bagian Chart Editor ini, kita tidak hanya bisa memilih jenis diagram yang akan dipakai, tapi juga melakukan perubahan dan penyesuaian tampilan (customization). Silakan Anda “utak-atik” tampilan diagram yang akan Anda pakai.

Jika sudah yakin (nanti bisa diedit kembali, klik Insert

Diagram sudah jadi dan siap di-embed
Diagram sudah jadi dan siap di-embed

Meng-embed Diagram ke Halaman Blog

Langsung saja. Klik diagram, kemudian klik tanda panah kebawah pada sudut kanan atas > Klik Publish Chart

Klik diagram, kemudian klik tanda panah kebawah pada sudut kanan atas

Pilih Embed, klik Publish.

Pilih embed, klik Publish

Klik “Oke” jika muncul notifikasi “Google Drive: Are you sure want to publish this section?”

Selanjutnya akan tampil script iframe yang siap Anda embed ke halaman blog Anda.

script-iframe-yang-siap-di-embed-ke-blog-anda

Silakan Anda copy – paste script tersebut ke halaman blog. Sama seperti meng-emed video dari Youtube.

Contoh setelah di-embed:

Demikian, semoga bermanfaat!

Share89Tweet56Send
Previous Post

Segarkan Lini Tablet, ASUS Hadirkan ZenPad 8 Z380KL

Next Post

Potret “Miniatur” Jalanan Jakarta dari Kamera Zenfone 3

Rosid

Rosid

Belajar Ngeblog dari 2008 | Web Master | Urang Sunda | Bobotoh Persib | Seorang Ayah | Suami dari www.mariana.my.id

Related Posts

3 Cara Mengurangi Ukuran atau Mengompres File PDF

3 Cara Mengurangi Ukuran atau Mengompres File PDF

by Rosid
13 November 2020
1

Ada banyak keuntungan dari mengurangi atau mengompres file PDF ke ukuran lebih kecil yang tidak diketahui oleh sebagian besar pengguna....

Cara Install WordPress di Cleaver VPS Manager

Cara Install WordPress di Cleaver VPS Manager

by Rosid
13 Februari 2019
0

Sebelum saya mmeulai, perlu diketahui bahwa tulisan "Cara Install WordPress di Cleaver VPS Manager" ini adalah lanjutan dari tulisan sebelumnya...

Next Post
Miniatur Jakarta: Konstruksi MRT di sekitaran Bundaran HI

Potret “Miniatur” Jalanan Jakarta dari Kamera Zenfone 3

Menumbuhkan Bisnis Lokal

[Video] Menumbuhkan Bisnis Lokal dengan Memanfaatkan Google dan Facebook

Discussion about this post

Load WordPress Sites in as fast as 37ms!

TERBARU

Transisi Meterai 10000, Meterai 6000 dan 3000 Masih Belaku di 2021 (compress)

Transisi Meterai 10000, Meterai 6000 dan 3000 Masih Belaku di 2021!

5 Januari 2021
3 Cara Mengurangi Ukuran atau Mengompres File PDF

3 Cara Mengurangi Ukuran atau Mengompres File PDF

13 November 2020
Pengalaman Ganti Paket Indihome dari Dual Play ke Single Play

Gara-gara TV Android, Jadi Ganti Paket Indihome dari Dual Play ke Single Play (Internet Only!)

20 Agustus 2020
5 Panel Hosting Alternatif cPanel Gratis Terbaru (Gak Mainstream!)

5 Panel Hosting Alternatif cPanel Gratis Terbaru (Gak Mainstream!)

19 Agustus 2020
Rahasia Jualan Bakso dan Mi Ayam

7 Rahasia Jualan Bakso dan Mi Ayam Ini Ternyata Jarang Disadari!

18 Agustus 2020

Populer Pekan Ini

  • Cara Copy Paste Tulisan Dari Web yang Dikunci

    Cara Copy Paste Tulisan Dari Web yang Dikunci

    14232 shares
    Share 5693 Tweet 3558
  • Pengalaman Membuat Surat Keterangan Bebas Narkoba dan Surat Keterangan Tidak Buta Warna di RSUD Pasar Minggu

    695 shares
    Share 278 Tweet 174
  • MEGA, Pilihan Utama Layanan Cloud Storage Selain Dropbox

    171 shares
    Share 68 Tweet 43
  • Manfaat Menggunakan Push Notification Untuk Website

    358 shares
    Share 143 Tweet 90
  • Melipir ke Air Terjun Curug Cilember

    76 shares
    Share 30 Tweet 19
  • ASUS ZenPower 10050mAh, Power Bank Seukuran Kartu Kredit

    56 shares
    Share 22 Tweet 14
  • Belajar Dubbing Bersama BRID dan Gogobli: Tidak Gampang, Tapi Banyak Peluang

    109 shares
    Share 44 Tweet 27
  • 5 Alasan Kenapa Citra Raya Menjadi Perumahan Idaman di Tangerang

    116 shares
    Share 46 Tweet 29

DMCA.com Protection Status

Kecuali disebutkan secara khusus, artikel pada blog JURNAL ROSID didistribusikan dengan lisensi Creative Commons Atribusi Non Komersial (CC-BY-NC)

2011 - 2021 | dengan menggunakan ditenagai server

No Result
View All Result
  • Bisnis
  • Gadget
  • Gaya Hidup
  • Humaniora
  • Metropolitan
  • Teknologi
  • Travelling

CC-BY-NC 2011-2020 | Dibuat Dengan ❤