jQuery

【jQuery】ヒストグラムスライダープラグインHistogram Slider

July 6, 2017
jquery-histogram-slider

Histogram Sliderはシンプルでレスポンシブ、jQueryを使ったヒストグラムスライダープラグイン。

JS

    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
    <script>
      $(document).ready(function(){
        // Sample data for histogram
        sliderMin = 0;
        sliderMax = 1000000;
        leftHandleValue = 150000
        rightHandleValue = 550000
        histogramData = {
            "numberOfBins": 40,
            "objects": []
        }
        // programmatically generate the data for the histogram
        for (i = 0; i < 300; i++) {
          randomNumber = Math.floor(Math.random() * histogramData.numberOfBins) + 1
          randomValue = ((sliderMax/histogramData.numberOfBins)-1) * randomNumber
          histogramData.objects.push({ "value": randomValue })
        }
        bins = new Array(histogramData.numberOfBins).fill(0);
        widthPerBin = 100/histogramData.numberOfBins
        rangePerBin = (sliderMax-sliderMin)/histogramData.numberOfBins
        // iterate through data and increment the correct bin based on object.value
        for (i = 0; i < histogramData.objects.length; i++) {
          index = parseInt(histogramData.objects[i].value/rangePerBin)
          bins[index] += 1
        }
        // create histogram based on bins. 10px of height for every object in that bin.
        for (i = 0; i < bins.length; i++) {
          $("#histogram").append( "<div class='pull-left bin_container' style='width:" + widthPerBin + "%;'><div class='blue_background bin' style='height:" + parseInt(5*bins[i]+1) +"px; bottom: -" + parseInt(200 - ((5*bins[i]+1))) + "px;'></div><div class='grey_bin' style='height:" + parseInt(5*bins[i]+1) +"px; bottom: -" + parseInt(200-(5*bins[i]+1)*2) + "px;'></div></div>" );
        }
        // Initialize slider
        $( "#histogram_slider" ).slider({
          range: true,
          min: sliderMin,
          max: sliderMax,
          values: [ leftHandleValue, rightHandleValue ],
          slide: function( event, ui ) {
            updateHistogram(ui.values[0], ui.values[1], Boolean(ui.handle.nextSibling));
          }
        });
        // Set the opacity of the histogram when the page loads
        updateHistogram(leftHandleValue, rightHandleValue, false);
        updateHistogram(leftHandleValue, rightHandleValue, true);
        function updateHistogram(leftHandleValue, rightHandleValue, isLeftSlider) {
          $( "#value" ).html(  "$" + leftHandleValue + " - $" + rightHandleValue );
          // set opacity per bin based on the slider values
          $(".bin").each(function(index, bin) {
            maxBinValue = (rangePerBin*(index+1));
            minBinValue = (rangePerBin*index)+sliderMin;
            if (isLeftSlider) {
              // Set opacity based on left (min) slider
              if(maxBinValue < rightHandleValue ){
                if( leftHandleValue > maxBinValue ){
                  $(this).css("opacity", 0);
                } else if ( leftHandleValue < minBinValue ) {
                  $(this).css("opacity", 1);
                } else {
                  $(this).css("opacity", 1-(leftHandleValue-minBinValue)/rangePerBin);
                }
              }
            } else {
              // Set opacity based on right (max) slider value
              if(minBinValue > leftHandleValue){
                if( rightHandleValue > maxBinValue ){
                  $(this).css("opacity", 1);
                } else if ( rightHandleValue < minBinValue ) {
                  $(this).css("opacity", 0);
                } else {
                  $(this).css("opacity", (rightHandleValue-minBinValue)/rangePerBin);
                }
              }
            }
          });
        }
      });
    </script>