[bench] Add graph for throughput #19

xephonhq · Mar 21, 2017 · 8f887e3 · 8f887e3
1 parent ddfdf85
commit 8f887e3
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 0 deletions.
diff --git a/doc/bench/chart-lib/echarts.html b/doc/bench/chart-lib/echarts.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ECharts3</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.min.js"></script>
+</head>
+<body>
+<a href="http://echarts.baidu.com/demo.html#bar1">Doc</a>
+<div id="main" style="width: 600px;height:400px;"></div>
+<script type="text/javascript">
+    // 基于准备好的dom，初始化echarts实例
+    var myChart = echarts.init(document.getElementById('main'));
+
+    // 指定图表的配置项和数据
+    var option = {
+        title: {
+            text: 'ECharts 入门示例'
+        },
+        tooltip: {},
+        legend: {
+            data: ['销量', 'xx']
+        },
+        xAxis: {
+            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+        },
+        yAxis: {},
+        series: [{
+            name: '销量',
+            type: 'bar',
+            data: [5, 20, 36, 10, 10, 20]
+        }, {
+            name: 'xx',
+            type: 'bar',
+            data: [1, 2, 3, 4, 5, 6]
+        }]
+    };
+
+    // 使用刚指定的配置项和数据显示图表。
+    myChart.setOption(option);
+</script>
+</body>
+</html>
diff --git a/doc/bench/chart-lib/googleviz.html b/doc/bench/chart-lib/googleviz.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Google visualization</title>
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+</head>
+<body>
+<a href="https://developers.google.com/chart/interactive/docs/gallery/barchart">Doc</a>
+<div id="barchart_values"></div>
+<script>
+    google.charts.load("current", {packages:["corechart"]});
+    google.charts.setOnLoadCallback(drawChart);
+    function drawChart() {
+        var data = google.visualization.arrayToDataTable([
+            ["Element", "Density", { role: "style" } ],
+            ["Copper", 8.94, "#b87333"],
+            ["Silver", 10.49, "silver"],
+            ["Gold", 19.30, "gold"],
+            ["Platinum", 21.45, "color: #e5e4e2"]
+        ]);
+
+        var view = new google.visualization.DataView(data);
+        view.setColumns([0, 1,
+            { calc: "stringify",
+                sourceColumn: 1,
+                type: "string",
+                role: "annotation" },
+            2]);
+
+        var options = {
+            title: "Density of Precious Metals, in g/cm^3",
+            width: 600,
+            height: 400,
+            bar: {groupWidth: "95%"},
+            legend: { position: "none" },
+        };
+        var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
+        chart.draw(view, options);
+    }
+</script>
+</body>
+</html>
diff --git a/doc/bench/index.html b/doc/bench/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Bechmark Result</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.min.js"></script>
+</head>
+<body>
+<div id="total-request" style="width: 600px;height:400px;"></div>
+<script type="text/javascript">
+    var totalRequestChart = echarts.init(document.getElementById('total-request'));
+
+    var option = {
+        // TODO: show the ratio of success request at same time
+        title: {
+            text: 'Total Success Request in 5 seconds'
+        },
+        tooltip: {},
+        toolbox: {
+            feature: {
+                dataView: {show: true, readOnly: true},
+                magicType: {show: true, type: ['line', 'bar']},
+                restore: {show: true},
+                saveAsImage: {show: true}
+            }
+        },
+        legend: {
+            data: ['Xephon-K(Mem)', 'Xephon-K(Cassandra)', 'KairosDB', 'InfluxDB'],
+//            orient: 'vertical',
+            orient: 'horizontal',
+//            left: 'right',
+            top: 'bottom'
+        },
+        xAxis: {
+            name: 'number of concurrent clients',
+            nameLocation: 'middle',
+            nameGap: 20,
+            data: ["10", "100", "1000", "5000"]
+        },
+        yAxis: {},
+        series: [
+            {
+                name: 'Xephon-K(Mem)',
+                type: 'bar',
+                data: [12327, 21099, 31791, 12279]
+            }, {
+                name: 'Xephon-K(Cassandra)',
+                type: 'bar',
+                data: [7931, 11336, 14590, 8703]
+            },
+            {
+                name: 'KairosDB',
+                type: 'bar',
+                data: [15561, 26154, 26939, 16506]
+            },
+            {
+                name: 'InfluxDB',
+                type: 'bar',
+                data: [118, 139, 131, 130]
+            }
+        ]
+    };
+
+    totalRequestChart.setOption(option);
+</script>
+</body>
+</html>