Rainfall graph

Example graph created using Rickshaw library for Intro to JavaScript

by AnnaGerber

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.3.0/rickshaw.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/rickshaw/1.3.0/rickshaw.min.js"></script>
<div id="chart"></div>

<div id="legend"></div>

CSS

#legend {
    margin-top:1em;
}

JavaScript

// JSON data for the rainfall chart
var chartData = [
    {
        name: 'NSW & ACT',
        data: [ 
            { x: 2003, y: 484 },
            { x: 2004, y: 493 },
            { x: 2005, y: 498 }
        ], 
        color: 'steelblue'
    }, {    
        name: 'NT',
        data: [ 
            { x: 2003, y: 686 }, 
            { x: 2004, y: 637 },
            { x: 2005, y: 477 } 
        ], 
        color: 'orange'
    },
    {
        name: 'QLD',
        data: [
            { x: 2003, y: 518 }, 
            { x: 2004, y: 610 },
            { x: 2005, y: 478 } 
        ],
        color: 'maroon'
    },
    {
        name: 'SA',
        data: [
            { x: 2003, y: 260 }, 
            { x: 2004, y: 214 },
            { x: 2005, y: 206 } 
        ],
        color: 'red'
    },
    {
        name: 'TAS',
        data: [
            { x: 2003, y: 1227 }, 
            { x: 2004, y: 1223 },
            { x: 2005, y: 1250 } 
        ],
        color: 'green'
    },
    {
        name: 'VIC',
        data: [
            { x: 2003, y: 611 }, 
            { x: 2004, y: 576 },
            { x: 2005, y: 616 } 
        ],
        color: 'darkblue'
    },
    {
        name: 'WA',
        data: [
            { x: 2003, y: 388 }, 
            { x: 2004, y: 463 },
            { x: 2005, y: 306 } 
        ],
        color: 'black'
    }
];