Chart.js line chart example

HTML

<main>
    <canvas id="chart" height="600" width="800"></canvas>
    <script>
        docs = [{
            "min": "11.66",
            "vol": "5925461",
            "max": "12.09",
            "_rev": "1-2117eabe1a1e60912c49dc69defd1346",
            "qtd": "499900",
            "abr": "11.91",
            "neg": "1933",
            "fch": "12.04",
            "_id": "quote-dirr3-2014-06-19"
        }, {
            "min": "11.64",
            "vol": "8945911",
            "max": "12.07",
            "_rev": "1-bf01475ef239f2f5dbb58bb0b67f2e10",
            "qtd": "762700",
            "abr": "11.98",
            "neg": "3621",
            "fch": "11.70",
            "_id": "quote-dirr3-2014-06-20"
        }, {
            "min": "11.64",
            "vol": "8945911",
            "max": "12.07",
            "_rev": "1-bf01475ef239f2f5dbb58bb0b67f2e10",
            "qtd": "762700",
            "abr": "11.98",
            "neg": "3621",
            "fch": "11.70",
            "_id": "quote-dirr3-2014-06-21"
        }, {
            "min": "11.64",
            "vol": "8945911",
            "max": "12.07",
            "_rev": "1-bf01475ef239f2f5dbb58bb0b67f2e10",
            "qtd": "762700",
            "abr": "11.98",
            "neg": "3621",
            "fch": "11.70",
            "_id": "quote-dirr3-2014-06-22"
        }, {
            "min": "11.57",
            "vol": "5216740",
            "max": "11.81",
            "_rev": "1-22079f51fa541f6777dd327298742276",
            "qtd": "445100",
            "abr": "11.73",
            "neg": "2420",
            "fch": "11.75",
            "_id": "quote-dirr3-2014-06-23"
        }, {
            "min": "11.71",
            "vol": "8866463",
            "max": "11.89",
            "_rev": "1-7df9ee3eba6624b8cd3a9478042cc8fb",
            "qtd": "750400",
            "abr": "11.75",
            "neg": "2045",
            "fch": "11.89",
            "_id": "quote-dirr3-2014-06-24"
        }, {
            "min":...

CSS

canvas {
    margin: auto;
    width: 100% !important;
    max-width: 800px;
}

CoffeeScript

chartOptions =
  animation: false
  scaleShowGridLines: true
  scaleGridLineColor: "rgba(0,0,0,.05)"
  scaleGridLineWidth: 1
  bezierCurve: true
  bezierCurveTension: 0.73
  pointDotRadius: 2
  pointDotStrokeWidth: 0
  datasetFill: true
  datasetStrokeWidth: 4
  legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"

ctx = document.getElementById('chart').getContext('2d')
chart = new Chart(ctx).Line
  labels: (p['_id'].split('-').slice(-3) for p in docs)
  datasets: [
    label: 'Max'
    data: (p['max'] for p in docs)
    strokeColor: 'rgba(0,0,0,0)'
    fillColor: 'rgba(82, 161, 106, 0.15)'
  ,
    label: 'Fechamento'
    data: (p['fch'] for p in docs)
    strokeColor: 'darkslategray'
    fillColor: 'rgba(249, 18, 18, 0.1)'
  ,
    label: 'Min'
    data: (p['min'] for p in docs)
    strokeColor: 'rgba(0,0,0,0)'
    fillColor: 'white'
  ]
, chartOptions