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: {
                self: ['Gradient(white:red:red:red)', 'Gradient(white:green:green)', 'Gradient(white:yellow)'],
                alpha: 0.3
            },
            labels: [
                'Pete',  'Lou',
                'Jim',   'Jack',
                'Fred',  'Jo',
                'Lou',   'Freda',
                'Pete',  'Rick',
                'Missy', 'Lou',
                'Jessy', 'Freda',
                'John'
            ],
            gutter: {
                top: 35
            },
            axes: {
                color: 'rgba(0,0,0,0)'
            },
            background: {
                circles: {
                    poly: true,
                    spacing: 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
		}
    }).draw();

    //
    // This function allows you to easily add segment highlighting
    // to radial charts (eg Rose, RScatter etc)
    //
    RGraph.allowSegmentHighlight({
        object: rscatter,
         count: 8,
          fill: 'Gradient(transparent:rgba(0,255,0,0.1):rgba(0,255,0,0.25))',
        stroke: 'transparent'
    });
</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: {
                self: ['Bob','Gerry','Lucifer','John','Kevin','Pete','Lou','Jobe'],
                axes: ''
            },
            background: {
                grid: {
                    spokes: 8
                },
                axes: false
            },
            colors: {
                self: [
                    'Gradient(white:red)',
                    'Gradient(white:green)',
                    'Gradient(white:blue)',
                    'Gradient(white:gray)',
                    'Gradient(white:purple)',
                    'Gradient(white:pink)',
                    'Gradient(white:orange)'
                ],
                sequential: 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,
            scale: {
                decimals: 1
            },
            xscale: {
                self: true,
                decimals: 0
            },
            gutter: {
                left: 50
            },
            xaxispos: 'center'
        }
    }).draw()
</script>