<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>je5</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://je5.es/js/plugin-jquery/plugin-jquery-je5-beta.0.2.1.js"></script>
</head>
<body>
<svg id="bar" style="display:none" height="230" width="100%"></svg>
<svg id="text" style="display:none" height="183" width="50%"></svg>
<script type="text/javascript">
$('#bar').je5({
sort:'stats',
draw:{
type:'bar',//bar type
att:{
orientation:'v',//orientation horizontal (h) orientation vertical (v)
spacing:45,//spacing between bars
thickness:40,//thickness of the bars
x:10,//x position
y:10,//y position
ry:5,//Rounding the start and end bars
rx:5,//Rounding the start and end bars
transform:'rotate(0, 0, 0)',//Rotate the bars. rotate to any values ??(0, 0, 0)
style:'stroke:pink;stroke-width:2;fill-opacity:0.5;stroke-opacity:0.9',//styles bars
percentage:[//Percentage of each bar. the total must be 100
'10%',
'20%',
'30%',
'40%'
],
color:[//bar colors
'red',
'blue',
'gray',
'green'
],
text:[//Text data
'Value Red',
'Value Blue',
'Value Grey',
'Value Green'
],
id:[//id bars
'Value1',
'Value2',
'Value3',
'Value4'
],
idtext:'text',//svg text id
textstyle:'font-size:15px;font-family:Arial'//svg text style
}
}
});
$('#bar').fadeIn(3000);
$('#text').show(3000);
</script>
</body>
</html>