Other types of charts

  Read comments...

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>
        new RGraph.Rose({
            id: 'cvs',
            data: [4,6,2,8,9,5,4,7],
            options: {
                axesVisible: true,
                labels: ['Bob','Gerry','Lucifer','John','Kevin','Pete','Lou','Jobe'],
                labelsAxes: '',
                backgroundGridSpokes: 8,
                backgroundGridAxes: false,
                colors: ['red', 'green', 'blue', 'gray', 'purple', 'pink', 'orange'],
                colorsSequential: true,
                margin: 0,
                textSize: 20,
                strokestyle: 'white',
                exploded: 5,
                backgroundGridRadials: 0,
                backgroundAxes: false
            }
        }).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>
If you like RGraph please share it:

Comments