A Gantt chart Grow effect
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraphgantt.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="250">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
var data = [
{start: 0,duration: 5,label:'Fred',color:'Gradient(aqua:white)'},
{start: 7,duration: 10,label:'Jerry',color:'Gradient(gray:white)'},
{start: 15,duration: 5,label:'Barney',color:'Gradient(red:#fdd)'},
{start: 15,duration: 10,label:'Ben',color:'Gradient(blue:#ddf)'},
{start: 23,duration: 5,label:'Rachel',color:'Gradient(green:#dfd)'},
{start: 27,duration: 5,label:'Paul',color:'Gradient(black:#ddd)'}
];
new RGraph.Gantt({
id: 'cvs',
data: data,
options: {
borders: false,
xaxisScaleMax: 30,
backgroundGridHlinesCount: 6,
backgroundGridVlinesCount: 30
}
}).grow();
</script>