Your statistics on every device

In one line of JavaScript

Plug and play

one line of html, one line of JavaScript and you're good to go ;)

Interested?

get it from here

It's a lightweight responsive statistics visualizer plugin for jQuery

It's easily set up with a couple of span elements (one for each value, actually) and one line of javascript for initialization.
Other than that you can just sit down and relax, it'll do all the work for you.
It comes with five built-in color schemes (plus one that generates colors randomly) and six visualization method, but it's open to personaliation for new colors or interactions.

question mark
question mark

I have no time!

Don't worry! It's easily and quickly set up with a couple of span elements (one for each value, actually) and one line of JavaScript for initialization (which can easily be copy-pasted from this site).
Other than that you can just sit down and relax, it'll do all the work for you.
It comes with four built-in color schemes and four visualization methods but it's open to personaliation for new colors or interactions.

Implementation

First you need to import jQuery and statisquares at the bottom of your <body> tag:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/statiSquare.min.js"></script>

Then import the statiSquare stylesheet in your <head> tag:

<link href="css/statiSquare.css" media="all" rel="stylesheet" /></script>

And finally create the requested markup. All the following examples are based on the same html markup (except for the example's container ID), it is as follows:

<div id="example-n" class="single-example">
	<span class="statiSquare-value">15%</span>
	<span class="statiSquare-value">30%</span>
	<span class="statiSquare-value">20%</span>
	<span class="statiSquare-value">15%</span>
	<span class="statiSquare-value">10%</span>
	<span class="statiSquare-value">10%</span>
</div>

You need a set of elements with a valueYou can set percentages on your own or let the script do the dirty job; if the total of the values is not 100 it will assume the data is not percentage and convert it accordingly.

All the markup you'll need is:
a container

<div id="example-n" class="single-example">

And a line of JavaScript to let the script do its magic, for example:

$('#example-n').statiSquare({'width' : 200, 'type': 'map', 'theme' : 'aurora', 'hasValue' : true });

Options and arguments

Argument name Default value Values Description
Width » integer 150 any positive integer number This value sets the width (in pixels) of the displayed graph. Please note that this graphs are square based so this value also decides the graph's width. Future improvements may include the possibility to also decide a width.
hasValue » boolean false true | false Show (true) or do NOT show (false) the value of each element in the graph. This attribute only works for bar graphs and map graphs.
type » string "dots" "dots" | "map" | "bars" | "pie" | "ring" Decides the style of the generated graph. All the styles can be seen on the exmples above. The "Pie" and the "Ring" use the html5 canvas element, so browser support is not guaranteed for older versions.
theme » string "random" "aurora" | "bird" | "goldfish" | "sepia" | "bright" | "random" | "custom" Sets the color scheme of the generated graph. "Random" will generate a random color for each element. "Custom" won't set the colors, you can do it freely in you stylesheet.
sort » string "ascendant" "ascendant" | "descendant" | "none" Sorts values in an ascendant or descendant way. If you set it to 'none' (or anything else), the graph will be printed exactly as you wrote in your HTML.
Responsive » boolean false true | false Decides if the graph will be flexible and responsive or it will have a fixed width.
strokeWidth » integer 20 Any positive integer number Sets the width of the stroke for the Pie chart.

The best way to learn is to look at some examples, so here we go!

Example 1
Argument name Value Effect
Type Blocks Sets the look of the graph to this blocky thing
Width 800 Sets the width of the graph at 800 pixels
Height 200 Sets the height of the graph at 200 pixels
Theme Bird Sets the color theme of the graph to "bird"
Responsive True Tells the graph to be responsive. If you set a width (as I did in this example) and then set responsive to true, the width in pixels will be ignored and the graph will be 100% wide.
15% 30% 20% 15% 10% 10%

$('#example-1').statiSquare({'type' : 'blocks', 'width' : 800, 'height' : 200, 'theme' : 'bird', 'responsive' : true});

Example 2
Argument name Value Effect
Type Bars Sets the look of the graph to bars
Width 400 Sets the width of the graph at 400 pixels
Height 200 Sets the height of the graph at 200 pixels
Theme Goldfish Sets the color theme of the graph to "goldfish"
Responsive True Tells the graph to be responsive. If you set a width (as I did in this example) and then set responsive to true, the width in pixels will be ignored and the graph will be 100% wide.
hasValue True Tells the plugin to include values inside the graph.
Sort Descendant Tells the plugin yo want to sort the values from the highest to the lowest.
15% 30% 20% 15% 10% 10%

$('#example-2').statiSquare({'type' : 'bars', 'width' : 400, 'height' : 200, 'theme' : 'goldfish', 'hasValue' : true, 'sort' : 'descendant', 'responsive' : true});

Example 3
Argument name Value Effect
Type Map Sets the look of the graph to Map
Width 200 Sets the width of the graph at 400 pixels
Theme Aurora Sets the color theme of the graph to "aurora"
Responsive True Tells the graph to be responsive. If you set a width (as I did in this example) and then set responsive to true, the width in pixels will be ignored and the graph will be 100% wide.
sort none Tells the plugin to not sort tha values in any manner. Keep as they are in the HTML
15% 30% 20% 15% 10% 10%

$('#example-3').statiSquare({'type': 'map', 'width' : 200, 'theme' : 'aurora', 'sort' : 'none', 'responsive' : true});

Example 4
Argument name Value Effect
Type Map Sets the look of the graph to map
Width 400 Sets the width of the graph at 400 pixels
Height 300 Sets the height of the graph at 200 pixels
Theme Bright Sets the color theme of the graph to "bright"
hasValue True Tells the plugin to include values inside the graph.
15% 30% 20% 15% 10% 10%

$('#example-4').statiSquare({'type': 'map', 'width' : 400, 'height' : 300, 'theme' : 'bright', 'hasValue' : true });

Example 5
Argument name Value Effect
Type Pie Sets the look of the graph to pie
Width 200 Sets the width of the graph at 200 pixels. For Pie and Ring charts you can't set the width as they are cirles
Theme Random Tells the script to randomly choose colors.
15% 30% 20% 15% 10% 10%

$('#example-5').statiSquare({'type': 'pie', 'width' : 200, 'theme' : 'random' });

Example 6
Argument name Value Effect
Type Ring Sets the look of the graph to ring
Width 100 Sets the width of the graph at 100 pixels. For Pie and Ring charts you can't set the width as they are cirles
Theme Bright Tells the script to use the "bright" colorscheme.
StrokeWidth 20 Tells the script the width of the stroke (only works on Pie charts)
15% 30% 20% 15% 10% 10%

$('#example-6').statiSquare({'type': 'ring', 'width' : 200, 'theme' : 'random', 'strokeWidth' : 20 });

Download it!

If you're interested in this project feel free to download the uncompressed version or the minified version

question mark