diff --git a/nodel-webui-js/Gruntfile.js b/nodel-webui-js/Gruntfile.js
index 2f89cdc1..df709b63 100644
--- a/nodel-webui-js/Gruntfile.js
+++ b/nodel-webui-js/Gruntfile.js
@@ -177,6 +177,7 @@ module.exports = function(grunt) {
           './node_modules/@fortawesome/fontawesome-free/css/all.local.css',
           './node_modules/bootstrap/dist/css/bootstrap.css',
           './node_modules/bootstrap/dist/css/bootstrap-theme.css',
+          './node_modules/bootstrap-select/dist/css/bootstrap-select.css',
           './node_modules/jquery.scrollbar/jquery.scrollbar.css',
           './node_modules/codemirror/lib/codemirror.css',
           './node_modules/codemirror/addon/dialog/dialog.css',
@@ -191,6 +192,7 @@ module.exports = function(grunt) {
           './node_modules/@fortawesome/fontawesome-free/css/all.local.css',
           './node_modules/bootstrap/dist/css/bootstrap.css',
           './node_modules/bootstrap/dist/css/bootstrap-theme.css',
+          './node_modules/bootstrap-select/dist/css/bootstrap-select.css',
           './node_modules/jquery.scrollbar/jquery.scrollbar.css',
           './node_modules/codemirror/lib/codemirror.css',
           './node_modules/codemirror/addon/dialog/dialog.css',
@@ -210,6 +212,7 @@ module.exports = function(grunt) {
           './node_modules/jquery/dist/jquery.js',
           './node_modules/jsviews/jsviews.js',
           './node_modules/bootstrap/dist/js/bootstrap.js',
+          './node_modules/bootstrap-select/dist/js/bootstrap-select.js',
           './node_modules/moment/moment.js',
           './node_modules/jquery.scrollbar/jquery.scrollbar.js',
           './node_modules/pagedown/Markdown.Converter.js',
diff --git a/nodel-webui-js/package.json b/nodel-webui-js/package.json
index 1b0b92d3..d8c4adde 100644
--- a/nodel-webui-js/package.json
+++ b/nodel-webui-js/package.json
@@ -6,6 +6,7 @@
     "@fortawesome/fontawesome-free": "^5.9.0",
     "array.findindex": "^1.0.4",
     "bootstrap": "^3.4.1",
+    "bootstrap-select": "1.13.10",
     "cm-resize": "^1.0.1",
     "codemirror": "^5.58.3",
     "fuzzyset.js": "0.0.8",
diff --git a/nodel-webui-js/src/nodel.js b/nodel-webui-js/src/nodel.js
index ecdba7a4..e9f060ff 100644
--- a/nodel-webui-js/src/nodel.js
+++ b/nodel-webui-js/src/nodel.js
@@ -1859,7 +1859,7 @@ var setEvents = function(){
   $('body').on('mousedown', function (e) {
     if($(e.target).closest('.dropdown-menu').length){
       $('body').one('mouseup', function (e) {
-        $('.dropdown').one('hide.bs.dropdown', function (e) {
+        $('.dropdown').not('.bootstrap-select').one('hide.bs.dropdown', function (e) {
           return false;
         });
       });
@@ -2067,80 +2067,139 @@ var updateLogForm = function(){
   }
 };
 
-var updateCharts = function(){
-  if(typeof $('body').data('nodel-charts') == 'undefined'){
-    if($(".nodel-charts").length) {
-      $('body').data('nodel-charts', false);
-      googleCharts.GoogleCharts.load(updateCharts);
+var filterSelected = [];
+var doUpdateCharts = function (rawMeasurements) {
+  var getCategoryAnd = function(measurement) {
+    var parts = measurement.name.split(".");
+    var category, subcategory;
+    if (parts.length === 2) {
+      category = parts[0];
+      subcategory = parts[1];
+    } else {
+      category = "general";
+      subcategory = measurement.name;
     }
-  } else if(!$('body').data('nodel-charts') && google){
-    google.setOnLoadCallback(updateCharts);
-    $('body').data('nodel-charts', true);
-    $('body').data('nodel-charts-prepared',{});
-  } else if($('body').data('nodel-charts')){
-    $.getJSON('/REST/diagnostics/measurements', function(rawMeasurements) {
-      rawMeasurements.sort(function(x, y) {
-        return x.name.localeCompare(y.name);
+    return [category, subcategory];
+  };
+
+  rawMeasurements.sort(function (x, y) {
+    return x.name.localeCompare(y.name);
+  });
+
+  // prepare <select> element
+  var filter = $(".nodel-charts-filter");
+  if (!filter || filter.length < 1) {
+    // append element
+    $(".nodel-charts").append(
+      '<div class="nodel-charts-filter">\
+        <select id="charts-filter" multiple data-actions-box="true" data-width="100%" data-size="10" data-header="Select"></select>\
+      </div>'
+    );
+    // populate
+    $("#charts-filter").selectpicker();
+
+    // add options (category only)
+    var categorySet = {};
+    rawMeasurements.forEach(function (measurement, i, a) {
+      var parts = getCategoryAnd(measurement);
+      var category = parts[0];
+      
+      if (!categorySet[category]) {
+        categorySet[category] = category;
+        $(".nodel-charts-filter select").append('<option value="' + category + '">' + category + "</option>");
+      }
+    });
+    // add callback
+    $(".nodel-charts-filter select").on("change", function (e) {
+      // console.info($(this).val()); // []
+      filterSelected = $(this).val();
+      // immediately update measurement
+      $.getJSON("/REST/diagnostics/measurements", function (rawMeasurements) {
+        doUpdateCharts(rawMeasurements);
       });
-      rawMeasurements.forEach(function(measurement, i, a) {
-        try {
-          //drawChart(measurement.values, measurement.isRate, measurement.name);
-          if (measurement.isRate) scale = 10;
-          else scale = 1;
-          var chartData = new google.visualization.DataTable();
-          chartData.addColumn('string', measurement.name);
-          chartData.addColumn('number', measurement.name);
-          measurement.values.forEach(function(element, index, array) {
-            chartData.addRow(['', element/scale]);
-          });
-          var parts = measurement.name.split('.');
-          var category, subcategory;
-          if (parts.length == 2) {
-              category = parts[0];
-              subcategory = parts[1];
-          } else {
-              category = 'general';
-              subcategory = measurement.name;
-          }
-          re = /[^a-zA-Z0-9]/g;
-          categoryForDiv = category.replace(re, '_');
-          subcategoryForDiv = subcategory.replace(re, '_');
-          nameForDiv = measurement.name.replace(re, '_');      
-          var categoryDiv = $('#' + categoryForDiv);
-          if (categoryDiv.length == 0) {
-            $('.nodel-charts').append('<div><h6>' + category + '</h6><hr/><div class="col-sm-12"><div class="row" id="'+categoryForDiv+'"></div></div></div>');
-            categoryDiv = $('#' + categoryForDiv);
-          }      
-          var chartDiv = $('#' + nameForDiv);
-          var chart;
-          if (chartDiv.length == 0) {
-            // console.log('Preparing new ' + nameForDiv);
-            chartDiv = categoryDiv.append('<div id="' + nameForDiv + '" class="col-sm-4 chart-min"></div>');    
-            chart = {
-              chart : new google.visualization.LineChart(document.getElementById(nameForDiv)),
-              options : {
-                title : subcategory,
-                vAxis : {
-                  minValue : 0
-                },
-                legend : {
-                  position : 'none'
-                }
-              }
-            };
-            var prepared = {};
-            prepared[measurement.name] = chart;
-            $.extend($('body').data('nodel-charts-prepared'), prepared);
-          } else {
-            chart = $('body').data('nodel-charts-prepared')[measurement.name];
-          }
-          chart.chart.draw(chartData, chart.options);
-        } catch (err) {
-          throw ('draw chart failed related to ' + measurement.name + ': ' + err);
-        }
+    });
+  }
+
+  // draw/delete charts
+  rawMeasurements.forEach(function (measurement, i, a) {
+    try {
+      var parts = getCategoryAnd(measurement);
+      var category = parts[0];
+      var subcategory = parts[1];
+
+      var re = /[^a-zA-Z0-9]/g;
+      var categoryForDiv = category.replace(re, "_");
+      var subcategoryForDiv = subcategory.replace(re, "_");
+      var nameForDiv = measurement.name.replace(re, "_");
+      var categoryDiv = $("#" + categoryForDiv);
+
+      // delete charts unless selected
+      if (filterSelected.indexOf(category) === -1) {
+        // get rid of element
+        $("#" + categoryForDiv + "_wrapper").remove();
+        return;
+      }
+
+      //drawChart(measurement.values, measurement.isRate, measurement.name);
+      var scale = measurement.isRate ? 10 : 1;
+      var chartData = new google.visualization.DataTable();
+      chartData.addColumn("string", measurement.name);
+      chartData.addColumn("number", measurement.name);
+      measurement.values.forEach(function (element, index, array) {
+        chartData.addRow(["", element / scale]);
       });
-    }).always(function(){
-      $('body').data('nodel-charts-timer', setTimeout(function() { updateCharts(); }, 10000));
+
+      if (categoryDiv.length === 0) {
+        $(".nodel-charts").append('<div id="' + categoryForDiv + "_wrapper" + '"><h6>' + category + '</h6><hr/><div class="col-sm-12"><div class="row" id="' + categoryForDiv + '"></div></div></div>');
+        categoryDiv = $("#" + categoryForDiv);
+      }
+      var chartDiv = $("#" + nameForDiv);
+      var chart;
+      if (chartDiv.length === 0) {
+        // console.log('Preparing new ' + nameForDiv);
+        chartDiv = categoryDiv.append(
+          '<div id="' + nameForDiv + '" class="col-sm-4 chart-min"></div>'
+        );
+        chart = {
+          chart: new google.visualization.LineChart(document.getElementById(nameForDiv)),
+          options: {
+            title: subcategory,
+            vAxis: {
+              minValue: 0,
+            },
+            legend: {
+              position: "none",
+            },
+          },
+        };
+        var prepared = {};
+        prepared[measurement.name] = chart;
+        $.extend($("body").data("nodel-charts-prepared"), prepared);
+      } else {
+        chart = $("body").data("nodel-charts-prepared")[measurement.name];
+      }
+      chart.chart.draw(chartData, chart.options);
+    } catch (err) {
+      throw "draw chart failed related to " + measurement.name + ": " + err;
+    }
+  });
+};
+
+var updateCharts = function () {
+  if (typeof $("body").data("nodel-charts") == "undefined") {
+    if ($(".nodel-charts").length) {
+      $("body").data("nodel-charts", false);
+      googleCharts.GoogleCharts.load(updateCharts);
+    }
+  } else if (!$("body").data("nodel-charts") && google) {
+    google.setOnLoadCallback(updateCharts);
+    $("body").data("nodel-charts", true);
+    $("body").data("nodel-charts-prepared", {});
+  } else if ($("body").data("nodel-charts")) {
+    $.getJSON("/REST/diagnostics/measurements", function (rawMeasurements) {
+      doUpdateCharts(rawMeasurements);
+    }).always(function () {
+      $("body").data("nodel-charts-timer", setTimeout(function() { updateCharts(); }, 10000));
     });
   }
 };
diff --git a/nodel-webui-js/src/theme.less b/nodel-webui-js/src/theme.less
index 16f7b0c5..e2b3635b 100644
--- a/nodel-webui-js/src/theme.less
+++ b/nodel-webui-js/src/theme.less
@@ -645,9 +645,13 @@ div.nodel-console, div.nodel-serverlog {
   overflow-anchor: none;
 }
 div.nodel-charts {
+  margin-bottom: 30px;
   .chart-min{
     min-height: 150px;
   }
+  .dropdown-menu {
+    min-width: 100% !important;
+  }
 }
 .navbar-form {
   padding-right: 0;