Membangun Dashboard Dinamis dengan ChartJS

Hari ini kita akan membuat dashboard dinamis dengan grafik hidup, melalui kekuatan ChartJS. ChartJS adalah perpustakaan JavaScript bebas dependensi yang kuat, yang membangun grafik melalui elemen canvas. Yang terbaik, mudah bagi desainer untuk bersiap dan berjalan. Kita akan berfokus pada bagian-bagian perpustakaan yang membuat Anda bersiap dan berjalan dengan grafik yang indah dan fungsional dengan cepat. Kita akan membuat dashboard yang ramah seluler dari awal sampai akhir.

Mencari Solusi yang Cepat?

Jika Anda mencari solusi yang cepat, ada banyak skrip bagan dan grafik di Pasar Envato. Mulai dari beberapa dolar saja, cara cepat untuk mendapatkan fungsi ini di situs web atau aplikasi Anda. Inilah salah satu favorit kami - "Chartli" - untuk membuat grafik interaktif (terlihat cantik!)

Persiapan

Kita akan membangun dashboard kita di atas HTML5 Boilerplate. Unduh file zip, atau kloning repositori via Git. Kita akan memberi nama direktori proyek kita "chartjs_dashboard", dan letakkan semua file langsung di sana.

# On the command line
git clone git@github.com:h5bp/html5-boilerplate.git chartjs_dashboard

Selanjutnya, kita akan mengambil ChartJS. Buka versi uminified di raw.github.com/nnnick/Chart.js/master/Chart.js, dan salin isinya ke file js/plugins.js Anda. Memiliki versi yang unminified akan menjadikan kesalahan lebih mudah dibaca jika Anda mengalaminya.

Struktur file Anda akan terlihat seperti ini:

├── 404.html   
├── crossdomain.xml   
├── css   
│   ├── main.css   
│   └── normalize.css   
├── favicon.ico   
├── img   
├── index.html   
├── js   
│   ├── main.js   
│   ├── plugins.js   
│   └── vendor   
│       ├── jquery-1.10.1.min.js   
│       └── modernizr-2.6.2.min.js   
└── robots.txt

Catatan: ini tidak termasuk beberapa file yang disertakan dalam H5BP yang tidak akan kita gunakan.

Palet Warna

Sebelum kita masuk ke dalam pengkodean situs, mari kita mulai dengan membuat palet warna yang akan kita gunakan di seluruh desain. Dengan melakukan ini, kita bisa membangun semacam "panduan gaya" masa depan; ini adalah praktik umum untuk setiap desain yang diberikan.

Jika Anda membangun dashboard dengan merek tertentu, mulailah dengan menggunakan warna-warna mereknya. Hari ini, kita akan mendefinisikan dua warna utama dan dua warna tambahan. Kita juga akan menggunakan versi warna gelap atau pudar dari warna-warna ini.

Dasar-dasar ChartJS

ChartJS menggunakan elemen canvas. Elemen canvas menyediakan antarmuka hanya JavaScript untuk menggambar piksel ke area persegi panjang tertentu. Hal ini sering dibandingkan dengan SVG, yang menawarkan solusi berbasis node DOM untuk membuat grafis vektor di browser. Namun, piksel yang ditarik ke elemen canvas tidak tersimpan dalam memori dan karenanya tidak merespons event JavaScript.

Tapi cukup dengan pembicaraan teknologi - bagaimana kita memulai dengan cepat dengan ChartJS?

Untungnya, halaman beranda ChartJS memiliki banyak contoh untuk memulai dengan cepat. Pola dasarnya adalah membuat elemen canvas di HTML, pilih dengan JavaScript, dan membuat Chart saat mengirimkan data tabel yang dibuat.

<canvas id="something"></canvas>
<script>
var canvas = document.getElementById("something");
var ctx = canvas.getContext("2d");
new Chart(ctx).Line(data, options);
</script>

Contoh di atas akan mengasumsikan bahwa Anda telah mendefinisikan `data` dan` options` sebagai objek, dan akan menghasilkan grafik garis yang sesuai.

Dalam contoh kita, kita akan menggunakan grafik Doughnut, grafik Line, dan grafik Radar. Grafik ini akan mewakili metrik berorientasi bisnis yang berbeda, namun tentu saja Anda dapat mengambil ini dan menyesuaikannya dengan kebutuhan Anda.

Markup Halaman

Mari kita mulai dengan mendefinisikan beberapa HTML dasar untuk tata letak halaman kita.

