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.
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. |
$('#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. |
$('#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 |
$('#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. |
$('#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. |
$('#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) |
$('#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
