Stiff Chart
stiff-chart.shtml, stiff-chart.css, stiffChart.js
Usage :
<div id="stiff-chart"> <div class="stiff-chart-inner"> // create each level container and define the level <div class="stiff-chart-level" data-level="01"> // main parent container <div class="stiff-main-parent"> <ul> // put data-parent and it's name <li data-parent="a"> <div class="the-chart"> // content goes here </div> </li> <li data-parent="b"> <div class="the-chart"> // content goes here </div> </li> <li data-parent="c"> <div class="the-chart"> // content goes here </div> </li> </ul> </div> </div> <div class="stiff-chart-level" data-level="02"> // child container and define that this child is descendant from who <div class="stiff-child" data-child-from="a"> <ul> // put data-parent and it's name <li data-parent="a01"> <div class="the-chart"> // content goes here </div> </li> <li data-parent="a02"> <div class="the-chart"> // content goes here </div> </li> <li data-parent="a03"> <div class="the-chart"> // content goes here </div> </li> </ul> </div> </div> // etc... </div> </div>$(document).ready(function() { $('#stiff-chart').stiffChart(); });lineColor : change line color (default: '#3498db')
lineWidth : change line width (default: 2)
lineShape : change line shape into 'curved' or 'straight' (default: 'curved')
enableZoom : enable or disable zoom (default: true)
layoutType : choose betwen 'vertical' or 'horizontal' chart layout (default: 'vertical')
childCounter : show or hide child counter of a parent (default: true)
activeClass : css class name for customizing the element when it's active / opened (default: 'chart-active')
boostrapPopover : enable or disable popover. The popover is taken from Boostrap component, so you need to include the Bootstrap's plugin and styling. (default: false)
To-dos:
- responsive
- better zoom
