index.html

<style>
    h1, div {
        font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
    }

    .statustable
    {
        font-size: 16pt;
        font-weight: bold;
        text-align: center;
    }

    .statustable td
    {
        padding: 20px;
    }


</style>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/ratefunctions.js"></script>
<script type="text/javascript" src="js/stockchart.js"></script>

<script type="text/javascript">

    var globalDataLabels = {
        enabled: true,
        align: 'center',
        style: {
            fontWeight: 'bold',
            'fontSize': '12pt',
            'backgroundColor': '#ffffff',
            'overflow': 'visible'
        },
        backgroundColor: '#ffffff',
        y: -30,
        x: 5,
        verticalAlign: 'top',
        crop: true
    };

    $(function () {

        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        var chart;

        var colors = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9',
            '#f15c80', '#e4d354', '#8085e8', '#8d4653', '#91e8e1'];

        $('#belieber').highcharts(stockChart("Belieber", colors[0], rateFunction(20, 200, 10, 180, $('#belieber-status'))));
        $('#mcdonalds').highcharts(stockChart("Mc Donalds", colors[1], rateFunction(50, 1000, 10, 600, $('#mcdonalds-status'))));
        $('#planpi').highcharts(stockChart("Plan Pi", colors[2], rateFunction(800, 1000, 10, 300, $('#planpi-status'))));
        $('#bobtheentrepreneur').highcharts(stockChart("Bob the Entrepreneur A/S", colors[3], rateFunction(50, 1000, 10, 600, $('#bobtheentrepreneur-status'))));
        $('#turneragency').highcharts(stockChart("Turner Agency", colors[4], rateFunction(50, 1000, 10, 600, $('#turneragency-status'))));
    });

</script>
<div style="width: 100%; text-align: center; font-size: 20pt;">
    <h1>Aktiekurser</h1>
</div>

<table width="100%">

    <tr>

        <td>
            <div id="planpi" style="min-width: 310px; width: 500px; height: 50%; margin: 0 auto">
            </div>
        </td>

        <td>
            <table class="statustable" width="100%">
                <tr>
                    <td>
                        <div style="font-weight: normal">Plan Pi</div>
                        <div id="planpi-status"></div>
                    </td>
                    <td>
                        <img src="pi_usa%20copy.png" alt="Pi USA" />
                    </td>
                    <td>
                        <div style="font-weight: normal">Belieber</div>
                        <div id="belieber-status"></div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div style="font-weight: normal">Mc Donalds</div>
                        <div id="mcdonalds-status"></div>
                    </td>
                    <td>
                        <div style="font-weight: normal">Bob the Entrepreneur A/S</div>
                        <div id="bobtheentrepreneur-status"></div>
                    </td>
                    <td>
                        <div style="font-weight: normal">Turner Agency</div>
                        <div id="turneragency-status"></div>
                    </td>
                </tr>
            </table>
        </td>

        <td>
            <div id="belieber" style="min-width: 310px; width: 500px; height: 50%; margin: 0 auto">
            </div>
        </td>

    </tr>

    <tr>

        <td>
            <div id="mcdonalds" style="min-width: 310px; width: 500px; height: 50%; margin: 0 auto">
            </div>
        </td>

        <td>
            <div id="bobtheentrepreneur" style="min-width: 310px; width: 500px; height: 50%; margin: 0 auto">
            </div>
        </td>

        <td>
            <div id="turneragency" style="min-width: 310px; width: 500px; height: 50%; margin: 0 auto">
            </div>
        </td>

    </tr>

</table>