Other types of charts


Radar charts

  • Filled/non-filled charts
  • Multiple data series
  • Stacked data series
  • Tooltips, custom events, resizable, zoom, context menu, annotatable
  • Visual effects
[No canvas support]

Radar charts documentation
<script>
    var radar = new RGraph.Radar({
        id: 'cvs',
        data: [7,6,6,7,8,6,7,7,6,6,5,7,8,7,6],
        options: {
            strokestyle: 'black',
            colors: ['Gradient(white:red:red:red)', 'Gradient(white:green:green)', 'Gradient(white:yellow)'],
            colorsAlpha: 0.3,
            labels: [
                'Pete',  'Lou',
                'Jim',   'Jack',
                'Fred',  'Jo',
                'Lou',   'Freda',
                'Pete',  'Rick',
                'Missy', 'Lou',
                'Jessy', 'Freda',
                'John'
            ],
            gutterTop: 35,
            axesColor: 'rgba(0,0,0,0)',
            backgroundCirclesPoly: true,
            backgroundCirclesSpacing: 25
        }
    }).draw()
</script>

Radial Scatter charts

  • Tooltips, custom events, resizable, zoom, context menu annotatable
  • Represent data which has rotational/magnitude values
  • Visual effects
[No canvas support]

RScatter charts documentation
<script>
    // Create the data
    var data = [];
    for (var i=0; i<75; i++) {
        data.push([RGraph.random(0, 360), i * RGraph.random(0, 10)]);
    }

    var rscatter = new RGraph.Rscatter({
        id: 'cvs3',
        data: data,
        options: {
            labels: [
                'NE', 'E', 'SE', 'S','SW','W','NW','N'
            ],
            labelsAxes: 'n',
            labelsPosition: 'edge',
            tickmarks: 'plus',
            gutterBottom: 40,
            backgroundGridDiagonalsCount: 8,
            segmentHighlight: true,
            segmentHighlightCount: 8,
            segmentHighlightFill: 'Gradient(transparent:rgba(0,255,0,0.1):rgba(0,255,0,0.25))'
        }
    }).draw();
</script>

Rose charts

  • Standard Rose charts
  • Stacked Rose charts
  • Non-equi-angular Rose charts
  • Key
  • Tooltips, custom events, resizable, zoom, context menu annotatable
  • Visual effects
[No canvas support]

Rose charts documentation
<script>
    var rose = new RGraph.Rose({
        id: 'cvs',
        data: [4,6,2,8,9,5,4,7],
        options: {
            labels: ['Bob','Gerry','Lucifer','John','Kevin','Pete','Lou','Jobe'],
            labelsAxes: '',
            backgroundGridSpokes: 8,
            backgroundAxes: false,
            colors: [
                'Gradient(white:red)',
                'Gradient(white:green)',
                'Gradient(white:blue)',
                'Gradient(white:gray)',
                'Gradient(white:purple)',
                'Gradient(white:pink)',
                'Gradient(white:orange)'
            ],
            colorsSequential: true,
            margin: 5
        }
    }).draw()
</script>

Scatter charts

[No canvas support]

Scatter charts documentation
<script>
    var data = [];
    
    for (var i=0; i<200; ++i) {
        data.push([
            RGraph.random(0,360),
            RGraph.random(-100,100) * 0.01,
            ['black','blue','pink','green','red'][RGraph.random(0,4)]
        ]);
    }

    var scatter = new RGraph.Scatter({
        id: 'cvs',
        data: data,
        options: {
            xmax: 360,
            ymax: 1,
            scaleDecimals: 1,
            xscale: true,
            xscaleDecimals: 0,
            gutterLeft: 50,
            xaxispos: 'center'
        }
    }).draw();
</script>