<div class="wrapper">
<header>
  <div class="container clearfix">
        <h1>Overview <span>July 8-12, 2013</span><a class="button">Change Date Range</a></h1>
    </div>
</header>
<div class="container clearfix">
    <div class="third widget doughnut">
        <h3>Breakdown of Hours</h3>
        <div class="canvas-container">
            <canvas id="hours"></canvas>
        </div>
    </div>
    <div class="third widget line">
        <div class="chart-legend">
            <h3>Shipments per Day</h3>
        </div>
        <div class="canvas-container">
            <canvas id="shipments"></canvas>
        </div>
    </div>
    <div class="third widget">
        <div class="chart-legend">
            <h3>Customer Service Assessment</h3>
        </div>
        <div class="canvas-container">
            <canvas id="departments"></canvas>
        </div>
    </div>
</div>
<div class="push"></div>
</div>
<footer>
</footer>

Di sini, kita dapat melihat bahwa kita memiliki bagian header, tengah, dan footer dasar. Kita menggunakan kelas .wrapper dan kelas .push untuk membuat footer yang melekat (lihat di sini untuk info lebih lanjut). Kita akan membuat tata letak kita agar ramah mobile terlebih dahulu, dan untuk menskala keatas dari sana. Ada beberapa trik yang akan kita tarik di sepanjang jalan, tapi struktur ini akan banyak melakukan pekerjaan untuk kita.

Sebelum Kita Pergi Terlalu Jauh...

Perhatikan bahwa canvas tidak bermain dengan baik dengan kueri media. Untuk tutorial ini, kita akan membuat solusi yang memungkinkan grafik digambar ulang pada berbagai ukuran di JavaScript.

Di dalam file main.js kita, kita perlu memiliki fungsi pengukuran yang dipicu oleh perubahan ukuran jendela. Kita juga memerlukan fungsi "redraw" untuk dijalankan setelah fungsi resize dijalankan. Akhirnya, ketika kita menggambar ulang grafik, kita tidak ingin mereka beranimasi, seolah inilah saat pertama kali mereka digambar.

