PATM tags

by volpeo

HTML

<script src="https://raw.github.com/gist/4198892/38c87d6519e7484994d1e71aa5f90c6525109647/sparklines.jquery.js"></script>
<h1>Évolution de l'occurence du tag dans les pitchs du startup weekend en fonction du temps</h1>

<div class="chart">
    <div class="tags"></div>
    <div class="y"><span>Time</span></div>
    <div class="x"><span>Pitches</span></div>
    <span class="start">2006</span>
    <span class="end">2012</span>
</div>

SCSS

.chart {
    font-family: arial;
    margin: 50px;
    text-transform: uppercase;
    color: #552979;
    width: 940px;
    height: 250px;
    position: relative;
    .tags {
        padding: 10px;
        position: absolute;
        top: 0;
        right: 0;
        border-left: 2px solid #552979;
        border-bottom: 2px solid #552979;
    }
    .y {
        position: absolute;
        bottom: 0;        
        text-align: center;
        width: 100%;
        span {
            background: white;
            padding: 0 10px;
        }    
    }
    .x {
        position: absolute;
        top: 42%;        
        left: -115px;
        text-align: center;
        width: 250px;
        height: 20px;
        -webkit-transform:rotate(-90deg);
        span {
            background: white;
            padding: 0 10px;
        }
    }
    .start, .end {
        position: absolute;
        font-size: 14px;
        bottom: -20px;
    }
    .start {
        left: 10px;
    }
    .end {
        right: 0;
    }
}

div.jqstooltip {
    background: #552979;
    font-sizes: 14px;
    border-radius: 6px;
    border: 3px solid white;
    text-align: center;
    span {
        font-size: 18px;
    }
}

JavaScript

$(function() {
    
    var el = [1,4,4,7,5,9,2,1];
    var labels = [
        { event: "Startup Weekend Bordeaux #1", date: "12/03/2006" },
        { event: "Startup Weekend Marseille #1", date: "12/03/2007" },
        { event: "Startup Weekend Montpellier #2", date: "12/03/2008" },
        { event: "Startup Weekend Lille #1", date: "12/03/2009" },
        { event: "Startup Weekend Marseille #2", date: "12/03/2010" },
        { event: "Startup Weekend Bordeaux #2", date: "12/03/2011" },
        { event: "Startup Weekend Marseille #3", date: "12/03/2012" },
        { event: "Startup Weekend Marseille #4", date: "12/03/2012" },
    ];
    $('.tags').sparkline(el, {
        defaultPixelsPerValue: 1,
        width: ( $('.tags').closest('.chart').width() - 30 ) + "px",
        height: ( $('.tags').closest('.chart').height() - 30 ) + "px",
        fillColor: false,
        lineColor:  "#552979",
        spotColor:  "#552979",
        chartRangeMin: 0,
        minSpotColor: "#552979",
        maxSpotColor: "#552979",
        valueSpots: {':': '#552979'},
        spotRadius: 6,
        highlightSpotRadius: 10,
        highlightSpotColor: "#552979",
        highlightLineColor: false,
        lineWidth: 2,
        tooltipFormatter: function(sparkline, options, fields) {
            return labels[fields.x].event + " <br> " + labels[fields.x].date +  " <br> <span>" + fields.y + "</span>";
        }
    });
});