Responsive Charts

by AaronLayton

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://www.flotcharts.org/javascript/jquery.flot.min.js"></script>
<div class="container">
    <div class="row">
        <div class="span12">
            <div id="line-chart" class="chart-holder"></div> <!-- /#bar-chart -->
        </div>
    </div>
</div>

CSS

.chart-holder {
    width: 100%;
    height: 325px;
}

JavaScript

var Theme = function () {
    
    var chartColors;
    
    // Black & Orange
    //chartColors = ["#FF9900", "#333", "#777", "#BBB", "#555", "#999", "#CCC"];
    
    // Ocean Breeze
    chartColors = ['#94BA65', '#2B4E72', '#2790B0', '#777','#555','#999','#bbb','#ccc','#eee'];
    
    // Fire Starter
    //chartColors = ['#750000', '#F90', '#777', '#555','#002646','#999','#bbb','#ccc','#eee'];
    
    // Mean Green
    //chartColors = ['#5F9B43', '#DB7D1F', '#BA4139', '#777','#555','#999','#bbb','#ccc','#eee'];
    
    return { 
        chartColors: chartColors
    };
    
}();

var Charts = function () {
    
    var colors = Theme.chartColors;
    
    return { 
        vertical: vertical,
        horizontal: horizontal,
        pie: pie,
        donut: donut,
        line: line
    };
    
    function vertical (target, data) {
        var options = {
            colors: colors,
    
            grid: {
                hoverable: true, 
                borderWidth: 2
            }, 
            bars: {
                horizontal: false, 
                show: true, 
                align: 'center', 
                lineWidth: 0,
                fillColor: { colors: [ { opacity: 1 }, { opacity: 0.5 } ] }
            }, 
            legend: {
                show: true
            },
            
            tooltip: true,
            tooltipOpts: {
                content: '%s: %y'
            },
        };
    
        var el = $(target);
        
        if (el.length) {
            $.plot(el, data, options );
        }
    }
    
    function horizontal (target, data) {
        var options = {
                    colors: colors,

                    grid: {
                        hoverable: true, 
                        borderWidth: 2
                    }, 
                    bars: {
                        horizontal: true, 
                        show: true, 
                        align: 'center', 
                        barWidth: .2,
       ...