GOOGLE API

by antouank

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<head>
    <link rel="stylesheet" type="text/css" href="CostComparer.css" x />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1.0', {
            'packages': ['corechart']
        });
        google.setOnLoadCallback(drawChart);
    </script>
    <script type="text/javascript" src="CostComparer.js"></script>
</head>
<body>
    <div id="cccontainer">
        <form id="costComparer" name="pricesForm">
            <table>
                <tr>
                    <td class="label" id="wifi">Wifi:</td>
                    <td>
                        <input type="number" name="wifiPrice">
                    </td>
                </tr>
                <tr>
                    <td class="label" id="firewall">Firewall:</td>
                    <td>
                        <input type="number" name="firewallPrice">
                    </td>
                </tr>
                <tr>
                    <td class="label" id="backup">Backup:</td>
                    <td>
                        <input type="number" name="backupPrice">
                    </td>
                </tr>
                <tr>
                    <td class="label" id="vpn">VPN:</td>
                    <td>
                        <input type="number" name="vpnPrice">
                    </td>
                </tr>
                <tr>
                    <td class="label" id="install">Installation:</td>
                    <td>
                        <input type="number" name="installPrice">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input id="submit" type="button" value="Submit" />
                    </td>
                </tr>
     ...

CSS

#cccontainer {
    width: 800px;
    height: 180px;
    padding: 40px;
    background-color: #447bc7;
}
#costComparer {
    width: 300px;
    float: left;
}
#costComparer input {
    width: 100px;
}
#result {
    width: 450px;
    float:right;
}
h1 {
    font-family: sans-serif;
    text-align: center;
    font-size: 60px;
    color: white;
}
td.label {
    font-family: sans-serif;
    color: white;
    font-size: 16px;
    display: inline-block;
    padding-right: 10px;
    float:right;
}
#chart_div {
    display: none;
    float: left;
    padding: 0px;
    margin: 0px;
}

JavaScript

$(document).ready(function () {
    var wifi;
    var firewall;
    var backup;
    var vpn;
    var install;
    var result;
    var mychart = $('#chart_div');

    var competitorCost = function (time) {
        return 3000 + (time * 300)
    };

    var ourCost = function (time) {
        return 1000 + (time * 50);
    };

    $('#submit').click(function () {
        mychart.show('slow');

        wifi = $('input[name=wifiPrice]').val();
        firewall = $('input[name=firewallPrice]').val();
        backup = $('input[name=backupPrice]').val();
        vpn = $('input[name=vpnPrice]').val();
        install = $('input[name=installPrice]').val();

        result = parseInt(wifi) + parseInt(firewall) + parseInt(backup) + parseInt(vpn) + parseInt(install);

        var resultbox = $('#result');
        var cccontainer = $('#cccontainer');

        if (resultbox.height() < 10) {
            resultbox.append('<h1>You Paid: <br />$' + result + '</h1>');
            cccontainer.animate({
                height: 500
            });
        } else {
            resultbox.empty()
            resultbox.append('<h1>You Paid: <br />$' + result + '</h1>');
            cccontainer.animate({
                height: 200
            }, 1500);
            cccontainer.animate({
                height: 500
            });
        }
    });

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Months', 'Our Costs', 'Competitor Costs'],
            ['0', ourCost(0), competitorCost(0)],
            ['6', ourCost(6), competitorCost(6)],
            ['12', ourCost(12), competitorCost(12)],
            ['18', ourCost(18), competitorCost(18)],
            ['24', ourCost(24), competitorCost(24)]
        ]);


        var options = {
            title: 'Company Performance',
            width: 600,
            height: 300
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
       ...