Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $(document).ready(function(){/**/});
- <ui:fragment xmlns="http://www.w3.org/1999/xhtml"
- xmlns:h="http://java.sun.com/jsf/html"
- xmlns:f="http://java.sun.com/jsf/core"
- xmlns:ui="http://java.sun.com/jsf/facelets"
- xmlns:p="http://primefaces.org/ui"
- xmlns:c="http://java.sun.com/jsp/jstl/core"
- xmlns:pe="http://primefaces.org/ui/extensions"
- xmlns:fn="http://java.sun.com/jsp/jstl/functions">
- <style>
- .ui-datagrid-content .ui-widget-content .ui-grid .ui-grid-responsive{
- width: 100%;
- }
- .ui-datagrid-content .ui-widget-content .ui-grid .ui-grid-responsive .ui-grid-row{
- width: 50%;
- margin: 0 auto;
- }
- </style>
- <h:outputScript library="js" name="gauge.min.js" />
- <h:outputScript library="js" name="canvasjs.min.js" />
- <script type="text/javascript">
- var windSpeed;
- var windDirection;
- function init(windSpeedValue, windDirectionValue) {
- //Wind Speed Gauge Starts Here
- windSpeed = new RadialGauge({
- renderTo: 'canvas-windSpeed',
- width: 250,
- height: 250,
- units: "m/sec",
- minValue: 0,
- startAngle: 90,
- ticksAngle: 180,
- maxValue: 25,
- majorTicks: [
- "0",
- "5",
- "10",
- "15",
- "20",
- "25"
- ],
- minorTicks: 5,
- strokeTicks: true,
- highlights: [
- {
- "from": 15,
- "to": 25,
- "color": "rgba(254,206,168)"
- }
- ],
- colorPlate: "#fff",
- borderShadowWidth: 0,
- borders: false,
- needleType: "arrow",
- needleWidth: 2,
- needleCircleSize: 7,
- needleCircleOuter: true,
- needleCircleInner: false,
- animationDuration: 1500,
- animationRule: "linear",
- valueBoxBorderRadius: 4,
- colorUnits: "#FECEA8",
- fontUnits: "Verdana",
- fontUnitsSize: 28,
- colorValueBoxRect: "#fff",
- colorValueText: "#003333",
- fontUnitsWeight: "bold",
- fontValueWeight: "bold",
- valueTextShadow: true,
- colorValueTextShadow: "#FECEA8",
- colorValueBoxBackground: "#ffffff",
- colorValueBoxRectEnd: "#FECEA8",
- colorNeedle: "#20B2AA",
- colorNeedleEnd:"#B0C7DF",
- colorNeedleCircleOuterEnd: "#20B2AA"
- });
- windSpeed.value = windSpeedValue;
- windSpeed.draw();
- //Wind Speed Gauge Ends Here
- //Wind Direction Gauge Starts Here
- windDirection = new RadialGauge({
- renderTo: 'canvas-windDirection',
- width: 250,
- height: 250,
- minValue: 0,
- maxValue: 360,
- majorTicks: [
- "N",
- "NE",
- "E",
- "SE",
- "S",
- "SW",
- "W",
- "NW",
- "N"
- ],
- minorTicks: 22,
- ticksAngle: 360,
- startAngle: 180,
- strokeTicks: false,
- highlights: false,
- colorPlate: "#fff",
- colorMajorTicks: "##f5f5f5",
- colorMinorTicks: "#ddd",
- colorNumbers: "#ccc",
- colorNeedle: "rgba(240, 128, 128, 1)",
- colorNeedleEnd: "rgba(255, 160, 122, .9)",
- valueBox: false,
- valueTextShadow: false,
- colorCircleInner: "#fff",
- colorNeedleCircleOuter: "#ccc",
- needleCircleSize: 15,
- needleCircleOuter: false,
- animationRule: "linear",
- needleType: "line",
- needleStart: 75,
- needleEnd: 99,
- needleWidth: 3,
- borders: true,
- borderInnerWidth: 0,
- borderMiddleWidth: 0,
- borderOuterWidth: 10,
- colorBorderOuter: "#ccc",
- colorBorderOuterEnd: "#ccc",
- colorNeedleShadowDown: "#222",
- borderShadowWidth: 0,
- animationDuration: 1500
- });
- windDirection.value = windDirectionValue;
- windDirection.draw();
- //Wind Direction Gauge Ends Here
- }
- </script>
- <h:outputScript library="js">
- $(document).ready(function(){
- var windDir = #{stationDashboardViewMB.windDirectionStrValue};
- var windSpeed = #{stationDashboardViewMB.windSpeedStrValue};
- init(windSpeed, windDir);
- });
- </h:outputScript>
- <div style="position:absolute; top:255px; left:450px;">
- <canvas id="canvas-windSpeed" style="height: 250px; width: 100%;"></canvas>
- </div>
- <div style="position:absolute; top:255px; left:700px;">
- <canvas id="canvas-windDirection" style="height: 250px; width: 100%;"></canvas>
- </div>
- </ui:fragment>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement