A Bar chart of my favourite dog breeds

How could you resist such a gorgeous face?! Here's an amusing chart that shows you exactly what your favourite dog breed should be. This type of dog was featured in the Tom Hanks film Turner and Hooch - A funny film from the 1980's that's definitely worth watching.

The chart demonstrates the sketch variant (add variant: 'sketch' to your chart configuration) that the Bar chart has that gives the chart more of a "hand-drawn" look. The background image depicts a French Mastiff dog that was added using the backgroundImage property.

The font has been set to Comic sans MS so that it goes well with the style of the chart.

The chart has been given a large bottom margin so that the slogan on the background image is clearly visible.

To get the chart looking good on smaller screens the responsive function changes the margins, updates the width and height of the background image and the css float is removed.

This goes in the documents header:

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

Put this where you want the chart to show up:

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

This is the code that generates the chart - it should be placed AFTER the canvas tag(s):

<script>
    // This is used to give the background image the correct height and
    // width
    canvas = document.getElementById('cvs');
    
    // Configure the Bar chart. It has a sketchy appearance because of the
    // variant property.
    new RGraph.Bar({
        id: 'cvs',
        data: [99,10],
        options: {
            colors: ['#000'],
            labelsAbove: true,
            labelsAboveOffsety: 5,
            labelsAboveSpecific: ['French Mastiff', 'Umm... whatever...'],
            variant: 'sketch',
            variantSketchVerticals: true,
            yaxisLabelsCount: 1,
            
            marginTop: 50,
            
            // The font that's used can be set to any thats available
            // to the browser - here the Comic Sans MS font fits with
            // the sketchy style
            textFont: 'Comic sans MS',
    
            backgroundGrid: false,
            textColor: '#000',
            
            // The background image properties. Give the URL of the image (which should
            // be held on the same server as your website) and the X/Y/width/height
            // properties. Also set the image to be semi-transparent.
            backgroundImage: '../images/i-love-my-dog-de-bordeaux.png',
            backgroundImageX: 0,
            backgroundImageY: 0,
            backgroundImageAlpha: 0.5,
    
            linewidth: 5,
            yaxis: false,
            xaxisColor: '#000',
            xaxisLinewidth: 5,
            yaxisScaleUnitsPost: '%',
            responsive: [
                {maxWidth: null, width: 600, height: 250,options:{marginLeft: 150,marginBottom: 60,marginInner: 45,labelsAboveSize: 24,textSize: 20,backgroundImageW: 600,backgroundImageH: 250},parentCss:{'float':'right',textAlign:'none'}},
                {maxWidth: 800, width: 400, height: 200,options:{marginLeft: 50,marginBottom: 40,marginInner: 15,labelsAboveSize: 16,textSize: 10,backgroundImageW: 400,backgroundImageH: 200},parentCss:{'float':'none',textAlign:'center'}}
            ]
        }
    }).wave({frames: 120});
</script>