$(function() {
  var form_cnt = 1;

  insertFunc($(".datepick_form"));

  $("#duplicate_form_btn").on("click", function() {
    console.log("duplicate form");
    var original = $("#datepick_form_1");
    var last = $(".datepick_form:last");
    form_cnt++;
    
    var clone = $(original).clone().insertAfter(last);
    $(clone).attr("id", "datepick_form_" + form_cnt)
            .find("*").each(function(i, elem) {
              $.each(["id", "name", "for"], function(j, item) {
                if ($(elem).attr(item)) {
                  $(elem).attr(item, $(elem).attr(item).replace(/_[0-9]+$/, "_" + form_cnt)).val("");
                }
              });
            });
    $(clone).find(".remove_form_btn").removeAttr("disabled");

    insertFunc($(clone));
  });

  function insertFunc(element) {
    element.on("submit", showChart)
           .find(".remove_form_btn").on("click", removeForm);
    element.find(".target_date").datepicker({
             format: "yyyy/mm/dd",
             orientation: "top auto",
             autoclose: true,
             todayHighlight: true
           });
  }

  function showChart(e) {
    console.log("showChart");
    console.log($(this).find(".target_date").val());
    var pickedDate = $(this).find(".target_date").val();
    if (pickedDate && $.trim(pickedDate) != "") {
      console.log("pickedDate=" + pickedDate);
      watchedList = getWatchedList(pickedDate);
      wrapper = $(this).find(".chart")
      canvas = $(this).find(".chart canvas")
      drawChart(wrapper, canvas, watchedList);
    }
    return false;
  }

  function removeForm(e) {
    console.log("removeForm");
    e.target.closest("form").remove();
  }

  function getWatchedList(targetDate) {
    console.log("getWatchedList");
    return testData;
  }

  function drawChart(wrapper, canvas, watchedList) {
    console.log("showChart");
    var w = wrapper.width();
    var h = wrapper.height();
    console.log("w:" + w + ":h:" + h);

    canvas.attr({"width":w, "height":h});
    canvas.width(w);
    canvas.height(h);

    canvas.clearCanvas();

    var uw = Math.round(w/watchedList.length);
    console.log(uw);

    $.each(watchedList, function(i, item) {
      canvas.drawRect({
        fillStyle: "rgb(" + i + "," + i + "," + i + ")",
        x: uw * i,
        y: 0,
        width: uw,
        height: h,
        fromCenter: false
      }); 
    });
  }
});

@@ -2180,24 +2180,49 @@
 (i, item) %7B%0A
+      console.log(item);%0A
       canvas
@@ -2256,44 +2256,25 @@
 le: 
-%22rgb(%22 + i + %22,%22 + i + %22,%22 + i + %22)%22
+decideColor(item)
 ,%0A  
@@ -2379,16 +2379,16 @@
    %7D); %0A
-
     %7D);%0A
@@ -2390,13 +2390,244 @@
  %7D);%0A  %7D
+%0A%0A  function decideColor(item) %7B%0A    var hue;%0A    if (item.count == 0) %7B%0A      return %22hsl(0, 0%25, 0%25)%22;%0A    %7D%0A    else %7B%0A      hue = Math.round(item.val / item.count) * 60 - 60;%0A      return %22hsl(%22 + hue + %22, 100%25, 50%25)%22;%0A    %7D%0A  %7D
 %0A%7D);%0A

add chart color logic