9 Good looking charts in the demos

Written by Richard Heyes, RGraph author, on 16th August 2015

• A Line chart with a custom line
• A customised Gauge chart
• A customised Pie chart
• An adjustable (black) Meter chart
• Bar chart Wave effect
• 3D donut chart
• A combined Bar and Line chart
• A stacked Radar chart
• A non-filled Radar chart
• Read more

Creating good-looking charts isn't terribly difficult - for some people. If, like me, you're rather (very) limited in graphical abilities then creating attractive charts is not always as straightforward as it sounds. If you have a graphical designer on hand it can be easy - simply ask them for a mock-up that you can copy the styling from or present them with a chart and say "Make it look pretty!". But if you're not fortunate enough to have a designer to hand then you're on your own (by the way, on a completely unrelated side-note did you know that Google Image Search is a very good tool - just thought I would throw that into the mix).

Back to the point of this post though - RGraph gives you the tools to create great-looking charts - and here are some examples. Out of the box, RGraph charts look pretty standard - but using the configuration options you can create some pretty good-looking things! And by combining charts like the meters/gauges/progress bars you can create some good-looking dashboards too. So - on to the charts:

A Line chart with a custom line

A customised Line chart that shows revenue up to a certain point in the year and then projected income after that. The chart has a vertical line indicating where we are in the year and is animated (the tickmarks grow from nothing to their full size.
File: demos/line-orange2.html

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.line.js"></script>

<canvas id="cvs" width="750" height="250">[No canvas support]</canvas>

<script>
    color = '#E9B34E';
    
    line = new RGraph.Line({
        id: 'cvs',
        
        // Define the data such that the first dataset has a bit
        // missing at the end whilst the second dataset continues
        // the first (ie the first part is null values)
        data: [
            [7000,26000,11000,16000,28000,13000,23000,28500,null,null,null,null],
            [null,null,null,null,null,null,null,28500,11000,14000,9000,10000],
        ],
    
        options: {
            colors: ['black',color],
            shadow: false,
            axes: false,
            backgroundGridVlines: false,
            backgroundGridHlinesCount: 3,
            backgroundGridBorder: false,
            yaxisTickmarksCount: 3,
            yaxisLabelsCount: 3,
            yaxisScaleMax: 30000,
            yaxisScaleUnitsPre: '$',
            marginTop: 50,
            marginLeft: 100,
            linewidth: 3,
            xaxisLabels: ['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'],
            tickmarksStyle: 'dot',
            tickmarksStyleDotStroke: 'white',
            tickmarksStyleDotLinewidth: 0,
            tickmarksStyleDotStroke: 'white',
            tickmarksSize: 0,
            textSize: 14,
            textFont: 'Segoe UI',
            shadow: true,
            shadowOffsetx: 0,
            shadowOffsety: 0,
            shadowBlur: 0
        }
    // The draw event handles drawing the text and the vertical
    // lines on the chart
    }).on('draw', function (obj)
    {
        // Draw the vertical line
        var x = obj.coords2[1][7][0];
        var y = obj.coords2[1][7][1];
    
        // Draw the vertical line above and below the 8th point
        obj.path(
            'b m % 25 l % % s %',
            x,
            x, y - 10,
            color
        );
    
        obj.path(
            'b m % % l % 230 s %',
            x, y + 10,
            x,
            color
        );
        
        obj.context.fillStyle = color;
        
        // Draw the text above the vertical line
        RGraph.text(obj,
        {
            x: x,
            y: 25,
            text: 'TODAY',
            size: 8,
            halign: 'center',
            bold: true
        });
        
        // Draw the text above the Y axis labels
        RGraph.text(obj, {
            color: 'black',
            x: 65,
            y: 30,
            text: 'REVENUE',
            size: 14,
            halign: 'center',
            bold: true
        });
    
        
    }).trace({frames: 50}, function (obj)
    {
        // The animate functionenlarges the tickmarks to 10
        obj.animate({
            frames: 7,
            tickmarksSize: 10,
            tickmarksStyleDotLinewidth: 3,
            shadowOffsetx: 1,
            shadowOffsety: 1,
            shadowBlur: 2
        }, function ()
        {
            // When the above animate function finishes this
            // animate function then reduces the tickmarksSize
            // property to 7
            obj.animate({
                frames: 7,
                tickmarksSize: 7
            });
        });
    });
</script>

A customised Gauge chart

A significantly customised black-colored Gauge chart with dual pointers. Having dual pointers can eliminate the need for multiple charts and save space on your page.
File: demos/gauge-customised.html

<script src="RGraph.common.core.js"></script>
<script src="RGraph.gauge.js"></script>

<canvas id="cvs" width="300" height="300">[No canvas support]</canvas>

<script>
    new RGraph.Gauge({
        id: 'cvs',
        min: 0,
        max: 200,
        value: [184,12],
        options: {
            marginLeft: 15,
            marginRight: 15,
            marginTop: 15,
            marginBottom: 15,

            // Configure the top titles appearance
            titleTop: 'Air Speed',
            titleTopFont: 'Impact',
            titleTopColor: '#fff',
            titleTopSize: 24,
            titleTopItalic: true,
            
            // Configure the bottom titles appearance
            titleBottom: 'Knots',
            titleBottomSize: 14,
            titleBottomItalic: true,
            titleBottomFont: 'Impact',
            titleBottomColor: '#ccc',
            titleBottomPos: 0.4,

            colorsRanges: [[160,200,'rgba(255,0,0,1)'], [120,160,'rgba(255,255,0,0.95']],
            backgroundColor: 'black',
            backgroundGradient: true,
            centerpinColor: '#666',
            needleSize: [null, 50],
            needleColors: ['Gradient(transparent:white:white:white:white:white)', 'Gradient(transparent:#d66:#d66:#d66:#d66)'],
            textColor: 'white',
            tickmarksLargeColor: 'white',
            tickmarksMediumColor: 'white',
            tickmarksSmallColor: 'white',
            borderOuter: '#666',
            borderInner: '#333',
            textAccessible: true
        }
    }).draw();
</script>

A customised Pie chart

A Pie chart with custom colors and segment separation. The segment separation is achieved using the exploded property. To accommodate the length of the labels the canvas tag needs to be specified on your page with a width attribute of 480 (or more).
File: demos/pie-customised.html

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.pie.js"></script>

<canvas id="cvs" width="700" height="250"></canvas>

<script>
    data   = [20,13.43,2.83,4.24,7.42,13.43,38.65];
    labels = ['Miscellaneous','Cooking','Office equipment','Refridgeration','Cooling','Ventilation','Lighting'];


    new RGraph.Pie({
        id: 'cvs',
        data: data,
        options: {
            labels: labels,
            tooltips: '%{property:labels[%{index}]}: %{value}%',
            colors: ['#EC0033','#A0D300','#FFCD00','#00B869','#999999','#FF7300','#004CB0'],
            colorsStroke: 'white',
            linewidth: 0,
            shadowOffsetx: 2,
            shadowOffsety: 2,
            shadowBlur: 3,
            exploded: 7,
            labelsSize: 18,
            tooltipsCss: {
                fontSize: '20pt'
            }
        }
    }).draw();
</script>

An adjustable (black) Meter chart

An animated and adjustable Meter chart. The chart has been significantly customised from the defaults and would suit a page that has a dark background. The animation effect when you click on the chart is achieved by a custom click handler (because the built-in adjusting feature is not animated) - it's not difficult and can be achieved with just a few lines of code.
Filename: demos/meter-black.html

<script src="RGraph.common.core.js"></script>
<script src="RGraph.meter.js"></script>

<!-- Set the CSS background color of the canvas tag -->
<canvas id="cvs" width="500" height="300" style="background-color: black">[No canvas support]</canvas>

<script>
   meter = new RGraph.Meter({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 75,
        options: {

            marginLeft: 100,
            marginRight: 100,
            marginTop: 15,
            marginBottom: 15,

            // There's various configuration options here so that the Meter looks
            // quite different to the default.
            backgroundColor: 'black',
            anglesStart: RGraph.PI - 0.55,
            anglesEnd: RGraph.TWOPI + 0.5,
            centery: 150,
            textSize: 14,
            textColor: 'white',
            textValign: 'center',
            colorsGreenColor: '#0a0',
            segmentsRadiusStart: 95,
            border: 0,
            tickmarksSmallCount: 0,
            tickmarksLargeCount: 0,
            needleRadius: 70,
            needleColor: '#ddd',
            needleHeadWidth: 0.1,
            needleHeadLength: 20,
            centerpinStroke: 'black',
            centerpinFill: '#ddd'
        }
    }).draw();

    // Now add a click event listener so that when the canvas is clicked on
    // the Meter chart needle animates to show the new value.
    meter.canvas.onclick = function (e)
    {
        var newvalue = meter.getValue(e);
        
        meter.value = newvalue;
        meter.grow();
    }
</script>

Bar chart Wave effect

Not a particularly stunning chart - but the Wave effect is a nice Bar chart effect. The 3D effect is easy to implement in RGraph and is as simple as setting a property: variant: '3d'
demos/effects-bar-wave.html

<script src="RGraph.common.core.js"></script>
<script src="RGraph.bar.js"></script>

<canvas id="cvs" width="650" height="300">[No canvas support]</canvas>

<script>
    data = [4,8,6,3,5,2,6,8,4,5,7,8];

    new RGraph.Bar({
        id: 'cvs',
        data: data,
        options: {
            backgroundGridVlinesCount: 0,
            linewidth: 0,
            shadow: false,
            marginInner: 7,
            
            // Create a gradient using the RGraph-specific gradient
            // syntax
            colors: ['Gradient(pink:red:#f33)'],

            labelsAbove: true,
            labelsAboveOffsety: 5,
            xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
            clearto: 'white',
            variant: '3d',
            marginBottom: 90,
            xaxis: false,
            yaxis: false
        }
    // Animate the Bar chart using the wave effect
    }).wave({frames: 60});
</script>

3D Donut chart

As well as the 3D effect (which is achieved with a canvas transformation before drawing) the various segments can be clicked to "explode" them even further - so that they can be highlighted as required. demos/donut-3d.html

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.pie.js"></script>

<canvas id="cvs" width="650" height="300">[No canvas support]</canvas>

<script>
    labels = ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'];

    // Create the Pie chart, set the donut variant and the rest of the
    // configuration. The variant property is what sets the chart to
    // be a Donut chart instead of a regular Pie chart.
    new RGraph.Pie({
        id: 'cvs',
        data: [4,8,6,3,5,2,5],
        options: {
            shadow: true,
            shadowOffsetx: 0,
            shadowOffsety: 5,
            shadowColor: '#aaa',
            variant: 'donut3d',
            labels: labels,
            labelsSticksLength: 15,
            labelsSticksLinewidth: 2,
            colorsStroke: 'transparent',
            tooltipsCss:{
                fontSize:'16pt'
            }
        }
    }).draw().responsive([
        {maxWidth: null,width:600,height:350,options:{radius: 100,labelsList: true, labels:labels,title:'',tooltips:null}},
        {maxWidth: 900,width:400,height:250,options:{radius: 90,labels: null,title: '(Click for labels)',tooltips:labels}}
    ]);
</script>

A combined Bar and Line chart

A combined Bar and Line, pink and blue colored chart. With canvas charts there's a specific class to help you when producing this type of chart that sets the margins and the marginInner settings appropriately for you but with svg, as it is here, the settings most be set manually.
demos/svg-bar-combined.html

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.common.tooltips.js"></script>
<script src="RGraph.svg.bar.js"></script>
<script src="RGraph.svg.line.js"></script>

<div id="chart-container" style="width: 750px; height: 300px">

<script>
    new RGraph.SVG.Bar({
        id: 'chart-container',
        data: [[60,5],[84,98],[-20,-23],[-16,24],[72,35],[49,-22],[-15,15]],
        options: {
            colors: ['#FF6384','#4BC0C0'],
            yaxisScaleMax: 100,
            yaxisScaleMin: -75,
            yaxis: false,
            yaxisLabelsCount: 7,
            backgroundGridHlinesCount: 7,
            marginInner: 10,
            marginLeft: 31
        }
    }).wave();

    new RGraph.SVG.Line({
        id: 'chart-container',
        data: [35,89,53,16,56,40,18],
        options: {
            tickmarksStyle: 'circle',
            tickmarksSize: 4,
            linewidth: 2,
            marginInner: 41,
            colors: ['#36A2EB'],
            spline: true,
            backgroundGrid: false,
            yaxis: false,
            yaxisScaleMax: 100,
            yaxisScaleMin: -75,
            yaxisScale: false,
            xaxis: false
        }
    }).trace({frames: 30});
</script>

A stacked Radar chart

This large stacked Radar chart shows three separate datasets and uses semi-transparent colors to good effect.
demos/radar-stacked.html

<script src="RGraph.common.core.js"></script>
<script src="RGraph.radar.js"></script>

<canvas id="cvs" width="750" height="600"></canvas>

<script>
    new RGraph.Radar({
        id: 'cvs',
        data: [
            [31,33,32,31,34,31,32,32,36,33,32,30,31,33,32,31,33,31,32,32,33,30,32,29,31,32,32,31,34,31,32,32,31,32,32,33],
            [16,12,13,15,14,12,16,13,15,12,14,16,13,18,15,17,14,14,16,12,13,15,14,12,16,13,15,12,14,16,13,18,15,17,14,14],
            [13,15,12,14,13,12,12,13,15,16,15,15,13,15,13,12,14,15,17,16,14,15,13,14,13,12,14,15,18,16,14,15,13,15,13,12],
            [13,15,12,14,13,12,12,13,15,16,15,15,13,15,13,12,14,15,17,16,14,15,13,14,13,12,14,15,18,16,14,15,13,15,13,12]
        ],
        options: {
            backgroundcirclesPoly: false,
            backgroundcirclesPolySpokes: 36,
            fillTooltips: ['Johns figures','Freds figures','Josephs figures','Ricardos figures'],
            tooltipsPositionStatic: false,
            accumulative: true,
            colors: ['#0f0','red','cyan','blue'],
            colorsStroke: 'rgba(0,0,0,0)',
            colorsAlpha: .3,
            textSize: 12,
            labels: [
                '1/1/2012','1/2/2012','1/3/2012','1/4/2012','1/5/2012','1/6/2012','1/7/2012','1/8/2012','1/9/2012','1/10/2012','1/11/2012','1/12/2012',
                '1/1/2013','1/2/2013','1/3/2013','1/4/2013','1/5/2013','1/6/2013','1/7/2013','1/8/2013','1/9/2013','1/10/2013','1/11/2013','1/12/2013',
                '1/1/2014','1/2/2014','1/3/2014','1/4/2014','1/5/2014','1/6/2014','1/7/2014','1/8/2014','1/9/2014','1/10/2014','1/11/2014','1/12/2014'
            ]
        }
    }).draw();
</script>

A non-filled Radar chart

A Radar chart that's not filled and has tooltips. The background grid has been set to be polygons instead of circles.
demos/radar-non-filled.html

<script src="RGraph.common.core.js"></script>
<script src="RGraph.radar.js"></script>

<canvas id="cvs" width="750" height="600"></canvas>

<script>
    // Create and configure the Radar chart so that it's not filled and
    // only has the labels on the north axis. The text size has been
    // slightly increased.
    new RGraph.Radar({
        id: 'cvs',
        data: [
            [8,7,6,7,8,6],
            [8,9,4,6,6,8]
        ],
        options: {
            backgroundCirclesPoly: true,
            backgroundCirclesSpacing: 30,
            colors: ['transparent'],
            axesColor: 'transparent',
            highlights: true,
            colorsStroke: ['red', 'black'],
            linewidth: 3,
            labels: ['', 'Barry', 'Gary','Dave','Paul','Rich'],
            labelsAxes: 'n',
            textSize: 16
        }
    }).trace().responsive([
        {maxWidth: null, width: 500, height: 400,parentCss:{textAlign:'center'}},
        {maxWidth: 700,  width: 300, height: 300,parentCss:{textAlign:'center'}}
    ]);
</script>

Read more

• You can find all of the demos here and lots more (approximately 1000 in total!) in the download archive