258 lines
11 KiB
HTML
258 lines
11 KiB
HTML
<head><title>Flot Chart</title><meta http-equiv="content-type" content="text/html; charset=utf-8"><link href="img/favicon.png" rel="shortcut icon" type="image/x-icon"><script type="text/javascript" src="../../lib/js/jquery-1.11.2.min.js"></script><script type="text/javascript" src="../../lib/js/socket.io.js"></script><script type="text/javascript" src="../../_socket/info.js"></script><style>.rickshaw_graph .x_tick.invisible {
|
|
border-left: 0 rgba(0, 0, 0, 0) !important;
|
|
}
|
|
|
|
#title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div, span, p, td {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
#chart {
|
|
display: inline-block;
|
|
}
|
|
|
|
#legend_container {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 26px;
|
|
width: 0;
|
|
}
|
|
|
|
.chart-container {
|
|
box-sizing: border-box;
|
|
padding: 20px 15px 15px 15px;
|
|
/*margin: 15px auto 30px auto;*/
|
|
border: 1px solid #ddd;
|
|
background: #fff;
|
|
background: linear-gradient(#f6f6f6 0, #fff 50px);
|
|
background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
|
|
background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
|
|
background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
|
|
background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
|
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
|
|
-o-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
-ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
-moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.chart-placeholder {
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: 14px;
|
|
line-height: 1.2em;
|
|
}
|
|
|
|
/* ------------------ connecting -------------------------- */
|
|
#server-disconnect {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
overflow: hidden;
|
|
background-color: rgba(231,231,231,0.9) !important;
|
|
background-size: 100% !important;
|
|
background-position: center !important;
|
|
background-repeat: no-repeat !important;
|
|
z-index: 5000;
|
|
}
|
|
|
|
#server-disconnect > * {
|
|
/* center child divs */
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
/* x-border-box */
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
/* x-unselectable */
|
|
user-select: none;
|
|
-o-user-select: none;
|
|
-ms-user-select: none;
|
|
-moz-user-select: -moz-none;
|
|
-webkit-user-select: none;
|
|
cursor: default;
|
|
}
|
|
.splash-screen-circle-outer {
|
|
z-index: 20000;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 100px;
|
|
margin-top: -50px;
|
|
margin-left: -50px;
|
|
border: 5px solid rgba(87, 113, 145, 0.9);
|
|
opacity: .9;
|
|
border-right: 5px solid rgba(0, 0, 0, 0);
|
|
border-left: 5px solid rgba(0, 0, 0, 0);
|
|
box-shadow: 0 0 35px #577191;
|
|
-moz-animation: spinPulse 5s infinite ease-in-out;
|
|
-webkit-animation: spinPulse 5s infinite linear;
|
|
}
|
|
.splash-screen-circle-inner {
|
|
z-index: 20001;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 80px;
|
|
margin-top: -40px;
|
|
margin-left: -40px;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
border: 5px solid rgba(87, 113, 145, 0.9);
|
|
opacity: .9;
|
|
border-left: 5px solid rgba(0, 0, 0, 0);
|
|
border-right: 5px solid rgba(0, 0, 0, 0);
|
|
box-shadow: 0 0 15px #577191;
|
|
-moz-animation: spinoffPulse 5s infinite linear;
|
|
-webkit-animation: spinoffPulse 5s infinite linear;
|
|
}
|
|
.splash-screen-text {
|
|
z-index: 20002;
|
|
width: 100px;
|
|
height: 100px;
|
|
line-height: 100px;
|
|
margin-top: -50px;
|
|
margin-left: -50px;
|
|
font-family: Verdana, Geneva, sans-serif;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
text-shadow: 1px 1px #cccccc;
|
|
vertical-align: middle;
|
|
color: #002951;
|
|
}
|
|
@-moz-keyframes spinPulse {
|
|
0% {
|
|
-moz-transform: rotate(160deg);
|
|
opacity: 0;
|
|
box-shadow: 0 0 1px #577191;
|
|
}
|
|
50% {
|
|
-moz-transform: rotate(145deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-moz-transform: rotate(-320deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-moz-keyframes spinoffPulse {
|
|
0% {
|
|
-moz-transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-moz-transform: rotate(360deg);
|
|
}
|
|
}
|
|
@-webkit-keyframes spinPulse {
|
|
0% {
|
|
-webkit-transform: rotate(160deg);
|
|
opacity: 0;
|
|
box-shadow: 0 0 1px #577191;
|
|
}
|
|
50% {
|
|
-webkit-transform: rotate(145deg);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(-320deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
@-webkit-keyframes spinoffPulse {
|
|
0% {
|
|
-webkit-transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.loader,
|
|
.loader:before,
|
|
.loader:after {
|
|
background: #8ca6ff;
|
|
-webkit-animation: load1 1s infinite ease-in-out;
|
|
animation: load1 1s infinite ease-in-out;
|
|
width: 1em;
|
|
height: 4em;
|
|
}
|
|
.loader:before,
|
|
.loader:after {
|
|
position: absolute;
|
|
top: 0;
|
|
content: '';
|
|
}
|
|
.loader:before {
|
|
left: -1.5em;
|
|
-webkit-animation-delay: -0.32s;
|
|
animation-delay: -0.32s;
|
|
}
|
|
.loader {
|
|
color: #8ca6ff;
|
|
text-indent: -9999em;
|
|
font-size: 11px;
|
|
-webkit-transform: translateZ(0);
|
|
-ms-transform: translateZ(0);
|
|
transform: translateZ(0);
|
|
-webkit-animation-delay: -0.16s;
|
|
animation-delay: -0.16s;
|
|
position: absolute;
|
|
top: 5em;
|
|
left: 13em;
|
|
z-index: 1000;
|
|
}
|
|
.loader:after {
|
|
left: 1.5em;
|
|
}
|
|
@-webkit-keyframes load1 {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
box-shadow: 0 0;
|
|
height: 2.5em;
|
|
}
|
|
40% {
|
|
box-shadow: 0 -1em;
|
|
height: 3em;
|
|
}
|
|
}
|
|
@keyframes load1 {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
box-shadow: 0 0;
|
|
height: 2.5em;
|
|
}
|
|
40% {
|
|
box-shadow: 0 -1em;
|
|
height: 3em;
|
|
}
|
|
}
|
|
|
|
#resetZoom {
|
|
position: absolute;
|
|
right: 50%;
|
|
top: 20px;
|
|
z-index: 10;
|
|
cursor: pointer
|
|
}
|
|
|
|
#edit {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 10px;
|
|
z-index: 10;
|
|
cursor: pointer;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.data-point-label {
|
|
text-align: center;
|
|
overflow: visible;
|
|
white-space: nowrap;
|
|
}</style></head><body style="margin: 0"><div id="chart_container"><div id="server-disconnect"><div class="splash-screen-text">...</div><div class="splash-screen-circle-outer"></div><div class="splash-screen-circle-inner"></div></div><div id="no-connection" style="position: absolute; left: 50%; top: 50%; display: none; font-size: 3em; background: rgba(0, 0, 0, 0.1); border-radius: 10px; text-align: center">No connection to server</div><div id="chart_placeholder" class="chart-placeholder"></div><div id="title" style="position:absolute"></div></div><div id="edit" style="display: none"><svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></div><svg style="display: none" title="Reset zoom" id="resetZoom" height="35" width="35" fill="#000000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 126.308 118.728" enable-background="new 0 0 126.308 118.728" xml:space="preserve"><path fill="#DDDDDD" d="M123.962,99.037c-0.082-0.076-0.172-0.116-0.246-0.181L100.929,76.46l-5.749-5.648c5.875-12.929,5.905-28.35-1.279-41.82 C81.632,6.015,52.957-2.707,29.979,9.555c-0.486,0.257-0.944,0.549-1.418,0.826c-7.41,4.288-13.254,10.305-17.261,17.284 c-2.663-1.367-4.591-2.553-4.868-2.73c0.261,0.17,0.083,0.008-0.245-0.225c-0.237-0.198-0.505-0.352-0.798-0.482 c-0.11-0.056-0.229-0.103-0.324-0.135c-0.253-0.079-0.514-0.11-0.767-0.118c-0.063-0.008-0.11-0.004-0.182-0.004 c-0.221,0.004-0.442,0.027-0.656,0.075c-0.024,0.008-0.047,0.008-0.071,0.016c-1.035,0.257-1.92,1.027-2.256,2.134 c-0.13,0.407-0.154,0.822-0.118,1.225c0,0-0.012,0.012-0.004,0.016c0,0,0,0,0,0.008c0.008,0.355,0.047,0.735,0.142,1.138 L5.259,46.24l1.284,5.544l1.142,4.892l0.367,1.572c0.751,3.265,3.375,4.062,5.825,1.771l5.469-5.109l1.549-1.454l3.563-3.331 l10.954-10.246l0.707-0.66c0.083-0.079,0.139-0.158,0.209-0.237l0.459-0.451l-0.032-0.008c0.285-0.324,0.53-0.695,0.664-1.13 c0.036-0.115,0.048-0.229,0.071-0.34c0.213-0.846,0.047-1.651-0.482-2.331c-0.391-0.581-0.964-1.043-1.684-1.261 c0,0-4.259,0.296-10.384-0.929c1.415-2.062,3.066-3.975,4.947-5.702c1.999-1.829,4.252-3.449,6.749-4.781 c4.687-2.497,9.705-3.746,14.676-3.872c12.131-0.312,24.001,6.069,30.094,17.485c7.713,14.462,3.564,32.133-9.033,41.802 c-0.438,0.332-0.877,0.66-1.327,0.973c-0.174,0.118-0.348,0.236-0.521,0.352c-0.11,0.079-0.229,0.15-0.348,0.225 c-0.593,0.384-1.21,0.735-1.834,1.087c-9.049,4.991-20.302,5.698-30.315,0.894c-1.304-0.629-2.545-1.344-3.73-2.118 c-0.34-0.222-0.684-0.45-1.019-0.688c-0.245-0.079-0.498-0.135-0.771-0.135c-0.447,0.008-0.857,0.139-1.209,0.355l-0.455,0.36 l-7.239,5.643l-0.829,0.644c-0.34,0.411-0.546,0.929-0.546,1.506c0.008,0.485,0.158,0.937,0.411,1.312 c0.355,0.289,0.719,0.577,1.083,0.857c2.505,1.917,5.231,3.611,8.183,5.026c10.437,5.011,21.809,5.82,32.225,3.13 c0.031,0,0.063,0.016,0.103,0.016c0.442-0.119,0.89-0.237,1.328-0.363c3.026-0.886,6.006-2.079,8.898-3.62 c1.165-0.624,2.284-1.3,3.382-2.007c0.15-0.095,0.305-0.189,0.455-0.289c0.32-0.209,0.628-0.431,0.944-0.644 c0.11-0.078,0.216-0.156,0.325-0.232l4.841,4.768l22.066,21.671c0.049,0.05,0.09,0.134,0.14,0.189 c3.776,3.76,10.697,2.926,15.472-1.867C126.878,109.723,127.713,102.788,123.962,99.037z"></path></svg><div class="loader" style="display: none"></div><script src="js/flot.js"></script></body> |