Slavlee

SnapIt - Slavlee

SVG diagrams with Snap.svg

Snap.It - Slavlee is a jQuery Plugin that generates horizontal and vertical bar diagrams with just a few parameters.
You can display as much bars as you need, enable a customizable coordinate system and adjust the parameters like animation speed, bar size or colors.

All adjustments are made inside one JSON object.

More Snap.It - Slavlee facts:

Bar diagrams

Generate bar diagram just with a few lines of code. Below are 2 examples are to set it up

3 bars

The 3 bar diagram is the default settings

$("#snapit-canvas-3bars").snapit_slavlee();

5 bars

You can vary the number of bars and animation effect via JSON settings.

$("#snapit-canvas-5bars").snapit_slavlee({ //animation is JSON object that hold the parameters of the animation. animation: { type: "slideUp", speed: 1500, easing: mina.easein }, //graphs is javascript array of JSON objects that hold the parameters for each bar graphs: [ { width: 50, color: "#ff0000", height: 25, label: { text: "Label 1", size: 14, color: "#000000" }, gap: 25 }, { width: 50, color: "#00ff00", height: 50, label: { text: "Label 2", size: 14, color: "#000000" }, gap: 25 }, { width: 50, color: "#0000ff", height: 125, label: { text: "Label 3", size: 14, color: "#000000" }, gap: 25 }, { width: 50, color: "#f0f0f", height: 150, label: { text: "Label 4", size: 14, color: "#000000" }, gap: 25 }, { width: 50, color: "#bada55", height: 25, label: { text: "Label 5", size: 14, color: "#000000" }, gap: 25 } ] });

3 bars with axis

Every bar can have labeled axis with the following settings

$("#snapit-canvas-3bars-axis").snapit_slavlee({ axis: { enable: true, x: "Duration", y: "Time", color: "#000000", stroke: 1, arrow: { length: 10 }, grid: { enable: false } } });

3 bars with axis and grid

The axis can also have a grid with the following settings

$("#snapit-canvas-3bars-axis-grid").snapit_slavlee({ axis: { enable: true, x: "Duration", y: "Time", size: 10, color: "#000000", stroke: 1, arrow: { length: 10 }, grid: { enable: true, min: 0, max: 100, steps: { x: 10, y: 10, length: 10, size: 1, color: "#000000", labelXAppearance: 3, labelYAppearance: 3 }, units: { x: "days", y: "seconds" }, size: 10 } } });

3 bars with axis and grid full length

The axis can also have a full size grid with the following settings

$("#snapit-canvas-3bars-axis-grid2").snapit_slavlee({ axis: { enable: true, x: "Duration", y: "Time", size: 10, color: "#000000", stroke: 1, arrow: { length: 10 }, grid: { enable: true, min: 0, max: 100, steps: { x: 10, y: 10, length: "100%", size: 1, color: "gray", labelXAppearance: 3, labelYAppearance: 3 }, units: { x: "days", y: "seconds" }, size: 10 } } });

Horizontal bars

The bars can also be horizontal with the following settings

$("#snapit-canvas-3bars-horizontal").snapit_slavlee({ direction: "horizontal", graphs: [ { width: 50, color: "#ff0000", height: 50, label: { text: "Label 1", size: 14, color: "#000000" }, gap: 25 }, { width: 100, color: "#00ff00", height: 50, label: { text: "Label 2", size: 14, color: "#000000" }, gap: 25 }, { width: 150, color: "#0000ff", height: 50, label: { text: "Label 3", size: 14, color: "#000000" }, gap: 25 } ] } });

Horizontal bars with axis

The horizontal bars can also have axis with the following settings

$("#snapit-canvas-3bars-horizontal-axis").snapit_slavlee({ direction: "horizontal", graphs: [ { width: 50, color: "#ff0000", height: 50, label: { text: "Label 1", size: 14, color: "#000000" }, gap: 25 }, { width: 100, color: "#00ff00", height: 50, label: { text: "Label 2", size: 14, color: "#000000" }, gap: 25 }, { width: 150, color: "#0000ff", height: 50, label: { text: "Label 3", size: 14, color: "#000000" }, gap: 25 } ], axis: { enable: true, x: "Duration", y: "Time", size: 10, color: "#000000", stroke: 1, arrow: { length: 10 }, grid: { enable: false } } } });

