« Previous       Home page demos       Next »

A dark and graduated blue Bar chart

A dark and graduated Bar chart. The colors are black at the bottom of the bars graduating to blue towards the top. The background grid is customised too with the horizontal gridlines having been disabled. Nor are there any labels. It uses the grow() effect (as you can see!).

Another thing to note here is the complete lack of any labels. You don't always need to have labels as the meaning may be clear without them - perhaps having a title elsewhere on the page. I wouldn't imagine that these use cases are very common though - with most cases requiring at least a scale in order to make sense.

This goes in the documents header:
<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.bar.js"></script>
Put this where you want the graphic to show up:
<div style="width: 600px; height: 300px" id="chart-container"></div>
This is the code that generates the graphic:
<script>
    data = [6,4,5,5,7,4,8];

    var bar = new RGraph.SVG.Bar({
        id: 'chart-container',
        data: data,
        options: {
            hmargin:15,
            xaxis: false,
            yaxis: false,
            yaxisLabels: false,
            backgroundGridColor: '#999',
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            colors: ['Gradient(#6969FF:#6969FF:#000)']
        }
    }).wave();
</script>