[Kimchi-devel] [v2 2/2] UI: Line Chart Sample
huoyuxin at linux.vnet.ibm.com
huoyuxin at linux.vnet.ibm.com
Fri Jan 30 09:23:48 UTC 2015
From: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
Signed-off-by: Yu Xin Huo <huoyuxin at linux.vnet.ibm.com>
---
ui/js/widgets/samples/line.html | 168 +++++++++++++++++++++++++++++++++++++++
1 files changed, 168 insertions(+), 0 deletions(-)
create mode 100644 ui/js/widgets/samples/line.html
diff --git a/ui/js/widgets/samples/line.html b/ui/js/widgets/samples/line.html
new file mode 100644
index 0000000..794cb7f
--- /dev/null
+++ b/ui/js/widgets/samples/line.html
@@ -0,0 +1,168 @@
+<!--
+ *
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2015
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Kimchi</title>
+<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+
+<link rel="stylesheet" href="../../../libs/themes/base/jquery-ui.min.css">
+<link rel="stylesheet" href="../../../fontello/css/fontello.css">
+<link rel="stylesheet" href="../../../fontello/css/animation.css">
+<link rel="stylesheet" href="../../../css/theme-default.min.css">
+
+<script src="../../../libs/jquery-1.10.0.min.js"></script>
+<script src="../../../libs/jquery-ui.min.js"></script>
+<script src="../../../libs/jquery-ui-i18n.min.js"></script>
+<script src="../../../js/kimchi.min.js"></script>
+
+<style type="text/css">
+body {
+ background: none;
+}
+.cell {
+ display: inline-block;
+ width: 49%;
+}
+.monitor {
+ width: 391px;
+ margin: 15px auto;
+}
+.chart {
+ width: 390px;
+ height: 200px;
+ margin-top: 20px;
+}
+.legend {
+ height: 25px;
+ line-height: 25px;
+ padding-left: 8px;
+ margin: 5px 30px 5px 0;
+ border-left: 3px solid;
+ display: inline-block;
+}
+</style>
+<script>
+function init(){
+$('#chart1').line({
+ minVal: 0,
+ maxVal: 500,
+ datasets: [{
+ data: new Array(50),
+ color: "#d9182d"
+ }]
+});
+$('#chart2').line({
+ minVal: 0,
+ maxVal: 500,
+ datasets: [{
+ data: new Array(50),
+ color: "#008abf"
+ }]
+});
+$('#chart3').line({
+ minVal: 0,
+ maxVal: 500,
+ datasets: [{
+ data: new Array(50),
+ color: "#fdb813"
+ }, {
+ data: new Array(50),
+ color: "#00a6a0"
+ }]
+});
+$('#chart4').line({
+ minVal: 0,
+ maxVal: 500,
+ datasets: [{
+ data: new Array(50),
+ color: "#561289"
+ }, {
+ data: new Array(50),
+ color: "#238901"
+ }]
+});
+setInterval(function(){
+ $('#chart1').line('addData', [Math.round(Math.random()*500)]);
+}, 1000);
+setInterval(function(){
+ $('#chart2').line('addData', [Math.round(Math.random()*500)]);
+}, 1000);
+setInterval(function(){
+ $('#chart3').line('addData', [Math.round(Math.random()*500),Math.round(Math.random()*500)]);
+}, 1000);
+setInterval(function(){
+ $('#chart4').line('addData', [Math.round(Math.random()*500),Math.round(Math.random()*500)]);
+}, 1000);
+}
+</script>
+</head>
+<body onload="init()">
+<div>
+<span class='cell'>
+ <div class="monitor">
+ <div class="h1 grey">Processor</div>
+ <div class="c1 dark-grey bold">
+ <span class="legend" style="border-color: #d9182d;">Used: 41%</span>
+ </div>
+ <div class="c1 light-grey">Maximum: 100%</div>
+ <div id="chart1" class='chart'></div>
+ </div>
+</span>
+<span class='cell'>
+ <div class="monitor">
+ <div class="h1 grey">Memory</div>
+ <div class="c1 dark-grey bold">
+ <span class="legend" style="border-color: #008abf;">Available: 49%</span>
+ </div>
+ <div class="c1 light-grey">Maximum: 280GB</div>
+ <div id="chart2" class='chart'></div>
+ </div>
+</span>
+</div>
+<div>
+<span class='cell'>
+ <div class="monitor">
+ <div class="h1 grey">Storage IO</div>
+ <div class="c1 dark-grey bold">
+ <span class="legend" style="border-color: #fdb813">Write: 6KB/S</span>
+ <span class="legend" style="border-color: #00a6a0">Read: 123KB/S</span>
+ </div>
+ <div class="c1 light-grey">Maximum: 79.04KB/S</div>
+ <div id="chart3" class='chart'></div>
+ </div>
+</span>
+<span class='cell'>
+ <div class="monitor">
+ <div class="h1 grey">Network IO</div>
+ <div class="c1 dark-grey bold">
+ <span class="legend" style="border-color: #561289">Received: 2KB/S</span>
+ <span class="legend" style="border-color: #238901">Sent: 1KB/S</span>
+ </div>
+ <div class="c1 light-grey">Maximum: 33.35KB/S</div>
+ <div id="chart4" class='chart'></div>
+ </div>
+</span>
+</div>
+</body>
+</html>
--
1.7.1
More information about the Kimchi-devel
mailing list