dc_example.js

// data sample
var manager_workload = [{"Response":"1001","day No":"1","No":"1.1","TASK":"Prepare Workplan","role":"DM","DO":"3003","Performance":"Low","group":"workplan","(Mins)":5,"time":"06:15"},{"Response":"1001","day No":"1","No":"1.1","TASK":"Prepare Workplan","role":"DM","DO":"3003","Performance":"Low","group":"workplan","(Mins)":5,"time":"06:20"},{"Response":"1001","day No":"1","No":"1.1","TASK":"Prepare Workplan","role":"DM","DO":"3003","Performance":"Low","group":"workplan","(Mins)":5,"time":"06:25"},{"Response":"1001","day No":"1","No":"1.1","TASK":"Prepare Workplan","role":"DM","DO":"3003","Performance":"Low","group":"workplan","(Mins)":5,"time":"06:30"},{"Response":"1001","day No":"1","No":"1.1","TASK":"Prepare Workplan","role":"DM","DO":"3003","Performance":"Low","group":"workplan","(Mins)":5,"time":"06:35"},{"Response":"1001","day No":"1","No":"1.1","TASK":"Prepare Workplan","role":"DM","DO":"3003","Performance":"Low","group":"workplan","(Mins)":5,"time":"06:40"},{"Response":"1001","day No":"1","No":"1.1","TASK":"Prepare Workplan","role":"DM","DO":"3003","Performance":"Low","group":"workplan","(Mins)":5,"time":"06:45"},{"Response":"1001","day No":"1","No":"1.1","TASK":"Prepare Workplan","role":"DM","DO":"3003","Performance":"Low","group":"workplan","(Mins)":5,"time":"06:50"},{"Response":"1001","day No":"1","No":"1.1","TASK":"Prepare Workplan","role":"DM","DO":"3003","Performance":"Low","group":"workplan","(Mins)":5,"time":"06:55"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:00"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:05"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:10"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:15"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:20"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:25"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:30"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:35"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:40"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:45"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:50"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"07:55"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:00"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:05"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:10"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:15"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:20"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:25"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:30"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:35"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:40"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:45"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:50"},{"Response":"1001","day No":"1","No":"1.2","TASK":"Manage IPS","role":"DM","DO":"3003","Performance":"Low","group":"indoor management","(Mins)":5,"time":"08:55"},{"Response":"1001","day No":"1","No":"2.3","TASK":"Performance Checks","role":"DM","DO":"3003","Performance":"Low","group":"outdoor management","(Mins)":5,"time":"09:00"},{"Response":"1001","day No":"1","No":"2.3","TASK":"Performance Checks","role":"DM","DO":"3003","Performance":"Low","group":"outdoor management","(Mins)":5,"time":"09:05"},{"Response":"1001","day No":"1","No":"2.3","TASK":"Performance Checks","role":"DM","DO":"3003","Performance":"Low","group":"outdoor management","(Mins)":5,"time":"09:10"},{"Response":"1001","day No":"1","No":"2.3","TASK":"Performance Checks","role":"DM","DO":"3003","Performance":"Low","group":"outdoor management","(Mins)":5,"time":"09:15"},{"Response":"1001","day No":"1","No":"2.3","TASK":"Performance Checks","role":"DM","DO":"3003","Performance":"Low","group":"outdoor management","(Mins)":5,"time":"09:20"},{"Response":"1001","day No":"1","No":"2.3","TASK":"Performance Checks","role":"DM","DO":"3003","Performance":"Low","group":"outdoor management","(Mins)":5,"time":"09:25"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"06:50"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"06:55"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"08:55"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"09:30"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"09:35"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"09:40"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"10:55"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"11:00"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"11:05"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"12:00"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"12:05"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"12:30"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"12:45"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"13:25"},{"Response":"1001","day No":"1","No":"3.1","TASK":"Actioned and responded","role":"DM","DO":"3003","Performance":"Low","group":"emails","(Mins)":5,"time":"13:30"},{"Response":"1001","day No":"1","No":"6.1","TASK":"Complete Sick Absence procedure (Phone Calls and Letters)","role":"DM","DO":"3003","Performance":"Low","group":"ad-hoc resource management","(Mins)":5,"time":"11:25"},{"Response":"1001","day No":"1","No":"6.1","TASK":"Complete Sick Absence procedure (Phone Calls and Letters)","role":"DM","DO":"3003","Performance":"Low","group":"ad-hoc resource management","(Mins)":5,"time":"11:30"},{"Response":"1001","day No":"1","No":"6.1","TASK":"Complete Sick Absence procedure (Phone Calls and Letters)","role":"DM","DO":"3003","Performance":"Low","group":"ad-hoc resource management","(Mins)":5,"time":"11:35"},{"Response":"1001","day No":"1","No":"6.1","TASK":"Complete Sick Absence procedure (Phone Calls and Letters)","role":"DM","DO":"3003","Performance":"Low","group":"ad-hoc resource management","(Mins)":5,"time":"11:40"}]


