DC.js - Contoh Kerja Dashboard

Dalam bab ini, kami akan mengembangkan dasbor di DC dengan mengklik dan memilih grafik.

Contoh Kerja

Sekarang, kami memiliki latar belakang dan dapat mulai menulis beberapa kode. Ini berisi langkah-langkah berikut -

Langkah 1: Tambahkan gaya

Mari kita tambahkan gaya di CSS menggunakan pengkodean yang diberikan di bawah ini.

<style>
   .dc-chart { font-size: 12px; }
   .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
   .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
</style>

Di sini, kami telah menetapkan gaya untuk bagan, kisi-atas, dan item kisi.

Langkah 2: Buat variabel

Mari kita buat variabel di DC seperti yang ditunjukkan di bawah ini.

var barChart = dc.barChart('#line');
var pieChart = dc.pieChart('#pie'); 
var countChart = dc.dataCount("#mystats");
var gridChart = dc.dataGrid("#mygrid");

Di sini, kami telah menetapkan id variabel barChart sejalan, id countChart adalah mystats, pieChart adalah pie dan id gridChart adalah mygrid.

Langkah 3: Baca datanya

Baca data dari file people.csv seperti yang ditunjukkan di bawah ini.

d3.csv("data/people.csv", function(errors, people) {
   var mycrossfilter = crossfilter(people);
}

Jika data tidak ada, maka itu mengembalikan kesalahan. Sekarang, tetapkan data ke filter silang. Di sini, kami telah menggunakan yang samapeople.csvfile, yang telah kita gunakan dalam contoh charting kita sebelumnya. Ini terlihat seperti yang ditunjukkan di bawah ini.

id,name,gender,DOB,MaritalStatus,CreditCardType
1,Damaris,Female,1973-02-18,false,visa-electron
2,Barbe,Female,1969-04-10,true,americanexpress
3,Belia,Female,1960-04-16,false,maestro
4,Leoline,Female,1995-01-19,true,bankcard
5,Valentine,Female,1992-04-16,false,
6,Rosanne,Female,1985-01-05,true,bankcard
7,Shalna,Female,1956-11-01,false,jcb
8,Mordy,Male,1990-03-27,true,china-unionpay

.........................................
.........................................

Langkah 4: Tetapkan dimensi usia

Anda dapat mengatur dimensi menggunakan pengkodean di bawah ini.

var ageDimension = mycrossfilter.dimension(function(data) { 
   return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
});

Setelah dimensi ditentukan, kelompokkan usia menggunakan kode yang diberikan di bawah ini.

var ageGroup = ageDimension.group().reduceCount();

Langkah 5: Tetapkan dimensi untuk jenis kelamin

Anda dapat mengatur dimensi menggunakan pengkodean di bawah ini.

// gender dimension
var genderDimension = mycrossfilter.dimension(function(data) { return data.gender; });
var genderGroup = genderDimension.group().reduceCount();

Langkah 6: Buat diagram batang

Sekarang, buat diagram batang menggunakan pengkodean di bawah ini.

barChart
   .width(400)
   .height(200)
   .x(d3.scale.linear().domain([15,70]))
   .yAxisLabel("Count")
   .xAxisLabel("Age")
   .elasticY(true)
   .elasticX(true)
   .dimension(ageDimension)
   .group(ageGroup);

Sini,

Kami telah menetapkan lebar grafik 400 dan tinggi 200.
Selanjutnya, kami telah menetapkan rentang domain sebagai [15, 70].
Kami telah menetapkan label sumbu x sebagai usia dan label sumbu y sebagai hitungan.
Kami telah menetapkan fungsi elasticY dan X sebagai benar.

Langkah 7: Buat diagram lingkaran

Sekarang, buat diagram lingkaran menggunakan pengkodean di bawah ini.

pieChart
   .width(200)
   .height(100)
   .dimension(genderDimension)
   .group(genderGroup);

Sini,

Kami telah menetapkan lebar bagan 200 dan tinggi 100.
Sekarang, kelompokkan dimensi berdasarkan jenis kelamin.

Langkah 8: Buat diagram kisi dan hitungan

Sekarang, buat grid dan hitung grafik menggunakan kode yang diberikan di bawah ini.

countChart
   .dimension(mycrossfilter)
   .group(mycrossfilter.groupAll());

gridChart
   .dimension(ageDimension)
   .group(function (data) {
      return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
   })

Langkah 9: Render grid dan hitung

Sekarang, render grid dan hitung menggunakan pengkodean di bawah ini.

.size(100)
   .htmlGroup (function(d) { 
      return 'Age: ' + d.key +
      '; Count: ' + d.values.length +
      ' people'
   })
   .html (function(d) { return d.name; })
   .sortBy(function (d) {
      return d.name;
   })
   .order(d3.ascending);

barChart.render();
pieChart.render();
countChart.render();
gridChart.render();

Di sini, kami telah mengurutkan nama dengan menggunakan fungsi html () dan akhirnya membuat bagan.

Langkah 10: Contoh kerja

Kode lengkapnya adalah sebagai berikut. Buat halaman webdashboard.html dan tambahkan perubahan berikut ke dalamnya.

<html>
   <head>
      <title>DC dashboard sample</title>
      <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
      <link rel = "stylesheet" type = "text/css" href = "css/dc.css"/>
      
      <style>
         .dc-chart { font-size: 12px; }
         .dc-grid-top { padding-left: 10px; font-size: 14px; font-weight: bold; }
         .dc-grid-item { padding-left: 10px; font-size: 12px; font-weight: normal; }
      </style>

      <script src = "js/d3.js"></script>
      <script src = "js/crossfilter.js"></script>
      <script src = "js/dc.js"></script>
   </head>
   
   <body>
      <div>
         <div style = "width: 600px;">
            <div id = "mystats" class = "dc-data-count" style = "float: right">
               <span class = "filter-count"></span> selected out of <span
                  class = "total-count"></span> | <a href = "javascript:dc.filterAll();
                  dc.renderAll();">Reset All</a>
            </div>
         </div>

         <div style = "clear: both; padding-top: 20px;">
            <div>
               <div id = "line"></div>
               <div id = "pie"></div>
            </div>
         </div>

         <div style = "clear: both">
            <div class = "dc-data-grid" id = "mygrid"></div>
         </div>
      </div>

      <script language = "javascript">
         var barChart = dc.barChart('#line'); // , 'myChartGroup');
         var pieChart = dc.pieChart('#pie'); //, 'myChartGroup');
         var countChart = dc.dataCount("#mystats");
         var gridChart = dc.dataGrid("#mygrid");

         d3.csv("data/people.csv", function(errors, people) {
            var mycrossfilter = crossfilter(people);

            // age dimension
            var ageDimension = mycrossfilter.dimension(function(data) { 
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000)) 
            });
            var ageGroup = ageDimension.group().reduceCount();

            // gender dimension
            var genderDimension = mycrossfilter.dimension(function(data) { 
               return data.gender; 
            });
            var genderGroup = genderDimension.group().reduceCount();

         barChart
            .width(400)
            .height(200)
            .x(d3.scale.linear().domain([15,70]))
            .yAxisLabel("Count")
            .xAxisLabel("Age")
            .elasticY(true)
            .elasticX(true)
            .dimension(ageDimension)
            .group(ageGroup);

         pieChart
            .width(200)
            .height(100)
            .dimension(genderDimension)
            .group(genderGroup);

         countChart
            .dimension(mycrossfilter)
            .group(mycrossfilter.groupAll());

         gridChart
            .dimension(ageDimension)
            .group(function (data) {
               return ~~((Date.now() - new Date(data.DOB)) / (31557600000));
            })
            .size(100)
            .htmlGroup (function(d) { 
               return 'Age: ' + d.key +
               '; Count: ' + d.values.length +
               ' people'
            })
            .html (function(d) { return d.name; })
            .sortBy(function (d) {
               return d.name;
            })
            .order(d3.ascending);

         barChart.render();
         pieChart.render();
         countChart.render();
         gridChart.render();
      });
      </script>
   </body>
</html>

Sekarang, minta browser dan kita akan melihat respons berikut.

Anda dapat memeriksa diri Anda sendiri dengan mengklik batang, diagram lingkaran, dan melihat bagaimana data berubah.