Highcharts sample layouts

Thankfully, went a different way.

by Jeremy Bolanos

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<header>
    <div id="logo">Chart Portal</div>
    <div id="topNav">	<a href="#logout">logout</a> |	<a href="#add">add chart</a>

    </div>
</header>
<div id="main">
    <div id="content" class="clearfix">
        <div class="grid">
            <div id="g1-1">This is a grid</div>
        </div>
        <div class="grid">
            <div id="g2-1">This is a grid</div>
            <div id="g2-2">This is a grid</div>
        </div>
        <div class="grid">
            <div id="g3-1">This is a grid</div>
            <div id="g3-2">This is a grid</div>
            <div id="g3-3">This is a grid</div>
        </div>
    </div>
</div>

CSS

@import url('_reset.css');

/* RESET THE STYLESHEET */
 @import url('fonts.css');

/* FONT IMPORT */
 html, body {
    height: 100%;
}
body {
    font: normal 13px/14px'OpenSansRegular', Arial, sans-serif;
    background: #727272;
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM3MjcyNzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMzAzMDMwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, #727272 0%, #303030 100%);
    /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #727272), color-stop(100%, #303030));
    /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #727272 0%, #303030 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #727272 0%, #303030 100%);
    /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #727272 0%, #303030 100%);
    /* IE10+ */
    background: radial-gradient(ellipse at center, #727272 0%, #303030 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#727272', endColorstr='#303030', GradientType=1);
    /* IE6-8 fallback on horizontal gradient */
}
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content:" ";
    clear: both;
    height:...

JavaScript

// GRID
$('.grid').each(function () {
    $(this).addClass('clearfix');
    var gc = $(this).find('div').length;
    $(this).find('div').each(function () {
        $(this).css('width', 100 / gc + '%');
    });
});

// SAMPLE CHARTS
$('#g1-1').highcharts({
    chart: {
        height: 195,
        type: 'line'
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature ( °C )'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: ' °C'
    },
    legend: {
        borderWidth: 0
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
        name: 'New York',
        data: [0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
        name: 'Berlin',
        data: [0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
        name: 'London',
        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
});
$('#g2-1').highcharts({
    chart: {
        height: 195,
        type: 'line'
    },
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
       ...