Google Chart API - Answer

Your client, DataSet Corp, has asked for an interactive web based chart showing the change in revenue from 2005 until now. They would also like the overall average revenue to be reflected in the chart. Be sure to add a title, label axes, and reflect the red and black color scheme used by DSC.

by Christian Sonne

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<form>
    <fieldset>
        <legend>Play around with sizes and see when performance dips</legend>
        <input type="number" id="width" value="1300" placeholder="width">
        <input type="number" id="height" value="800" placeholder="height">
        <input type="number" id="circles" value="3" placeholder="circles">
        <input type="number" id="lines" value="3" placeholder="lines">
        <input type="button" id="run" value="run!" disabled>
    </fieldset>
</form>
<canvas id="c"></canvas>
<div id="chart_div"></div>

CSS

body {
    height: 200vh;
}
canvas {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
}

JavaScript

if (!Array.prototype.fill) {
    Array.prototype.fill = function (value) {

        // Steps 1-2.
        if (this == null) {
            throw new TypeError('this is null or not defined');
        }

        var O = Object(this);

        // Steps 3-5.
        var len = O.length >>> 0;

        // Steps 6-7.
        var start = arguments[1];
        var relativeStart = start >> 0;

        // Step 8.
        var k = relativeStart < 0 ? Math.max(len + relativeStart, 0) : Math.min(relativeStart, len);

        // Steps 9-10.
        var end = arguments[2];
        var relativeEnd = end === undefined ? len : end >> 0;

        // Step 11.
        var final = relativeEnd < 0 ? Math.max(len + relativeEnd, 0) : Math.min(relativeEnd, len);

        // Step 12.
        while (k < final) {
            O[k] = value;
            k++;
        }

        // Step 13.
        return O;
    };
}

google.load("visualization", "1", {
    packages: ["corechart"]
});
//google.setOnLoadCallback(drawChart);
function drawChart(data, title) {
    var data = google.visualization.arrayToDataTable([
        ['fps']
    ].concat(data.map(function (a) {
        return [a];
    })));

    var options = {
        title: title,
        histogram: {
            bucketSize: 1
        },
        legend: {
            position: 'none'
        },
        vAxis: {
            logScale: true
        }
    };

    var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
    chart.draw(data, options);
}

var frame, last, raf, frameTimes, ctx, points, size, w;

function benchmark(width, height, circles, lines) {
    if (raf) {
        window.cancelAnimationFrame(raf);
        raf = null;
    }
    w = new Wave(c, circles, lines);
    w.setDimensions(width, height);
    raf = w.animate();
    frame = 0;
    last = 0;
    frameTimes = [];
}

function Wave(canvas, nCircles, nLines) {
    this.canvas = canvas;
    if (this.canvas) {
        this.context =...