diff --git a/public/javascripts/indexAbsoluteMaxBytes.js b/public/javascripts/indexAbsoluteMaxBytes.js
new file mode 100644
index 0000000..53d1e7f
--- /dev/null
+++ b/public/javascripts/indexAbsoluteMaxBytes.js
@@ -0,0 +1,97 @@
+const xmlhttp = new XMLHttpRequest();
+xmlhttp.open(
+  'GET',
+  '../api/get?data=BatchTimeout&orderby=AbsoluteMaxBytes',
+  false
+);
+xmlhttp.send();
+const BatchTimeout = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=TPS&orderby=AbsoluteMaxBytes', false);
+xmlhttp.send();
+const TPS = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=MaxMessageCount&orderby=AbsoluteMaxBytes',
+  false
+);
+xmlhttp.send();
+const MaxMessageCount = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=AbsoluteMaxBytes&orderby=AbsoluteMaxBytes',
+  false
+);
+xmlhttp.send();
+const AbsoluteMaxBytes = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=PreferredMaxBytes&orderby=AbsoluteMaxBytes',
+  false
+);
+xmlhttp.send();
+const PreferredMaxBytes = xmlhttp.responseText.split(',');
+
+const Turn1 = {
+  opacity: 0.5,
+  color: 'rgb(255,0,0)',
+  type: 'scatter3d',
+  x: AbsoluteMaxBytes,
+  y: MaxMessageCount,
+  z: TPS,
+  scene: 'scene1',
+};
+
+const Turn2 = {
+  opacity: 0.5,
+  color: 'rgb(0,255,0)',
+  type: 'scatter3d', // 'mesh3d',
+  x: AbsoluteMaxBytes,
+  y: BatchTimeout,
+  z: TPS,
+  scene: 'scene2',
+};
+
+const Turn3 = {
+  opacity: 0.5,
+  color: 'rgb(0,0,255)',
+  type: 'scatter3d',
+  x: AbsoluteMaxBytes,
+  y: PreferredMaxBytes,
+  z: TPS,
+  scene: 'scene3',
+};
+
+const layout = {
+  scene1: {
+    domain: {
+      x: [0.0, 0.33],
+      y: [0.5, 1.0],
+    },
+  },
+  scene2: {
+    domain: {
+      x: [0.33, 0.66],
+      y: [0.5, 1.0],
+    },
+  },
+  scene3: {
+    domain: {
+      x: [0.66, 0.99],
+      y: [0.5, 1.0],
+    },
+  },
+  height: 600,
+  margin: {
+    l: 0,
+    r: 0,
+    b: 0,
+    t: 0,
+    pad: 0,
+  },
+};
+
+Plotly.newPlot('myDiv', [Turn1, Turn2, Turn3], layout);
diff --git a/public/javascripts/indexBatchTimeout.js b/public/javascripts/indexBatchTimeout.js
new file mode 100644
index 0000000..ac5b971
--- /dev/null
+++ b/public/javascripts/indexBatchTimeout.js
@@ -0,0 +1,93 @@
+const xmlhttp = new XMLHttpRequest();
+xmlhttp.open('GET', '../api/get?data=BatchTimeout&orderby=BatchTimeout', false);
+xmlhttp.send();
+const BatchTimeout = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=TPS&orderby=BatchTimeout', false);
+xmlhttp.send();
+const TPS = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=MaxMessageCount&orderby=BatchTimeout',
+  false
+);
+xmlhttp.send();
+const MaxMessageCount = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=AbsoluteMaxBytes&orderby=BatchTimeout',
+  false
+);
+xmlhttp.send();
+const AbsoluteMaxBytes = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=PreferredMaxBytes&orderby=BatchTimeout',
+  false
+);
+xmlhttp.send();
+const PreferredMaxBytes = xmlhttp.responseText.split(',');
+
+const Turn1 = {
+  opacity: 0.5,
+  color: 'rgb(255,0,0)',
+  type: 'scatter3d',
+  x: BatchTimeout,
+  y: MaxMessageCount,
+  z: TPS,
+  scene: 'scene1',
+};
+
+const Turn2 = {
+  opacity: 0.5,
+  color: 'rgb(0,255,0)',
+  type: 'scatter3d', // 'mesh3d',
+  x: BatchTimeout,
+  y: AbsoluteMaxBytes,
+  z: TPS,
+  scene: 'scene2',
+};
+
+const Turn3 = {
+  opacity: 0.5,
+  color: 'rgb(0,0,255)',
+  type: 'scatter3d',
+  x: BatchTimeout,
+  y: PreferredMaxBytes,
+  z: TPS,
+  scene: 'scene3',
+};
+
+const layout = {
+  scene1: {
+    domain: {
+      x: [0.0, 0.33],
+      y: [0.5, 1.0],
+    },
+  },
+  scene2: {
+    domain: {
+      x: [0.33, 0.66],
+      y: [0.5, 1.0],
+    },
+  },
+  scene3: {
+    domain: {
+      x: [0.66, 0.99],
+      y: [0.5, 1.0],
+    },
+  },
+  height: 600,
+  margin: {
+    l: 0,
+    r: 0,
+    b: 0,
+    t: 0,
+    pad: 0,
+  },
+};
+
+Plotly.newPlot('myDiv', [Turn1, Turn2, Turn3], layout);
diff --git a/public/javascripts/indexMaxMessageCount.js b/public/javascripts/indexMaxMessageCount.js
new file mode 100644
index 0000000..2bfcecb
--- /dev/null
+++ b/public/javascripts/indexMaxMessageCount.js
@@ -0,0 +1,97 @@
+const xmlhttp = new XMLHttpRequest();
+xmlhttp.open(
+  'GET',
+  '../api/get?data=BatchTimeout&orderby=MaxMessageCount',
+  false
+);
+xmlhttp.send();
+const BatchTimeout = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=TPS&orderby=MaxMessageCount', false);
+xmlhttp.send();
+const TPS = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=MaxMessageCount&orderby=MaxMessageCount',
+  false
+);
+xmlhttp.send();
+const MaxMessageCount = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=AbsoluteMaxBytes&orderby=MaxMessageCount',
+  false
+);
+xmlhttp.send();
+const AbsoluteMaxBytes = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=PreferredMaxBytes&orderby=MaxMessageCount',
+  false
+);
+xmlhttp.send();
+const PreferredMaxBytes = xmlhttp.responseText.split(',');
+
+const Turn1 = {
+  opacity: 0.5,
+  color: 'rgb(255,0,0)',
+  type: 'scatter3d',
+  x: MaxMessageCount,
+  y: BatchTimeout,
+  z: TPS,
+  scene: 'scene1',
+};
+
+const Turn2 = {
+  opacity: 0.5,
+  color: 'rgb(0,255,0)',
+  type: 'scatter3d', // 'mesh3d',
+  x: MaxMessageCount,
+  y: AbsoluteMaxBytes,
+  z: TPS,
+  scene: 'scene2',
+};
+
+const Turn3 = {
+  opacity: 0.5,
+  color: 'rgb(0,0,255)',
+  type: 'scatter3d',
+  x: MaxMessageCount,
+  y: PreferredMaxBytes,
+  z: TPS,
+  scene: 'scene3',
+};
+
+const layout = {
+  scene1: {
+    domain: {
+      x: [0.0, 0.33],
+      y: [0.5, 1.0],
+    },
+  },
+  scene2: {
+    domain: {
+      x: [0.33, 0.66],
+      y: [0.5, 1.0],
+    },
+  },
+  scene3: {
+    domain: {
+      x: [0.66, 0.99],
+      y: [0.5, 1.0],
+    },
+  },
+  height: 600,
+  margin: {
+    l: 0,
+    r: 0,
+    b: 0,
+    t: 0,
+    pad: 0,
+  },
+};
+
+Plotly.newPlot('myDiv', [Turn1, Turn2, Turn3], layout);
diff --git a/public/javascripts/indexPreferredMaxBytes.js b/public/javascripts/indexPreferredMaxBytes.js
new file mode 100644
index 0000000..76e349e
--- /dev/null
+++ b/public/javascripts/indexPreferredMaxBytes.js
@@ -0,0 +1,97 @@
+const xmlhttp = new XMLHttpRequest();
+xmlhttp.open(
+  'GET',
+  '../api/get?data=BatchTimeout&orderby=PreferredMaxBytes',
+  false
+);
+xmlhttp.send();
+const BatchTimeout = xmlhttp.responseText.split(',');
+
+xmlhttp.open('GET', '../api/get?data=TPS&orderby=PreferredMaxBytes', false);
+xmlhttp.send();
+const TPS = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=MaxMessageCount&orderby=PreferredMaxBytes',
+  false
+);
+xmlhttp.send();
+const MaxMessageCount = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=AbsoluteMaxBytes&orderby=PreferredMaxBytes',
+  false
+);
+xmlhttp.send();
+const AbsoluteMaxBytes = xmlhttp.responseText.split(',');
+
+xmlhttp.open(
+  'GET',
+  '../api/get?data=PreferredMaxBytes&orderby=PreferredMaxBytes',
+  false
+);
+xmlhttp.send();
+const PreferredMaxBytes = xmlhttp.responseText.split(',');
+
+const Turn1 = {
+  opacity: 0.5,
+  color: 'rgb(255,0,0)',
+  type: 'scatter3d',
+  x: PreferredMaxBytes,
+  y: BatchTimeout,
+  z: TPS,
+  scene: 'scene1',
+};
+
+const Turn2 = {
+  opacity: 0.5,
+  color: 'rgb(0,255,0)',
+  type: 'scatter3d', // 'mesh3d',
+  x: PreferredMaxBytes,
+  y: AbsoluteMaxBytes,
+  z: TPS,
+  scene: 'scene2',
+};
+
+const Turn3 = {
+  opacity: 0.5,
+  color: 'rgb(0,0,255)',
+  type: 'scatter3d',
+  x: PreferredMaxBytes,
+  y: MaxMessageCount,
+  z: TPS,
+  scene: 'scene3',
+};
+
+const layout = {
+  scene1: {
+    domain: {
+      x: [0.0, 0.33],
+      y: [0.5, 1.0],
+    },
+  },
+  scene2: {
+    domain: {
+      x: [0.33, 0.66],
+      y: [0.5, 1.0],
+    },
+  },
+  scene3: {
+    domain: {
+      x: [0.66, 0.99],
+      y: [0.5, 1.0],
+    },
+  },
+  height: 600,
+  margin: {
+    l: 0,
+    r: 0,
+    b: 0,
+    t: 0,
+    pad: 0,
+  },
+};
+
+Plotly.newPlot('myDiv', [Turn1, Turn2, Turn3], layout);