Horizontal bars with axis and grid

The axis of the horizintal bars can also have a grid with the following settings

$("#snapit-canvas-3bars-horizontal-axis-grid").snapit_slavlee({ direction: "horizontal", graphs: [ { width: 50, color: "#ff0000", height: 50, label: { text: "Label 1", size: 14, color: "#000000" }, gap: 25 }, { width: 100, color: "#00ff00", height: 50, label: { text: "Label 2", size: 14, color: "#000000" }, gap: 25 }, { width: 150, color: "#0000ff", height: 50, label: { text: "Label 3", size: 14, color: "#000000" }, gap: 25 } ], axis: { enable: true, x: "Duration", y: "Time", size: 10, color: "#000000", stroke: 1, arrow: { length: 10 }, grid: { enable: true, min: 0, max: 100, steps: { x: 10, y: 10, length: "100%", size: 1, color: "gray", labelXAppearance: 3, labelYAppearance: 3 }, units: { x: "days", y: "seconds" }, size: 10 } } } });

Horizontal bars with x-axis and grid

There can be only 1 axis and grid with the following settings

$("#snapit-canvas-3bars-horizontal-axis-grid2").snapit_slavlee({ direction: "horizontal", graphs: [ { width: 50, color: "#ff0000", height: 50, label: { text: "Label 1", size: 14, color: "#000000" }, gap: 25 }, { width: 100, color: "#00ff00", height: 50, label: { text: "Label 2", size: 14, color: "#000000" }, gap: 25 }, { width: 150, color: "#0000ff", height: 50, label: { text: "Label 3", size: 14, color: "#000000" }, gap: 25 } ], axis: { enable: true, x: "Duration", y: false, size: 10, color: "#000000", stroke: 1, arrow: { length: 10 }, grid: { enable: true, min: 0, max: 100, steps: { x: 25, length: "100%", size: 1, color: "gray", labelYAppearance: 3 }, units: { x: "days" }, size: 10 } } } });

Vertical bars with y-axis and grid

The y-axis can also be the only with the following settings

$("#snapit-canvas-3bars-horizontal-axis-grid2").snapit_slavlee({ direction: "vertical", graphs: [ { width: 50, color: "#ff0000", height: 50, label: { text: "Label 1", size: 14, color: "#000000" }, gap: 25 }, { width: 100, color: "#00ff00", height: 50, label: { text: "Label 2", size: 14, color: "#000000" }, gap: 25 }, { width: 150, color: "#0000ff", height: 50, label: { text: "Label 3", size: 14, color: "#000000" }, gap: 25 } ], axis: { enable: true, x: false, y: "Time", size: 10, color: "#000000", stroke: 1, arrow: { length: 10 }, grid: { enable: true, min: 0, max: 100, steps: { y: 25, length: "100%", size: 1, color: "gray", labelYAppearance: 1 }, units: { y: "seconds", }, size: 10 } } });

Pie

The default pie is defined by the following settings

$("#snapit-canvas-pie").snapit_slavlee({ type: "pie" });

Pie with different value

You can adjust the value with the following settings

$("#snapit-canvas-pie-2").snapit_slavlee({ type: "pie", pie: { radius: 200, color: "#FFFFFF", stroke: "#000000", pieces: [ { value: 40, color: "#FF0000", label: { color: "#FFFFFF", size: 26 } } ], animation: { speed: 3000, type: mina.easein } } });

Pie with multiple values

You can adjust the value with the following settings

$("#snapit-canvas-pie-3").snapit_slavlee({ type: "pie", pie: { radius: 200, color: "#FFFFFF", stroke: "#000000", pieces: [ { value: 25, color: "#FF0000", label: { color: "#FFFFFF", size: 26 } }, { value: 5, color: "#00FF00", label: { color: "#FFFFFF", size: 26 } }, { value: 10, color: "#0000FF", label: { color: "#FFFFFF", size: 26 } } ], animation: { speed: 3000, type: mina.easein } } });