(function(){
// set up the timeout variable
var t;
// setup the sizing function,
// with an argument that tells the chart to animate or not
function size(animate){
    // If we are resizing, we don't want the charts drawing on every resize event.
    // This clears the timeout so that we only run the sizing function
    // when we are done resizing the window
    clearTimeout(t);
    // This will reset the timeout right after clearing it.
    t = setTimeout(function(){
        $("canvas").each(function(i,el){
            // Set the canvas element's height and width to it's parent's height and width.
            // The parent element is the div.canvas-container
            $(el).attr({
                "width":$(el).parent().width(),
                "height":$(el).parent().outerHeight()
            });
        });
        // kickoff the redraw function, which builds all of the charts.
        redraw(animate);

        // loop through the widgets and find the tallest one, and set all of them to that height.
        var m = 0;
        // we have to remove any inline height setting first so that we get the automatic height.
        $(".widget").height("");
        $(".widget").each(function(i,el){ m = Math.max(m,$(el).height()); });
        $(".widget").height(m);

    }, 100); // the timeout should run after 100 milliseconds
}
$(window).on('resize', size);
function redraw(animation){
    var options = {};
    if (!animation){
        options.animation = false;
    } else {
        options.animation = true;
    }
    // ....
        // the rest of our chart drawing will happen here
    // ....
}
size(); // this kicks off the first drawing; note that the first call to size will animate the charts in.

Jika ini nampaknya sedikit menakutkan, jangan khawatir! Ajukan pertanyaan di komentar, dan kami dan Komunitas Tuts+ akan membantu Anda memahami sepenuhnya!

Beberapa CSS untuk Kita Memulai

Kita ingin membuat beberapa struktur CSS dasar untuk kita memulai. HTML5 Boilerplate tentu saja termasuk normalize dan beberapa default lainnya yang bisa Anda ubah, tapi demi tutorialnya, kita  akan menulis CSS kita setelah baris "Author's custom styles".

html, body {
    height: 100%;
}
body {
    font-family: 'Source Sans Pro', sans-serif;
    color: #666;
}
/* button */
.button {
    cursor: pointer;
    text-decoration: none;
    font-size: 0.6em;
    font-weight: 400;
    text-transform: uppercase;
    display: inline-block;
    padding: 4px 6px;
    margin: 0 10px;
    position: relative;
    background: #ccc;
    color: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
    background: rgb(190,190,190); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(190,190,190,1) 0%, rgba(170,170,170,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(190,190,190,1)), color-stop(100%,rgba(170,170,170,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(190,190,190,1) 0%,rgba(170,170,170,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bebebe', endColorstr='#aaaaaa',GradientType=0 ); /* IE6-9 */
}
.button:hover {
    background: #637b85;
}
/* Header styles */
header {
    text-align: center;
    background: #637b85;
    color: #fff;
    margin-bottom: 40px;
}
header span {
    font-weight: 200;
}
header .button {
    font-size: 0.2em;
    top: -6px;
}

/* various containers */
.container {
    width: 200px;
    margin: 0 auto;
}
.canvas-container {
    min-height: 300px;
    max-height: 600px;
    position: relative;
}
.widget {
    position: relative;
    margin-bottom: 80px;
    background: #efefef;
    padding: 12px;
    margin-bottom: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Di sini, kita mendefinisikan CSS yang diperlukan untuk footer yang melekat, serta kelas tombol, kelas kontainer yang terpusat sendiri, kelas yang berisi elemen canvas kita di dalam widget kita, dan widget kita sendiri. Kita juga perlu menambahkan font Google yang kita definisikan untuk body dengan memasukkan ini ke dalam tag head kita.

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>

Grafik Donat

Grafik Doughnut sangat mirip dengan grafik pie, kecuali bagian tengah yang dipotong. Secara default, ChartJS mendefinisikan bahwa 50% area grafik harus ditinggalkan; kita akan tetap dengan standar ini. Kode untuk membuat grafik donat ditunjukkan di bawah ini.

var data = [
    {
        value: 20,
        color:"#637b85"
    },
    {
        value : 30,
        color : "#2c9c69"
    },
    {
        value : 40,
        color : "#dbba34"
    },
    {
        value : 10,
        color : "#c62f29"
    }

];
var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Doughnut(data);

Di sini, Anda dapat melihat bahwa kita telah menentukan data dan warna grafik donat kita. Ini semua diperlukan untuk membuat grafik donat bekerja. Namun, apa yang diwakili masing-masing bagian? Sayangnya, ChartJS belum memiliki cara mudah untuk menentukan label untuk grafik donat; namun, kita bisa membuat legenda sendiri untuk menggambarkan masing-masing bagian yang berbeda. Ubah html widget donat untuk memasukkan yang berikut ini.

<div class="third widget doughnut">
    <h3>Breakdown of Hours</h3>
    <p><a href="" class="button">Filter By Employee</a></p>
    <div class="canvas-container">
        <canvas id="hours"></canvas>
        <span class="status"></span>
    </div>
    <div class="chart-legend">
        <ul>
            <li class="ship">Shipping &amp; Receiving</li>
            <li class="rework">Rework</li>
            <li class="admin">Administrative</li>
            <li class="prod">Production</li>
        </ul>
    </div>
</div>

Kita menggunakan li ini oleh kelas mereka dengan sangat sederhana di CSS, dengan memanfaatkan pseudo-class `:before`.

.chart-legend ul {
    list-style: none;
    width: 100%;
    margin: 30px auto 0;
}
.chart-legend li {
    text-indent: 16px;
    line-height: 24px;
    position: relative;
    font-weight: 200;
    display: block;
    float: left;
    width: 50%;
    font-size: 0.8em;
}
.chart-legend  li:before {
    display: block;
    width: 10px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 3px;
    content: "";
}
.ship:before { background-color: #637b85; }
.rework:before { background-color: #2c9c69; }
.admin:before { background-color: #dbba34; }
.prod:before { background-color: #c62f29; }

Selanjutnya, kita ingin memiliki "jempol" bagus di tengah donat. Ini melibatkan beberapa trik CSS, termasuk versi Padded Box dari Uncle Dave's Ol agar lingkaran bisa responsif. Kita akan menggunakan span dengan kelas .status untuk mendapatkan lingkaran ini. Tambahkan aturan berikut ke main.css:

.widget.doughnut .status {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 0;
    padding-top: 12%;
    padding-bottom: 18%;
    color: #444;
    margin-top: -15%;
    margin-left: -15%;
    font-size: 1.4em;
    font-weight: 700;
    text-align: center;
    border-radius: 50%;
    background-color: #aaa;
    background-image: url(data:image/png;base64,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);
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: center;
}

Mungkin elemen yang paling mencolok berdiri di sini adalah penggunaan data URI untuk gambar latar belakang. Ini memungkinkan kita untuk menghindari permintaan HTTP tambahan, dan secara sintaksis identik dengan menggunakan url http yang sebenarnya. Kita juga mengatur elemen ini untuk diposisikan absolute di dalam elemen widget-nya, yang sebelumnya kita tetapkan pada posisi relative.

Mari sekarang maju dan siapkan tipografi widget. Kita hanya menggunakan elemen h3 dan p di dalam widget; inilah css yang menyertainya.

.widget p {
    margin-top: 0;
    text-align: center;
}
.widget h3 {
    margin: -12px 0 12px -12px;
    padding: 12px;
    width: 100%;
    text-align: center;
    color: #627b86;
    line-height: 2em;
    background: #d0dde3;
}

Aturan margin dan padding pada elemen h3 memungkinkan elemen meregang ke tepi elemen widget di bagian atas 12px dari padding widget. Kita juga mengatur margin atas menjadi 0 pada elemen p agar sesuai dengan header dari widget.

Grafik Garis

Salah satu fitur ChartJS yang paling berguna adalah beberapa grafik memungkinkan beberapa kumpulan data. Kumpulan data ini akan digambar ke bagan yang sama secara berurutan, memungkinkan satu dataset dibandingkan dengan yang lain. Contoh sempurna dari kegunaan hal ini adalah grafik garis. Kita akan menggunakan dua dataset untuk mengeksplorasi fungsi ini.

var data = {
    labels : ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
    datasets : [
        {
            fillColor : "rgba(99,123,133,0.4)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [65,54,30,81,56,55,40]
        },
        {
            fillColor : "rgba(219,186,52,0.4)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            data : [20,60,42,58,31,21,50]
        },
    ]
}
var canvas = document.getElementById("shipments");
var ctx = canvas.getContext("2d");
new Chart(ctx).Line(data, options);

Beberapa hal yang perlu diperhatikan dalam kode baru ini: pertama, kita menggunakan kembali variabel yang kita gunakan untuk membuat grafik donat. Ini benar-benar berlaku di JavaScript, dan sebenarnya sedikit mengurangi memori yang digunakan oleh skrip secara keseluruhan. Namun, hal ini dapat menyebabkan kebingungan di masa depan, dan jika Anda berencana untuk menyesuaikan kode ini untuk digunakan dalam produksi, mungkin akan lebih efektif untuk menggunakan variabel baru untuk setiap bagan baru yang Anda buat.

Selanjutnya, grafik garis mendukung label. Ini penting, karena memungkinkan kita menghindari pembuatan legenda berbasis HTML. Namun, penting juga bahwa poin data sesuai dengan label yang diberikan. Dalam contoh ini, data pertama kita di dataset pertama, 65, cocok dengan "Mon" di label.

Terakhir, fillColors kita untuk kumpulan data ini adalah versi RGBa dari warna yang telah kita definisikan sebelumnya (biru tua dan kuning). Kita menemukan nilai RGB dengan memasukkan warna ke dalam pemetik warna Photoshop, tapi ini bisa dilakukan dengan menggunakan sejumlah alat pemetik warna lainnya.

Kita juga akan menambahkan markup untuk beberapa tombol dan rentang yang mudah dibaca manusia. Widget baris terakhir terlihat seperti berikut.

<div class="third widget line">
    <div class="chart-legend">
        <h3>Shipments per Day</h3>
        <p><span>This Week</span> &mdash; <strong>Last Week</strong></p>
        <p><a href="" class="button">Change Date Range</a><a href="" class="button">Filter by Location</a></p>
    </div>
    <div class="canvas-container">
        <canvas id="shipments"></canvas>
    </div>
</div>

Kita bisa memoles HTML ekstra dan membantu pengguna menghubungkan tanggal dengan CSS berikut:

.widget.line p span {
    color: #dbba34;
}
.widget.line p strong {
    color: #637b85;
    font-weight: 400;
}

Grafik Radar

Grafik radar berguna untuk menyaring pilihan variabel menjadi grafik yang mudah dibaca untuk mendapatkan persepsi umum tentang interaksi antara variabel yang berbeda. Dalam contoh kita, misalnya, kita akan mengeksplorasi gagasan tentang layanan pelanggan, berdasarkan berapa kali kata kunci tertentu disebutkan. Pada grafik radar, titik-titik yang diplot akan menciptakan sebuah bentuk. Bentuk itu bisa memberi kita rasa keseluruhan tentang efektivitas layanan pelanggan.

Mari kita lihat bagaimana ini diciptakan! Sekali lagi, kita akan menggunakan kembali variabel kita dari sebelumnya.

var data = {
    labels : ["Helpful","Friendly","Kind","Rude","Slow","Frustrating"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.5)",
            strokeColor : "#637b85",
            pointColor : "#dbba34",
            pointStrokeColor : "#637b85",
            data : [65,59,90,81,30,56]
        }
    ]
}
var canvas = document.getElementById("departments");
var ctx = canvas.getContext("2d");
new Chart(ctx).Radar(data, options);

Dan HTML yang menyertainya akan terlihat seperti berikut:

<div class="third widget">
    <div class="chart-legend">
        <h3>Customer Service Assessment</h3>
        <p>based on words mentioned</p>
        <p><a href="" class="button">Track another word</a></p>
    </div>
    <div class="canvas-container">
        <canvas id="departments"></canvas>
    </div>
</div>

Secara intuitif, kita bisa mengerti bahwa bentuk yang lebih jauh ke atas dan ke kanan akan lebih baik daripada bentuk yang lebih ke bawah dan ke kiri. Namun, kita tidak kehilangan data spesifik yang tersedia bagi kita dalam grafik pada tingkat variabel tunggal granular. Dalam kasus ini, kata "kasar" sering disebutkan, namun keseluruhan rasa layanan pelanggan nampak positif berdasarkan kata kunci lainnya.

Membuat Semuanya Responsif

Kita telah menyiapkan elemen canvas kita agar responsif dengan JavaScript yang kita gunakan untuk merespons pengubahan ukuran jendela. Sekarang, kita perlu membuat CSS kita responsif menggunakan kueri media. Inilah css yang akan kita gunakan untuk melakukan ini.

@media only screen and (min-width:300px){
    .container {
        width: 300px;
        margin: 0 auto;
    }
}

@media only screen and (min-width:600px){
    .container {
        width: 580px;
        margin: 0 auto;
    }
    .third {
        float: left;
        width: 47.5%;
        margin-left: 5%;
    }
    .third:first-child {
        margin-left: 0;
    }
    .third:last-child {
        display: block;
        width: 100%;
        margin-left: 0;
    }
}

@media only screen and (min-width:960px){
    .container {
        width: 940px;
    }
    .third {
        float: left;
        width: 30%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .third:first-child {
        margin-left: 0;
    }
    .third:last-child {
        margin-right: 0;
        margin-left: 2.5%;
        width: 30%;
    }
}
@media only screen and (min-width:1140px){
    .container {
        width: 1120px;
    }
}
@media only screen and (min-width:1360px){
    .container {
        width: 1300px;
    }
}

Hal pertama yang harus diperhatikan tentang CSS ini adalah bahwa semua kueri media hanya berbasis min-width. Ini berarti bahwa kita merancang dari layar dengan lebar terendah dan menambahkan peraturan baru saat kita bergerak ke atas. Desain kita tidak memerlukan banyak perubahan pada setiap breakpoint, namun pola ini adalah praktik terbaik dalam desain semua skala.

chartjs-smallchartjs-midchartjs-largeKita bisa melihat beberapa perubahan tata letak dasar pada setiap breakpoint, termasuk elemen kontainer utama dan juga perawatan kelas .third yang kita gunakan pada masing-masing widget. Di bawah 400, kita menumpuk semua widget di atas satu sama lain. Antara 400 dan 600, kita membuat dua widget pertama setengah lebar kolom, dan widget ketiga (grafik radar) full-width. Akhirnya, di atas 960, kita menggunakan tiga kolom sejajar.

Kesimpulan

Tutorial ini telah membawa Anda melalui langkah-langkah dasar untuk membuat dashboard menggunakan ChartJS. Konsep dasar yang dijelaskan di sini akan membantu Anda menciptakan proyek yang lebih terlibat menggunakan ChartJS, dan juga harus mendorong Anda untuk memikirkan desain responsif dari perspektif bawah ke atas.

Pengalaman apa yang Anda miliki dengan perpustakaan grafik? Apakah Anda menggunakan SVG atau canvas untuk memetakan data? Hal-hal apa yang Anda inginkan agar ChartJS melakukan hal yang dia tidak bisa? Tambahkan komentar Anda di bawah ini!