Show the navigation menu
RGraph: HTML5 charts library

How to create a plus/minus Bar chart & Sparklines

A previous request has been for inline plus/minus charts - much like sparklines. Both of these are possible by using the configuration options available in order to make the chart appear as desired. The main thing clearly is to use a smaller canvas size in order to make the chart fit inline with your text.

Inline Bar charts

Here the colors are defined by looping through the data beforehand to determine whether a value is positive or negative. When this is ascertained the color can be set appropriately and also the chart.colors.sequential option. This is an example of an inline Bar chart:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in lobortis leo. In cursus, tortor et convallis suscipit, nibh tellus ultrices mi, sed lobortis nibh sem eu diam. Nam sit amet massa arcu, vitae tempus libero. Ut luctus magna tempor justo posuere cursus. Donec ante enim, iaculis eget viverra non, sodales vel ligula. Donec nibh ligula, ultrices ac pretium quis, fringilla vel sem. Donec luctus dignissim nisi, ac vulputate velit pellentesque eget. [CHART] Fusce aliquet est quis diam vulputate bibendum. Aenean feugiat sapien et est sollicitudin sit amet imperdiet eros sollicitudin. Praesent mattis semper elementum. Nulla commodo pretium risus, et aliquet massa lacinia in. Aliquam tristique rutrum arcu, et laoreet dolor porttitor et. Morbi at tellus id nisi iaculis aliquam a congue neque. Duis sit amet mauris libero. Nulla ut nisi quam. Praesent scelerisque tortor id tellus porttitor consectetur

<script>
    var data = [10,9,8,-8,-9,-10];
    var colors = [];
    
    /**
    * Create the colors
    */
    for (var i=0; i<data.length; ++i) {
        colors.push(data[i] > 0 ? '#0f0' : 'red');
    }

    var bar = new RGraph.Bar({
        id: 'cvs1',
        data: data,
        options: {
            xaxispos: 'center',
            ylabels: false,
            noyaxis: true,
            background: {
                grid: false
            },
            colors: {
                self: colors,
                sequential: true
            },
            gutter: {
                left: 2,
                right: 2,
                top: 2,
                bottom: 2
            },
            strokestyle: 'rgba(0,0,0,0)',
            hmargin: 1,
            numxticks: 0
        }
    }).draw()
</script>

Inline Line charts (sparklines)

With Sparklines the process is much the same except without the loop for the colors.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus in lobortis leo. In cursus, tortor et convallis suscipit, nibh tellus ultrices mi, sed lobortis nibh sem eu diam. Nam sit amet massa arcu, vitae tempus libero. Ut luctus magna tempor justo posuere cursus. Donec ante enim, iaculis eget viverra non, sodales vel ligula. Donec nibh ligula, ultrices ac pretium quis, fringilla vel sem. Donec luctus dignissim nisi, ac vulputate velit pellentesque eget. [CHART] Fusce aliquet est quis diam vulputate bibendum. Aenean feugiat sapien et est sollicitudin sit amet imperdiet eros sollicitudin. Praesent mattis semper elementum. Nulla commodo pretium risus, et aliquet massa lacinia in. Aliquam tristique rutrum arcu, et laoreet dolor porttitor et. Morbi at tellus id nisi iaculis aliquam a congue neque. Duis sit amet mauris libero. Nulla ut nisi quam. Praesent scelerisque tortor id tellus porttitor consectetur

<script>
    var line = new RGraph.Line({
        id: 'cvs2',
        data: [4,5,-3,-4,2,-3,5,4,5,-4,-3,-5,3],
        options: {
            gutter: {
                left: 1,
                right: 1,
                top: 1,
                bottom: 1
            },
            background: {
                grid: false
            },
            axis: {
                color: '#aaa'
            },
            numxticks: 0,
            numyticks: 0,
            noyaxis: true,
            xticks: 1.001,
            linewidth: 1,
            tickmarks: null
            ymax: 10,
            shadow: false
        }
    }).draw()
</script>

Taking it further

One option if you're finding the charts too small, or you wish to enlarge them when clicked is to add an anchor (link) around the canvas so that when clicked a ModalDialog is shown with a larger version of the chart - a detail view if you like.