Parameters

This is a complete list of all parameters for the SnapIt - Slavlee plugin.

Param Explanation
type String: "bar", "pie"
Default: bar
direction String: "vertical" or "horizontal"
Default: vertical
animation JSON Object:
Param Explanation
type String: slideUp
Default: slideUp
speed Integer: time in milliseconds
Default: 1000
easing mina easing function
Default: mina.linear
axis JSON Object:
Param Explanation
enable boolean
x String: label of the x-axis
y String: label of the y-axis
size Integer: font-size
color Integer: hexadecimal color code
stroke border width
arrow JSON Object with following parameter:
Param Explanation
length Integer: length in pixel
grid JSON Object with following parameter:
Param Explanation
enable boolean
Default: false
min Integer: lowest value of the coordinate system Default: 0
max Integer: highest value of the coordinate system
Default: 100
steps JSON Object with following parameter:
Param Explanation
x Integer: amount of steps that the x-axis are divided into
Default: 10
y Integer: amount of steps that the y-axis are divided into
Default: 10
length Integer: length of the line in pixels that indicates a step
Default: 10
size Integer:
Default: 1
color String: hexadecimal color code
Default: #000000
labelXAppearance Integer: on what steps should the label appear on the x-axis
Default: 3 (means every third step the label appears)
labelYAppearance Integer: on what steps should the label appear on the y-axis
Default: 3 (means every third step the label appears)
units JSON Object with following parameter:
Param Explanation
x String: unit of the x-axis values
Default: days
y String: unit of the y-axis values
Default: seconds
size Integer: font-size in pixel
Default: 10
graphs Array of JSON Objects, where each JSON object holds following parameter:
Param Explanation
width int; for the bar diagram this defines the width of each bar in pixel.
Default: 50 | 100 | 150
height int; for the bar diagram this defines the height of each bar in pixel.
Default: 50
gap int; for the bar diagram this defines the gap between each bar in pixel.
Default: 25
color hexdecimal
Default: #ff0000 | #00ff00 | #0000ff
label JSON Object with following parameter:
Param Explanation
text string
Default: Label 1 | Label 2 | Label 3
size int; font-size in pixel
Default: 14
color hexdecimal
Default: #000000
pie JSON Object that holds all settings for the pie graph:
Param Explanation
radius int; radius of the circle of the pie.
Default: 200
color hexadecimal; background color of the circle
Default: #FFFFFF
stroke hexadecimal; border color of the circle
Default: #000000
pieces Array of JSON Objects for each cake slice with following parameter:
Param Explanation
value float; size of a slice in percentage
Default: 50
color hexadecimal; background color of a slice
Default: #FF0000
label JSON Object for each cake slice with following parameter:
Param Explanation
color hexadecimal; color of the label
Default: #FFFFFF
size int; font size of the label
Default: 26
animation JSON Object with following parameter:
Param Explanation
speed int; animation speed in milliseconds
Default: 3000
type mina easing function
Default: mina.easein
classes JSON Object with the following parameter:
Param Explanation
drawbar String; css class for the drawbar element
Default: snapit_slavlee_drawbar
axisX String; css class for the x-axis element
Default: snapit_slavlee_axisX
axisY String; css class for the y-axis element
Default: snapit_slavlee_axisY
axis String; css class for the axis wrapper element
Default: snapit_slavlee_axis
grid String; css class for the grid wrapper element
Default: snapit_slavlee_grid
gridX String; css class for the x-grid element
Default: snapit_slavlee_gridX
gridY String; css class for the y-grid wrapper element
Default: snapit_slavlee_gridY
segment String; css class for each pie slice
Default: snapit_slavlee_segment
measure String; css class for the hidden help element that is needed for different calculations
Default: snapit_slavlee_measure

Support

If you need payed support, then you can contact me with the wished time period. I will send you an offer as soon as possible.

If you find any bugs then send a email with the Subject: SnapIt - Slavlee Bug Report.