ChartJS Elevation Profile

Example of how to do a simple elevation profile w/ ChartJS. Includes a flood water level.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
<canvas id="elevationProfile" width="800" height="400"></canvas>

JavaScript

var ctx = document.getElementById("elevationProfile").getContext("2d");
var data = {
    labels: ["0m", "5m", "10m", "15m", "20m", "25m", "30m"],
    datasets: [
        {
            label: "Elevation",
            fillColor: "#F0BC74",
            strokeColor: "#F08C00",
            pointColor: "#F08C00",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "#F08C00",
            data: [1.5, -0.15, 1.3, 1.4, -0.4, -1.5, -1.7]
        }
    ]
};
var options = {
    scaleShowVerticalLines: false
};
var myLineChart = new Chart(ctx).Line(data, options);