Comments (2)
Your html is ill-formed. Try this instead, but first I would recommend that you diff the two alternatives to spot the differences.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>gauge</title>
<script src="dist/gauge.js"></script>
</head>
<body>
<canvas id="demo" width="400" height="400" style="border:1px solid #000000"></canvas>
<div id="preview-textfield"></div>
<script type="application/javascript">
var opts = {
angle: 0.15, /// The span of the gauge arc
lineWidth: 0.44, // The line thickness
pointer: {
length: 0.9, // Relative to gauge radius
strokeWidth: 0.035 // The thickness
},
colorStart: '#6FADCF', // Colors
colorStop: '#8FC0DA', // just experiment with them
strokeColor: '#E0E0E0' // to see which ones work best for you
};
var target = document.getElementById('demo'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
document.getElementById("preview-textfield").className = "preview-textfield";
gauge.setTextField(document.getElementById("preview-textfield"));
gauge.maxValue = 3000; // set max gauge value
gauge.setMinValue(0); // set min value
gauge.set(1250); // set actual value
gauge.animationSpeed = 32;
</script>
</body>
</html>
from gauge.js.
from gauge.js.
Related Issues (20)
- For some reasons canvas is widht/height zeroed HOT 1
- Linear animation
- Aligning tricks with numbers
- Attaching Gauge Js In Email Template HOT 1
- RequireJS - Gauge is not defined
- Using Gauge inside wordpress HOT 5
- Can only initialize a total of 3 gauges one page HOT 2
- Changing pointer and moving labels up
- Can't get it to work on dynamically created canvas element HOT 1
- can't set proper pointer value and max value with multiple gauges
- Zero in the middle - Minus to left - plus to right HOT 1
- Typescript & Webcomponent Version
- Hide values
- Change Color HOT 1
- update value after control is rendered HOT 1
- staticLabelsWithText not working
- Sizing Issue - Maybe I'm missing something obvious...
- Added text labels instead of just numeric labels
- Warning about inappropriate equality comparison with a new object
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from gauge.js.