State Indicators

This jQuery plugin creates an image based state indicator DOWNLOAD

State Visual
Good 1
Bad -1
Neutral 0

JS Fiddle example

The element that will contain the state indicator should have the following values in it:

1 = Use the good image

0 = Use the neutral image

-1 = Use the bad image

When to use it

I primarily like to use state indicators to show how well a metric is performing.


The Javascript

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

<script type="text/javascript" src="js/dv-state-indicator.js"></script>

<script type="text/javascript">

jQuery(document).ready(function ()




s_goodImageURL: '',

s_badImageURL: '',

s_neutralImageURL: ''




The HTML Markup

<div id="dv-container">0</div>


The Result



Option Type Default Value Description
s_goodImageURL string null The image url of the good state
s_badImageURL string null The image url of the bad state
s_neutralImageURL string null The image url of the neutral state

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *