VISIFY.JS

A QUICK EXPLAINATION

As it stands, the Visify.js jQuery plug-in provided on this page is meant to create stacked bar charts. It enables you to create classes to convert the data to a human readable format, and pass it to the plug-in. It can be styled via CSS and accepts some options for your customization. It can handle multiple bar segments if multiple data values are passed per object, creating stacked bars. It uses the <canvas> tag to draw the graph. If the canvas tag is not supported (Lookin' at you IE), excanvas.js will be included.

PLAIN NUMBERS EXAMPLE

numberSwappin = [
 {"Numbers In": 10, "Numbers Out": 44, "Name": "Jimmy"},
 {"Numbers In": 20, "Numbers Out": 74, "Name": "Clyde"},
 {"Numbers In": 30, "Numbers Out": 70, "Name": "Roger"},
 {"Numbers In": 40, "Numbers Out": 50, "Name": "Mick"}
]

$('#Example1').visify(numberSwappin, "Name", ["Numbers In", "Numbers Out"], {'barWidth': 50, 'barSpacing' : 55});

USAGE

USING THE PLUGIN: Visify expects three arguments, with an optional fourth argument for the options hash.

$('#myBlockElement').visify(data, subjectKey, dataKeys, optionsHash);

THE DATA: All of the data passed to the plug-in must be in byte form. It will be converted to KB, MB, GB, TB, PB, or XB appropriately. The data must be an array of Hashes. Each hash should have the same keys and a subject/name for each data set. Add more keys for more bar segments.

numberSwappin = [
 {"Numbers In": 10, "Numbers Out": 44, "Name": "Jimmy"},
 {"Numbers In": 20, "Numbers Out": 74, "Name": "Clyde"},
 {"Numbers In": 30, "Numbers Out": 70, "Name": "Roger"},
 {"Numbers In": 40, "Numbers Out": 50, "Name": "Mick"}
]


THE SUBJECT AND DATA KEYS: The subject key should be a JavaScript string of the key representing your dataset's name/title/subject. The data keys should be a JavaScript Array of strings representing the keys of your data values.

subjectKey = "Name";
dataKeys = ["Numbers In", "Numbers Out"]


THE OPTIONS HASH: The options hash accepts a number of options to customize your bar chart. It is not required.

optionsHash = {
 'barWidth':   50,
 'barSpacing':   55,
 'backgroundColor':   "#fff",
 'fontSize':   15,
 'fontFamily':   "Arial",
 'colors':   [{"R": 210, "G": 49, "B": 42}, {"R": 45, "G": 146, "B": 255},
            {"R": 249, "G": 159, "B": 0}, {"R": 105, "G": 151, "B": 47}],
 'graphLines':   5,
 'rounder':   1,
 'converter':   ClassName,
 'resizeThrottle':   50
}

OPTION TYPE EXPLAINATION
barWidth Integer This is the width of each bar in pixels (automatically calculated if no width is specified)
barSpacing Integer This is the space between each bar in pixels
backgroundColor String This is the background color you want the graph to have. It inherits the containing element's CSS valueby default
fontSize Integer This is the size of the font used in the graph. It inherits the containing element's CSS value by default
fontFamily String This is the font family used in the graph. It inherits the containing element's CSS value by default
colors Array This is an Array of Hash value RGB colors to use for the bar colors. Make sure to pass at least as many colors as you have bar segments
graphLines Integer This is the number of horizontal graph lines you want to see
rounder Integer This is the number minimum number of decimal places you want to see, excluding zeros after the decimal. Add a zero for each decimal place (1 => 2, 10 => 2.1, 100 => 2.12, etc)
converter Class This is the name of the Custom Converter class you want to modify the values by (treated like normal integers if not specified)
resizeThrottle Integer Represents the millisecond value to use to throttle the resize event for browsers that fire continuous resize messages.

BYTE EXAMPLE

You can pass a custom class to convert your values into a more human readable format. An example of this is byte size data. You could represent the data in pure bytes, but humans have a more difficult time relating bytes to today's measurement units. For example, some people might not how to quantify 1024KB, but they may be able to relate to 1MB. Simply include the ByteMe class, and pass it as an option.

topTransferData = [
 {"Uploaded Data": 1003233330, "Downloaded Data": 324288823, "Copied Data": 903499494, "Name": "Jimmy"},
 {"Uploaded Data": 339944893, "Downloaded Data": 0, "Copied Data": 349394390, "Name": "Clyde"},
 {"Uploaded Data": 0, "Downloaded Data": 2082492939, "Copied Data": 0, "Name": "Roger"},
 {"Uploaded Data": 28239899, "Downloaded Data": 1100000000, "Copied Data": 392999023, "Name": "Mick"}
]

$('#ByteExample1').visify(topTransferData, "Name", ["Uploaded Data", "Downloaded Data", "Copied Data"], {'barSpacing' : 55, 'converter': ByteMe});

Want to do the same thing to show data transfer per second? Simply include the ByteMeSeconds class, and pass it as an option.

topTransferPerSecond = [
 {"Uploaded Data": 1003233330, "Downloaded Data": 324288823, "Name": "Jimmy Jude Johnson"},
 {"Uploaded Data": 339944893, "Downloaded Data": 0, "Name": "Clyde"},
 {"Uploaded Data": 0, "Downloaded Data": 2082492939, "Name": "Roger"},
 {"Uploaded Data": 28239899, "Downloaded Data": 1100000000, "Name": "Mick"}
]

$('#ByteExample1').visify(topTransferPerSecond, "Name", ["Uploaded Data", "Downloaded Data"], {'barWidth': 50, 'barSpacing' : 65, 'converter': ByteMeSeconds});

LICENSE

Copyright (c) 2010 Daniel Westendorf

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.