Planning and management charts

Share RGraph:   

Funnel charts

  • Shows decreasing (or increasing) quantities progressing through a process
  • Tooltips, custom events, resizable, zoom, context menu, annotatable
  • Key
  • Visual effects

[No canvas support]
Funnel charts documentation
<script>
    var funnel = new RGraph.Funnel({
        id: 'cvs',
        data: [100,45,45,26,24],
        options: {
            gutterRight: 5,
            gutterLeft: 150,
            textBoxed: false,
            shadow: true,
            shadowColor: '#ccc',
            shadowBlur: 5,
            shadowOffsetx: 5,
            shadowOffsety: 5,
            labels: [
                'Initial contact',
                'Established lead',
                'Telephone contact',
                'Site visit',
                'Sale finalised'
            ],
            labelsX: 10,
            labelsSticks: true,
            textBoxed: false,
            strokestyle: 'rgba(0,0,0,0)',
            textAccessible: true
        }
    }).draw();
</script>

Gantt charts

  • Shows planning/management of resources
  • Tooltips, custom events, resizable, zoom, context menu, annotatable
  • Multiple bars per entry
  • Visual effects

[No canvas support]

Gantt charts documentation
<script>
    var gantt = new RGraph.Gantt({
        id: 'cvs2',
        data: [
            [
                [31, 28, null, 'Richard', 'Gradient(green:#0f0)'],
                [90,15, null, null, 'gradient(green:#0f0)']
            ],
            [
                [0, 28, null, 'Rachel', 'Gradient(green:#0f0)'],
                [30,65, null, null, 'Gradient(green:#0f0)']
            ],
            [12, 28, null, 'Fred', 'Gradient(green:#0f0)'],
            [0, 85, null, 'Barney', 'Gradient(green:#0f0)']
        ],
        options: {
            xmax: 120,
            gutterRight: 35,
            labels: ['January', 'February', 'March', 'April'],
            labelsAlign: 'bottom',
            title: 'Work schedule for Xyz Ltd',
            titleVpos: 0.6,
            backgroundGrid: false,
            vbars: [
                [31,28,'#ddd'],
                [90,30,'#ddd']
            ],
            borders: false,
            textAccessible: true
        }
    }).draw();
</script>

Waterfall charts

  • Show accumulation or loss of amounts progressing through stages in a process
  • Customisable colors
  • X axis at the bottom or in center
  • Tooltips, custom events, resizable, zoom, context menu, annotatable
  • Visual effects

[No canvas support]

Waterfall charts documentation
<script>
    var waterfall = new RGraph.Waterfall({
        id: 'cvs',
        data: [110,12,-50,-23, -19, -130],
        options: {
            backgroundGridAutofitNumhlines: 10,
            backgroundGridAutofitNumvlines: 7,
            colors: ['black','red','blue'],
            strokestyle: 'rgba(0,0,0,0)',
            unitsPre: '$',
            unitsPost: 'k',
            total: true,
            labels: ['Sales', 'Misc', 'Wages','Fees','Supplies','Food','Gross'],
            highlightStroke: 'rgba(0,0,0,0)',
            shadow: true,
            shadowColor: '#aaa',
            shadowBlur: 5,
            shadowOffsetx: 0,
            shadowOffsety: 0,
            gutterLeft: 50,
            gutterBottom: 35,
            xaxispos: 'center',
            textAccessible: true
        }
    }).draw()
</script>

Comments

Add a new comment...