This page only works within our internal network but here you go.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="HeadrigGauge.aspx.vb" Inherits="MES_Dashboard_HeadrigGauge" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Production Chart</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
<!--
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
-->
<style>
body {
background-color: black;
overflow: hidden;
}
@media (min-width: 1200px) {
.container {
max-width: 1820px;
}
.smallprojection {
display: none;
}
.bigprojection {
visibility: visible;
}
.productionchart {
min-height: 600px;
}
}
@media only screen and (max-width: 1000px) {
.chart {
width: 100px;
height: 100px;
}
.smallprojection {
visibility: visible;
font-size: .5em;
}
.productionchart {
min-height: 250px;
}
.bigprojection {
display: none;
}
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="d-flex justify-content-center">
<canvas class="chart boxInner" id="gaugeElement2"></canvas>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.5/all/gauge.min.js"></script>
<script src="../../Scripts/poly-fill.js"></script>
<asp:PlaceHolder ID="placeSignalR" runat="server">
<script src="/Scripts/jquery.signalR-2.2.2.js?version=1.03"></script>
<script src="/signalr/hubs"></script>
<script src="/Scripts/SignalR-Dashboard.js?version=1.80"></script>
</asp:PlaceHolder>
<script>
$(window).resize(function () {
resizeCanvas();
});
$(window).ready(function () {
resizeCanvas();
});
/**
function changeGaugeSize() {
if( $(window).width() < 1000 ) {
hewsawLpmGauge.update({
width: 200,
height: 200
});
headrigLpmGauge.update({
width: 200,
height: 200
});
sorterFBMpmGauge.update({
width: 200,
height: 200
});
}**/
</script>
<script>
function resizeCanvas() {
var size;
if ($(window).width() < 550) {
size = 350;
} else if ($(window).width() < 1000) {
size = 350;
} else {
size = 350;
};
$("[id^=gaugeElement]").width(size).height(size);
}
</script>
<script>
var headrigLpmGauge = new RadialGauge({
renderTo: 'gaugeElement2',
width: 300,
height: 300,
units: "logs/min",
title: 'Headrig',
minValue: 0,
maxValue: 20,
majorTicks: [
"0",
"5",
"10",
"15",
"20"
],
minorTicks: 5,
strokeTicks: true,
highlights: [
{
"from": 0,
"to": 13,
"color": "rgba(255, 255, 255, .35)"
},
{
"from": 13,
"to": 17,
"color": "rgba(0, 200, 0, .65)"
},
{
"from": 17,
"to": 20,
"color": "rgba(255, 255, 255, .35)"
}
],
colorPlate: "#000",
colorTitle: "#FFF",
colorUnits: '#CCC',
colorNumbers: '#eee',
colorNeedleStart: 'rgba(240, 128, 128, 1)',
colorNeedleEnd: 'rgba(255, 160, 122, .9)',
borderShadowWidth: 0,
borders: false,
needleType: "arrow",
needleWidth: 5,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 500,
animationRule: "linear",
valueInt: 2,
valueDec: 1
}).draw();
</script>
</body>
</html>
