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 Nguyen Son

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<div id="chart"></div>

JavaScript

/**
        * transform a number of seconds to [ hour, min, sec ] array
        */
        function sec2array(d) {
            d = Math.round(parseFloat(d));
            var h = Math.floor(d / 3600);
            var m = Math.floor((d % 3600) / 60);
            var s = d % 60;
            return [ h, m, s ];
        }

        /**
        * represents a number of seconds in 'HH:ii:ss' format
        */
        function fmtInterval(d) {
            var arr = sec2array(d);
            return (arr[0] < 10 ? '0' : '') + arr[0]
                + ':' + (arr[1] < 10 ? '0' : '') + arr[1]
                + ':' + (arr[2] < 10 ? '0' : '') + arr[2];
        }

        /**
        * let's draw a sample chart with random data
        */

function drawChart() {
            var formatter = new google.visualization.DateFormat({ pattern: 'dd/MM HH:mm' });

            var data = new google.visualization.DataTable({
                cols: [
                    { id: 'stamp', label: 'Time', type: 'datetime' },
                    { id: 'viewers', label: 'Viewers', type: 'number' },
                    { id: 'avgtime', label: 'Avg time', type: 'timeofday' },
                ],
            }, 0.6);

            // Making a Date object to iterate through the period
            var dd = new Date();
            dd.setDate(dd.getDate()-1);
            dd.setHours(0);
            dd.setMinutes(0);
            dd.setSeconds(0);
            dd.setMilliseconds(0);

            for(var i = 0;i < 1440;i += 30) {
                var avgtime = Math.random() * 1800; // 0 ... 30 minutes
                data.addRow([
                    // first column: the time scale
                    { v: new Date(dd), f: formatter.formatValue(dd) }, // formatted value does not work

                    // second column: random viewers count
                    Math.floor(Math.random() * 50),

                    // third column: average watch duration in form of timeofday. It can not be over 30 minutes, so I can...