HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

Overview

HTML Canvas Gauges v2.1

Build Status Test Coverage Documentation Coverage License run on repl.it

Canvas Gauges

This is tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

Installation

Canvas gauges can be simply installed using npm package manager. Depending on your needs there is possibility to install whole gauge library or only that part you really need for your project. To install the whole library, run:

$ npm install canvas-gauges

If you only need the exact type of the gauge it can be installed using the appropriate npm tag. Currently the following gauges are supported: linear, radial.

To install only linear gauge, run:

$ npm install canvas-gauges@linear

To install only radial gauge, run:

$ npm install canvas-gauges@radial

This strategy useful only if you need to minimize your code base and plan to use ONLY a specific gauge type. If you need to use various gauge types in your project it is recommended to use whole gauge package.

More...

Documentation

You can find complete docs on the canvas gauges web-site:

Add-Ons

Here are some third-party libraries which are developed and delivered to use canvas-gauges as components for a different popular frameworks:

Special Thanks

Lohika

For supporting development!

SauceLabs

For testing support!

And to all contributors!

License

This code is subject to MIT license.

Comments
  • Use of Gauge

    Use of Gauge

    I have a problem when instantiating a repeated instances of the gauge, using something like that in the ID field is not working: <canvas canvas-gauge id="gauge-{{$index}}" .......></canvas>

    opened by ihabadly 16
  • majorTicks array not scaling to minValue and maxValue

    majorTicks array not scaling to minValue and maxValue

    I am creating a radial gauge with minValue =-10 and maxValue=150. My majorTicks array is [-10,30,60,90,150]. minorTicks=10. Each tick thus corresponds to 4 units. When my gauge is displayed, the ticks are evenly displayed around the dial, and the 60 is at the top center position. Given the underlying scale, the top value should correspond to 80 (4 units per tick), and the 60 should be displayed 5 ticks to the left of top center. Thus, the numbers shown on the scale do not correctly match the actual value. It seems like the majorTicks array is independent of the underlying scale range. The highlights array is working correctly, as the end points do match the data.

    Please tell me what I may be doing wrong.

    Thank you for a great library.

    enhancement 
    opened by jmridge 13
  • Logarithmic scales - possible ??

    Logarithmic scales - possible ??

    Is there a way to set the ticks to emulate a logarithmic scale.

    I'm looking for a way to display low values clearly but still have a very high maximum.

    For example a maximum of say 100,000 but be able to display 100, 200 etc.

    The major ticks would need to be at 100, 1000, 10000, 100000 with minor ticks at 200, 400, 800, 2000, 4000, 8000, 20000, 40000, ... etc

    The tick marks should be equally spaced between min and max.

    Best regards.

    opened by softfoot 11
  • Total canvas memory exceeds the maximum limit (224mb)

    Total canvas memory exceeds the maximum limit (224mb)

    Hi,

    I'm using your cancas gauges to visualize temperature and rpm of a sensor. When the canvas gauges reaches 224mb the gauges vanishes and the app stops working a bit later.

    Is it possible to extend the memory or clear the cash? Would be sad to to step back to progressbars because the gauges looking realy professional...

    bildschirmfoto 2018-10-11 um 14 35 13

    This error occurs first in the linear and then in the radial gauge.

    I'm running tests on an iPhone latest version (12.0). Thank you very much in advance.

    opened by RitterD 10
  • Needle spins crazy on first change

    Needle spins crazy on first change

    I update the value with onclick="gaugePS.value=200", onclick="gaugePS.value=250" etc.

    On first click the value goes like 541245 and after animation to 200 On second click everthing is ok

    opened by stefanpoensgen 10
  • Suggestions: Add additional padding to elements

    Suggestions: Add additional padding to elements

    Hello Mikhus, great piece of code, thank you!

    I only miss one thing to make "my" gauge look perfect: Over here the numbers in the gauge are touching the main ticks. Unfortunately this is only with some of the ticks...maybe have a look at my screenshot - I'm using the default font. Especially the 11 and 13 look bad.

    14-12-_2016_17-41-49

    enhancement 
    opened by RURon 9
  • V2.xx doesn't work very well for me ...

    V2.xx doesn't work very well for me ...

    I just had a try at upgrading from 1.0.5 to 2.x.x and found that none of the examples in 2.10, 2.0.1 and "master" (I assume this is the "trunk") do not work for me.

    Either they don't display a gauge at all or the needle is missing (or disappears after a second or so)

    This was under "Pale Moon" v26.4.0

    Under Firefox 47.0.1 it seemed better in that "scripted.html" and "linear-component.html" seemed to work OK but "radial-component.html" and "radial.html" didn't display any guages.

    Is 2.x.x a release?? or is it "work in progress"??

    1.0.5 works fine :-)

    TIA Dave

    opened by softfoot 9
  • Customization

    Customization

    I was working with the gauge.I wanted to remove the small gray color display with more visible custom display of numbers.Apart from this looking to change the needle to custom custom pointer. Can you please advise how can i achieve IT. guageexample

    opened by sarfarazengglb 7
  • Library is broken in environment using CommonJS modules

    Library is broken in environment using CommonJS modules

    Library is broken in CommonJS environment. Module is wrapped into anonymous function to provide something close to UMD module format:

    (function(ns) {'use strict';
        // code
    }(typeof module !== "undefined" ? module.exports : window));
    

    It works perfectly in non-CommonJS environment, since it sets ns to Window. In CommonJS environment ns will be module exports object. But code of the library extensively uses ns variable to access Window's properties: 1, 2, 3, etc. Obviously in CommonJS environment these properties are undefined, so it fails/behaves very weird (in my case animation went insane, because ns.performance was undefined and it used Date.now() to get animation start time (and they are completely different things).

    The simple solution would be just removing ns. prefix from all the global variables. If you think we should go with this solution, I can prepare PR.

    Check out updated example to get simple reproduction of the issue in CommonJS environment.


    As a side note. I find the Regex based build process a bit speculative. Any reason why you use that instead something like this babel plugin for example? Maybe we can improve build process as well?

    bug 
    opened by devoto13 6
  • double needle

    double needle

    Hello, When I use multiple gauge at the same time, all except the first one get double needle gauge These gauges are generated by the same code and should not difer gauge-code Thank you.

    Edit double neelde ocur pretty randomly gauge_bug2

    opened by stevemarion 6
  • Fixed #4 - Cannot handle negative values

    Fixed #4 - Cannot handle negative values

    Had to defer the defaulting of the majorTicks array until after the object has been set up, because we will not know what the actual min/max values will be until then.

    opened by rwblackburn 6
  • Upstream Dependency Conflicts

    Upstream Dependency Conflicts

    I'm trying to install canvas-gauges in my project but I'm running into issues with dependencies. The "--install-peer-deps" flag doesn't work, using the "--force" flag let's me install. However it would be nice to solve the problem at the root.

    Heres my error log:

    npm ERR! code ERESOLVE
    npm ERR! ERESOLVE could not resolve
    npm ERR! 
    npm ERR! While resolving: [email protected]
    npm ERR! Found: [email protected]
    npm ERR! node_modules/react
    npm ERR!   react@"^17.0.2" from the root project
    npm ERR!   peer react@"*" from @testing-library/[email protected]
    npm ERR!   node_modules/@testing-library/react
    npm ERR!     @testing-library/react@"^11.2.7" from the root project
    npm ERR!   12 more (react-dom, react-native-animated-pagination-dot, ...)
    npm ERR! 
    npm ERR! Could not resolve dependency:
    npm ERR! peer react@"15.x" from [email protected]
    npm ERR! node_modules/react-canvas-gauges
    npm ERR!   react-canvas-gauges@"^1.2.1" from the root project
    npm ERR! 
    npm ERR! Conflicting peer dependency: [email protected]
    npm ERR! node_modules/react
    npm ERR!   peer react@"15.x" from [email protected]
    npm ERR!   node_modules/react-canvas-gauges
    npm ERR!     react-canvas-gauges@"^1.2.1" from the root project
    npm ERR! 
    npm ERR! Fix the upstream dependency conflict, or retry
    npm ERR! this command with --force, or --legacy-peer-deps
    npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
    npm ERR! 
    npm ERR! See /Users/admin/.npm/eresolve-report.txt for a full report.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     /Users/admin/.npm/_logs/2022-12-21T14_40_31_373Z-debug-0.log
    
    opened by LRYMND 0
  • radial gauge seems to be broken.

    radial gauge seems to be broken.

    In my project, if I don't update or reset (destroy and create again) within 5 minutes and 30 seconds with 1 sec update interval, radial gauge stops working. I'm using version 2.1.7 in google chrome.

    And this can be easily reproduced on canvas-gauge example site (https://canvas-gauges.com/documentation/examples/) Here, using blue compass radial gauge, if you let it run for some minutes, it stops updating.

    opened by peakhunt 2
  • No valuebox when using a horizontal linear gauge?

    No valuebox when using a horizontal linear gauge?

    I have been tinkering with this for several hours trying to understand why my valuebox disappears when I configure a horizontal linear gauge.

    I just realized after looking at the example documentation that all of the horizontal linear gauges don't show a valuebox either. Is this an inherent property of a horizontal linear gauge? Is there any way that a valuebox can be implemented on horizontal linear gauges?

    opened by spiff72 0
  • Horizontal rotating gauge

    Horizontal rotating gauge

    Hi,

    I am trying to get to a gauge that rotates around but looks like a horizontal linear gauge, basically like a compass.

    say 90° is visible of the spinning disk, so when the value is 20, you will see -25 to 65. Where negative values are shown as max-value - the value. This way a horizontal compass can be created.

    I would be able to create such a thing with a lot of headaches as I have not been doing any JavaScript work for over a decade and maybe it is already possible but I overlook something. If no one picks this up, I am willing to dig into that and contribute an initial version. But someone needs to upload it as I do not understand all the git terms and workings. And will never use it again.

    the application I am after will just be a websocket receiving json formatted value list. I have been able to get that working. I think it would be a nice addon for this library and I just created a git account to be able to create this message. If it is not possible with the current gauges, consider it a feature request.

    Martijn

    opened by SlimSchip 0
  • Only Half of Linear Gauge appearing in Home Assistant

    Only Half of Linear Gauge appearing in Home Assistant

    I love the look and feel of these gauges! I'm using the latest Home Assistant where radials are working great but Linears get cut in half, either the top in a vertical mode or the left in a horizontal. The bottom example is using your own code with my title of "Black Ink". The top example is using a Manual Card. The bottom is using a Grid Card. On my mobile phone, the top displays nicely yet the bottom appears exactly the same (half) Linear

    opened by wipatters 1
Releases(v2.1.7)
  • v2.1.7(Apr 10, 2020)

    This release contains the following bug-fixes and improvements:

    • Bug-fix: Fix broken drawing of radial gauge needle. Critical, because causing crash.
    Source code(tar.gz)
    Source code(zip)
  • v2.1.6(Apr 10, 2020)

    This release contains the following bug-fixes and improvements:

    • Feature: Added barStartPosition option (See PR #184).
    • Feature: Added “highlightsLineCap” option (See PR #179).
    • Bug-fix: Resolved issues with builds.
    • Chore: Moved to Gulp v4+
    • Documentation: Docs updated to the latest version.
    Source code(tar.gz)
    Source code(zip)
  • v2.1.5(Apr 23, 2018)

    This release contains the following bug-fixes and improvements:

    • Bug-fix: Fix for minor tick alignment issues when using the exactTick feature.
    • Bug-fix: Avoid polluting Array.prototype with enumerable properties.

    If you facing any issues using gauges v2.1.5, please report.

    Source code(tar.gz)
    Source code(zip)
  • v2.1.4(Mar 28, 2017)

    This release contains the following bug-fixes and improvements:

    • Bug-fix: fixed problem with DomObserver export in JS API

    If you facing any issues using gauges v2.1.4, please report.

    Source code(tar.gz)
    Source code(zip)
  • v2.1.3(Mar 26, 2017)

    This release contains the following bug-fixes and improvements:

    • Bug-fix: Fixed some problems with animations (see issue #106)
    • Enhancement: Added "value" event emission to get possibility interact with gauge on value change.
    • Enhancement: implemented issue #105 - added possibility to configure event listeners via constructor
    • Bug-fix: fixed issue #117 - auto-width calculations for value box drawings.
    • Bug-fix: fixed issue #114 - arrow needle tail fixed for radial gauges.
    • Bug-fix: fixed issue #122 - problem with animation when changing gauge value via HTML-node attribute change.

    If you facing any issues using gauges v2.1.3, please report.

    Source code(tar.gz)
    Source code(zip)
  • v2.1.2(Jan 10, 2017)

    This release contains the following bug-fixes:

    • Bug-fix: fixed problem running linear gauge in IE11 (see issue #101)
    • Bug-fix: fixed issue with running exact ticks gauge configuration when minor ticks is set to zero (see issue #99)

    If you facing any issues using gauges v2.1.2, please report.

    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Dec 29, 2016)

    This release contains the following bug-fixes and improvements:

    • Bug-fix: fixed problem with cancelling old animations (issue #94)
    • Bug-fix: fixed problem with drawing plate borders on high pixel devices (issue #91)
    • Improvement: Implemented possibility to configure custom ticks bars with exact ticks positions at values.
    • Bug-fix: radial gauges now taking into account font size of the tick labels when drawing them (see issue #90)
    • Improvement: added possibility to define tick labels (numbers) margin (see issue #90)

    If you facing any issues using gauges v2.1.1, please report.

    Source code(tar.gz)
    Source code(zip)
  • v2.1.0(Dec 2, 2016)

    This release contains the following bug-fixes and improvements:

    • Improvement: implemented progress bar for radial gauges.
    • Improvement: added possibility to control automatic DOM-document parse for gauge creation on a page (see issue #87)
    • Improvement: Added possibility to configure full 360-degree plate radial gauges to rotate plate/needle by a minimal path between changing values (see issue #77)
    • Improvement: Added possibility to inject into gauge drawing workflow using event model (see issue #82)
    • Bug-fix: fixed wrong value-box positioning on linear gauges.
    • Bug-fix: fixed wrong text positioning in value box.
    • Bug-fix: fixed bug with drawing outranged-value gauges.
    • Bug-fix: fixed some problems with updating some options on dynamic re-configuration of the gauges.
    • Bug-fix: fixed wrong highlight drawings on linear gauges when min value is above zero (see issue #76)

    If you facing any issues using gauges v2.1.0, please report.

    Source code(tar.gz)
    Source code(zip)
  • v2.0.9(Sep 29, 2016)

    This release contains the following bug-fixes and improvements:

    • Bug-fix: fixed wrong positioning of value text on linear gauges.
    • Bug-fix: fixed potentially wrong behavior of DOM mutations in some circumstances.
    • Improvement: minor codebase size improvement and optimization.

    If you facing any issues using gauges v2.0.9, please report.

    Migration from version 1.x.x

    Source code(tar.gz)
    Source code(zip)
  • v2.0.8(Sep 28, 2016)

    This release contains some improvements and bug-fixes:

    • Improvement: added version to minified file and gauges runtime (issue #69)
    • Improvement: added possibility to set width of value box (issue #70)
    • Improvement: added possibility to configure highlights width.
    • Bug-fix: fixed incorrect highlights drawing on radial gauge, which was broken when plate color set to transparent.
    • Bug-fix: fixed wrong borders and plate drawing, which prevented the plate to be drawn transparent.

    If you facing any issues using gauges v2.0.8, please report.

    Migration from version 1.x.x

    Source code(tar.gz)
    Source code(zip)
  • v2.0.7(Sep 27, 2016)

  • v2.0.6(Sep 27, 2016)

    This release contains some critical bug-fixes:

    • Improvement: added advanced font-styling possibilities for gauge text elements (font-style, font-weight).
    • Bug-fix: preventing crashes when gauges obtain majorTicks misconfiguration.
    • Bug-fix: fixed problem with missing licensing information in minified sources (issue #64)
    • Bug-fix: fixed issue #63) with wrong needle behavior when gauge got a wrong value type.
    • Bug-fix: added polyfill for browsers which does not support Array.fill().
    • Bug-fix: fixed wrong drawing behavior of needle center circle in radial gauges when animated.

    If you facing any issues using gauges v2.0.6, please report.

    Migration from version 1.x.x

    Source code(tar.gz)
    Source code(zip)
  • v2.0.5(Sep 26, 2016)

  • v2.0.4(Sep 24, 2016)

    This release contains several improvements and bug-fixes:

    • Improvement: async loading support with docs end examples.
    • Improvement: implemented possibility to define specific colors for major ticks and tick numbers separately (issue #50)
    • Bug-fix: fixed wrong drawings of right needle gradients in linear gauges.
    • Bug fix: fixed wrong coloring for minor ticks in linear gauges.
    • Bug fix: fixed problem when invalid width or height bypassed which causes gauge init crash.
    • Bug fix: fixed problem with crashing when drawing arcs in radial gauge with negative radius given in some circumstances.

    If you facing any issues using gauges v2.0.4, please report.
    For usage examples, please, refer examples page.

    Migration from version 1.x.x

    Source code(tar.gz)
    Source code(zip)
  • v2.0.3(Sep 23, 2016)

    This release contains minor improvements and bug-fixes:

    • Improvement: added possibility to animate gauges on initialization.
    • Bug-fix: fixed problem with gauge components initialization if it is done after DOM document been loaded.

    If you facing any issues using gauges v2.0.3, please report.
    For usage examples, please, refer examples page.

    Migration from version 1.x.x

    Source code(tar.gz)
    Source code(zip)
  • v2.0.2(Sep 22, 2016)

  • v2.0.1(Sep 14, 2016)

    This release contains some improvements and bug-fixes.

    • Improvement: added possibility for radial gauge to animate ticks bar instead of animating needle.
    • Improvement: documentation updated.
    • Improvement: added possibility to define font size of the gauge text elements.
    • Improvement: added more examples.
    • Improvement: added typescript definitions to DefinitelyTyped repository.
    • Improvement: Added possibility to fill gauge plate with gradient.
    • Bug-fix: Fixed broken links in README file.
    • Bug-fix: Fixed problems with animations with some old browsers.
    • Bug-fix: Fixed incorrect gradient drawings on linear gauges.
    • Bug-fix: Fixed wrong positioning of highlight on linear gauge.
    • Bug-fix: Fixed problem with font-loading detection in firefox in the examples.
    • Bug-fix: Fixed problem with progress bar invalid positioning in some cases.

    If you facing any issues using gauges v2.0.1, please report.

    Migration from version 1.x.x

    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Sep 12, 2016)

    This release contains breaking changes in comparison to version 1.x.x. Old end-user code will not work with gauges from this release properly, so, please, before updating gauges code to version 2 make sure you read this list of changes and all referring information.

    • Breaking API changes. Please, read new end-user and developer's documentation.
    • Added new type of gauge: LinearGauge
    • Primary package delivery platform changed to NPM.
    • Added ability to refer through CDN.
    • Gauges are now fully functional HTML-components. Read more here and here.
    • Completely changed development and delivery infrastructure.

    If you facing any issues using gauges v2.0.0, please report.
    For usage examples, please, refer examples page.

    Migration from version 1.x.x

    Source code(tar.gz)
    Source code(zip)
Owner
Mykhailo Stadnyk
Web developer. Mainly TypeScript, Go, JavaScript, NodeJS, Python, PHP, C and other ways to have talks with PC.
Mykhailo Stadnyk
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.6k Jan 3, 2023
An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API.

Bézier Curves An implementation of Bézier curve rendering and manipulation, using the HTML5 Canvas API. How does it work? Bézier curves can be simply

nethe550 1 Apr 13, 2022
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.7k Jan 8, 2023
A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard free·board (noun) *\ˈfrē-ˌbȯrd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

freeboard 6.3k Dec 28, 2022
An HTML5/Canvas implementation of 8-bit color cycling

Overview Here is the JavaScript and C++ source code to my color cycling engine, written in 2010. I am releasing it under the LGPL v3.0. The package co

Joseph Huckaby 8 Dec 1, 2022
A web app that shows visualizations of the most used graphs algorithms such as BFS, DFS, Dijsktra, Minimum spanning tree, etc. It allows you to draw your own graph.

Graph Visualizer Draw your own graphs and visualize the most common graph algorithms This web application allows you to draw a graph from zero, with p

Gonzalo Pereira 31 Jul 29, 2022
Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation

Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation. The package is built with Vanilla JavaScript and is used to create flexible data visualizations and present evolution relationships between entities.

Nathan S. Santos 39 Jan 5, 2023
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

null 4 Mar 3, 2021
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.5k Dec 30, 2022
📸 Generate image using HTML5 canvas and SVG

egami → image README | 中文文档 Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i

weng 12 Jan 3, 2023
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 59.4k Jan 7, 2023
The code base that powered India in Pixels' YouTube channel for more than 2 years - now open sourced for you to use on your own projects

India in Pixels Bar Chart Racing For over two years, this nifty code base powered India in Pixels' YouTube channel with videos fetching over millions

India in Pixels 141 Dec 4, 2022
🔥 JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Jan 2, 2023
Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world <div id="app"><div></div></div> yarn add elem-canvas or npm i

null 15 Apr 13, 2022
Financial lightweight charts built with HTML5 canvas

Lightweight Charts Demos | Documentation | Discord community TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts

TradingView, Inc. 5.8k Jan 9, 2023
Matteo Bruni 4.7k Jan 4, 2023
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022