Over a million developers have joined DZone.

NextCharts: Playing with Widgets

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

Some months ago the first version of open source HTML5 NextCharts was released. You can read this article here.

In second release of NextCharts  project it was time to add some simple widgets like alarm, indicator and display.

Alarm is a basic status widget which shows a message and a colored circle:

It has a very simple json like the following:

{
   "text": "Project delay is imminent! (Only 42 hours worked)",
   "color":"red"
   "background":"#ffffff",
   "shadow":true
 }

Indicator is a gauge widget which shows a value inside a specific [min, max] interval:


Indicator can have other properties like title, description and measure unit:

{  
   "title": "Balance",    
   "description":"monthly",  
   "unit":"$",  
   "value":200,  
   "min":0,  
   "max":1000,   
   "showMinMax":true,                            
   "color":"blue",
   "shadow":false               
}  

Display is a widget that shows a number and, optionally, how this number evolved in percents from a previous period of time:


Json for generating a display widget is like the following:

{  
   "value": "2.354",  
   "valueColor":"#004CB3",  
   "title":"Visitors",  
   "titleColor":"blue",  
   "previous":"1.17%",  
   "previousColor":"#c0c0c0",    
   "up":true,  
   "shouldRise":true,  
   "background":"white",  
   "shadow":true  
 }  

'Up' property tells the arrow orientation, while 'shouldRise' tells how the value should evolve for the right direction.

You can find samples on the github project's location .

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}