ChartJS TermDemo

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by rwachtler

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<canvas width="800" height="500" id="line-chart"></canvas>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 html * {
    box-sizing: border-box;
}
ul.line-legend > li {
    margin: 10px 5px;
    display: inline-block;
}
ul.line-legend > li > span {
    padding: 10px 15px;
}

JavaScript

var data = {
    "der": [{
        "date": "16.11.2015",
            "amount": 64
    }, {
        "date": "23.11.2015",
            "amount": 14378
    }, {
        "date": "28.11.2015",
            "amount": 80
    }],
        "die": [{
        "date": "16.11.2015",
            "amount": 71
    }, {
        "date": "23.11.2015",
            "amount": 15168
    }, {
        "date": "28.11.2015",
            "amount": 82
    }],
        "a": [{
        "date": "16.11.2015",
            "amount": 27
    }, {
        "date": "23.11.2015",
            "amount": 7742
    }, {
        "date": "28.11.2015",
            "amount": 34
    }],
        "bee": [{
        "date": "16.11.2015",
            "amount": 84
    }, {
        "date": "23.11.2015",
            "amount": 13272
    }, {
        "date": "28.11.2015",
            "amount": 84
    }],
        "sed": [{
        "date": "16.11.2015",
            "amount": 68
    }, {
        "date": "23.11.2015",
            "amount": 11060
    }, {
        "date": "28.11.2015",
            "amount": 70
    }],
        "in": [{
        "date": "16.11.2015",
            "amount": 80
    }, {
        "date": "23.11.2015",
            "amount": 30464
    }, {
        "date": "28.11.2015",
            "amount": 107
    }],
        "und": [{
        "date": "16.11.2015",
            "amount": 59
    }, {
        "date": "23.11.2015",
            "amount": 10902
    }, {
        "date": "28.11.2015",
            "amount": 63
    }],
        "do": [{
        "date": "16.11.2015",
            "amount": 78
    }, {
        "date": "23.11.2015",
            "amount": 13272
    }, {
        "date": "28.11.2015",
            "amount": 84
    }],
        "article": [{
        "date": "16.11.2015",
            "amount": 48
    }, {
        "date": "23.11.2015",
            "amount": 7584
    }, {
        "date": "28.11.2015",
            "amount": 48
    }],
        "ut": [{
        "date": "16.11.2015",
            "amount": 58
    }, {
...