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)
- responsive
- better zoom