How to create inline Bar charts and Spark lines

A guide for creating a plus/minus bar chart and Spark lines.

• Inline Bar charts
• Inline Line charts (Spark lines)
• Taking it further

A previous request has been for inline plus/minus charts - much like Spark lines. 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 colorsSequential option. This is an example of an inline Bar chart:

The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. [CHART] The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

<script>
    data = [10,9,8,-8,-9,-10];
    colors = [];

    // Create the colors
    for (var i=0; i<data.length; ++i) {
        colors.push(data[i] > 0 ? '#0f0' : 'red');
    }
        
    new RGraph.Bar({
        id: 'cvs1',
        data: data,
        options: {
            xaxisPosition: 'center',
            yaxisScale: false,
            yaxis: false,
            backgroundGrid: false,
            colors: colors,
            colorsSequential: true,
            marginLeft: 2,
            marginRight: 2,
            marginTop: 2,
            marginBottom: 2,
            colorsStroke: 'rgba(0,0,0,0)',
            marginInner: 1,
            xaxisTickmarksLength: 0
        }
    }).draw();
</script>

Inline Line charts (Spark lines)

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

The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. [CHART] The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

<script>
    new RGraph.Line({
        id: 'cvs2',
        data: [4,5,3,4,2,3,5,4,5,4,3,5,3],
        options: {
            marginLeft: 1,
            marginRight: 1,
            marginTop: 1,
            marginBottom: 1,
            backgroundGrid: false,
            xaxis: false,
            yaxis: false,
            linewidth: 1,
            tickmarksStyle: null,
            yaxisScaleMax: 10,
            yaxisScale: false,
            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.