/**********************************
 * Step0: Load data from json file *
 **********************************/

// load data from a csv file
d3.json(manager_workload, function(data) {

  // // // 05:00,05:05,05:10,05:15,05:20,05:25,05:30,05:35,05:40,05:45,05:50,05:55,06:00,06:05,06:10,06:15,06:20,06:25,06:30,06:35,06:40,06:45,06:50,06:55,07:00,07:05,07:10,07:15,07:20,07:25,07:30,07:35,07:40,07:45,07:50,07:55,08:00,08:05,08:10,08:15,08:20,08:25,08:30,08:35,08:40,08:45,08:50,08:55,09:00,09:05,09:10,09:15,09:20,09:25,09:30,09:35,09:40,09:45,09:50,09:55,10:00,10:05,10:10,10:15,10:20,10:25,10:30,10:35,10:40,10:45,10:50,10:55,11:00,11:05,11:10,11:15,11:20,11:25,11:30,11:35,11:40,11:45,11:50,11:55,12:00,12:05,12:10,12:15,12:20,12:25,12:30,12:35,12:40,12:45,12:50,12:55,13:00,13:05,13:10,13:15,13:20,13:25,13:30,13:35,13:40,13:45,13:50,13:55,14:00,14:05,14:10,14:15,14:20,14:25,14:30,14:35,14:40,14:45,14:50,14:55,15:00,15:05,15:10,15:15,15:20,15:25,15:30,15:35,15:40,15:45,15:50,15:55,16:00,16:05,16:10,16:15,16:20,16:25,16:30,16:35,16:40,16:45,16:50,16:55,17:00,17:05,17:10,17:15,17:20,17:25,17:30,17:35,17:40,17:45,17:50,17:55
  // var interval = 5;
  // var keys = [];
  // var date = new Date(2014, 0, 1, 5, 0);
  // while (date.getHours() < 18) {
  //   var str = zPad(date.getHours(), 2) + '.' + zPad(date.getMinutes(), 2)
  //   keys.push(str.replace(/\./g, ":"));
  //   date.setMinutes(date.getMinutes() + interval);
  // }

  // format our data
  var timeFormat = d3.time.format("%Y-%m-%dT%H:%M");
  var numberFormat = d3.format(".2f");

  data.forEach(function(d) {
    var timeString = "2014-01-0" + d['day No'] + "T" + d.time;
    d.date = timeFormat.parse(timeString);
  });


  /******************************************************
   * Step1: Create the dc.js chart objects & ling to div *
   ******************************************************/

  var performanceChart = dc.barChart("#dc-performance-chart");
  var typeChart = dc.barChart("#dc-type-chart");
  var DOChart = dc.rowChart("#dc-do-chart");
  var taskChart = dc.rowChart("#dc-task-chart");
  var hourChart = dc.lineChart("#dc-hour-chart");
  var dataTable = dc.dataTable("#dc-table-chart");
  var dataCount = dc.dataCount("#data-count");
  // var rowChart = dc.rowChart("#dc-row-chart");

  /****************************************
   *   Run the data through crossfilter    *
   ****************************************/
  var facts = crossfilter(data); // Gets our 'facts' into crossfilter

  var all = facts.groupAll();


  // define a daily volume Dimension
  var volumeByHour = facts.dimension(function(d) {
    return d3.time.minute(d.date);
  });


  // map/reduce to group sum
  var volumeByHourGroup = volumeByHour.group()
    .reduceCount(function(d) {
      return d.date;
    });



  // for performance
  var performanceValue = facts.dimension(function(d) {
    return d.Performance; // group or filter by performance
  });

  var performanceValueGroupSum = performanceValue.group()
    .reduceSum(function(d) {
      return d['(Mins)'] / 60;
    }); // sums the hours per performance band
  var performanceValueGroupCount = performanceValue.group()
    .reduceCount(function(d) {
      return d['(Mins)'] / 60;
    }); // counts th


  function orderValue(p) {
    console.log(p);
    return p.total;
  }



  // for manager type
  var typeValue = facts.dimension(function(d) {
    return d.role; // group or filter by performance
  });

  var typeValueGroupSum = typeValue.group()
    .reduceSum(function(d) {
      return d['(Mins)'] / 60;
    }); // sums the hours per performance band
  var typeValueGroupCount = typeValue.group()
    .reduceCount(function(d) {
      return d['(Mins)'] / 60;
    }) // counts th        

  // for DOs
  var DOValue = facts.dimension(function(d) {
    return d.DO; // group or filter by performance
  });

  var DOValueGroupSum = DOValue.group()
    .reduceSum(function(d) {
      return d['(Mins)'] / 60;
    }); // sums the hours per performance band
  var DOValueGroupCount = DOValue.group()
    .reduceCount(function(d) {
      return d['(Mins)'] / 60;
    }) // counts th

  // For datatable
  var dayDimension = facts.dimension(function(d) {
    return d['day No'];
  }); // group or filter by day

  // for Tasks

  // var taskDimension = facts.dimension(function(d) {
  //     return d.TASK;
  // });
  // var taskGroup = taskDimension.group();

  // for performance
  var taskValue = facts.dimension(function(d) {
    return d.group; // group or filter by performance
  });

  var taskValueGroupSum = taskValue.group()
    .reduceSum(function(d) {
      return d['(Mins)'] / 60;
    }); // sums the hours per performance band
  var taskValueGroupCount = taskValue.group()
    .reduceCount(function(d) {
      return d['(Mins)'] / 60;
    }) // counts th    


  var dayValue = facts.dimension(function(d) {
    return d['day No']; // group or filter by performance
  });

  var dayValueGroupSum = dayValue.group()
    .reduceSum(function(d) {
      return d['(Mins)'] / 60;
    }); // sums the hours per performance band


  /***************************************
   *   Step4: Create the Visualisations   *
   ***************************************/

  // Magnitide Bar Graph Summed
  performanceChart.width(320)
    .height(240)
    .margins({
      top: 10,
      right: 10,
      bottom: 20,
      left: 40
    })
    .dimension(performanceValue) // the values across the x axis
  .group(performanceValueGroupCount) // the values on the y axis
  .ordering(function(d) {
    console.log(d);
    return -d.value
  })

  .transitionDuration(500)
    .centerBar(true)
    .gap(56) // bar width Keep increasing to get right then back off.
  .x(d3.scale.ordinal().domain(['Low', 'Normal', 'High', '#N/A']))
    .xUnits(dc.units.ordinal)
    .elasticY(true)
    .colors(["#66c2a5"])


  // Magnitide Bar Graph Summed
  typeChart.width(320)
    .height(230)
    .margins({
      top: 10,
      right: 10,
      bottom: 20,
      left: 40
    })
    .dimension(typeValue) // the values across the x axis
  .group(typeValueGroupCount) // the values on the y axis
  .ordering(function(d) {
    console.log(d);
    return -d.value
  })
    .transitionDuration(500)
    .centerBar(true)
    .gap(40) // bar width Keep increasing to get right then back off.
  .x(d3.scale.ordinal().domain(['DOM', 'DLM', 'DM', 'WPC', 'PHG']))
    .xUnits(dc.units.ordinal)
    .elasticY(true)
    .colors(["#fc8d62"])


  // Magnitide Bar Graph Summed
  DOChart.width(320)
    .height(1200)
    .margins({
      top: 10,
      right: 10,
      bottom: 20,
      left: 40
    })
    .dimension(DOValue)
    .group(DOValueGroupCount)
    .transitionDuration(500)
    .colors(["#8da0cb"])
    .ordering(function(d) {
      return -d.value
    })



  taskChart
    .width(420)
    .height(800)
    .dimension(taskValue)
    .group(taskValueGroupCount)
    .transitionDuration(500)
    .ordering(function(d) {
      return -d.value
    })

  // .colors(["#8da0cb"]);


  // time graph
  hourChart.width(1000)
    .height(210)
    .margins({
      top: 10,
      right: 10,
      bottom: 20,
      left: 40
    })
    .dimension(volumeByHour)
    .group(volumeByHourGroup)
    .transitionDuration(500)
    .elasticY(true)
    .x(d3.time.scale().domain(d3.extent(data, function(d) {
      return d.date;
    })))
    .xAxis();
    
    // hourChart.yAxis().ticks(0);;


  // Table of earthquake data
  dataTable.width(640).height(800)
    .dimension(dayDimension)
    .group(function(d) {
      return "List of records (max. 200)"
    })
    .size(200) // number of rows to return
  .columns([

    function(d) {
      return d.Response;
    },
    function(d) {
      return d['day No'];
    },
    function(d) {
      return d.No;
    },
    function(d) {
      return d.TASK;
    },
    function(d) {
      return d.role;
    },
    function(d) {
      return d.DO;
    },
    function(d) {
      return d.Performance;
    },
    function(d) {
      return d.group;
    },
    function(d) {
      return d['(Mins)'];
    },
    function(d) {
      return d.time;
    }
  ])
    .sortBy(function(d) {
      return d.date;
    })
    .order(d3.ascending);



  dataCount
    .dimension(facts)
    .group(all)
    .html({
      some: "<p><strong>%filter-count</strong> selected out of <strong>%total-count</strong> records | <a href='javascript:dc.filterAll(); dc.renderAll();''>Reset All</a></p>",
      all: "<p>All records selected. Click/drag on any chart to apply filters.</p>"
    });

  /****************************
   * Step6: Render the Charts  *
   ****************************/

  dc.renderAll();


  // function AddXAxis(chartToUpdate, displayText) {
  //   chartToUpdate.svg()
  //     .append("text")
  //     .attr("class", "title")
  //     .attr("text-anchor", "middle")
  //     .attr("x", chartToUpdate.width() / 2)
  //     .attr("y", 12)
  //     .text(displayText);
  // }
  // AddXAxis(hourChart, "This is the x-axis!");

});


function zPad(n, l, r) {
  return (a = String(n).match(/(^-?)(\d*)\.?(\d*)/)) ? a[1] + (Array(l).join(0) + a[2]).slice(-Math.max(l, a[2].length)) + ('undefined' !== typeof r ? (0 < r ? '.' : '') + (a[3] + Array(r + 1).join(0)).slice(0, r) : a[3] ? '.' + a[3] : '') : 0
}


// $('#title').delay(5000).fadeOut('slow');
// $("#title").delay(3000).fadeOut('slow', function() { $(this).remove(); });