Customizing google charts

Question

I want to draw a bar-chart with dual y-axis and two value series. The questions are:

how to customize x-axis labels? I want to see datetime in format of 'dd/MM HH:mm:ss', but hAxis.format does not work in google.charts.Bar
how to customize the tooltip formats? It displays in locale format according to browser settings, but I want to use my own strict format. For example, 'dd/MM HH:mm:ss' for x-axis; Tooltip tunings as for google.visualization.* does also not work with google.charts.Bar

Note, customizing for axis labels and tooltips are working Ok on google.visualization.*, but I need for a column chart with dual y-axis, that only realizable with google.charts.Bar

Here is the sample, drawing a chart with random data. All custom javascripts are inline. Bars are represents periods of 30 minutes.

Here is the JS code:

        /**
        * 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 do it in such kind
                    sec2array(avgtime),
                ]);

                // increase datetime by 30 minutes
                dd.setMinutes(dd.getMinutes() + 30);
            }

            var options = {
                width: 1000, height: 300,
                title: 'TV channel load chart',
                tooltip: { isHtml: true },
                focusTarget: 'category',
                bars: 'vertical',
                series: [
                    { axis: 'viewers' },
                    { axis: 'avgtime' }
                ],
                hAxis: {
                    format: 'dd/MM HH:mm'
                },
                axes: {
                    y: {
                        viewers: { label: 'Viewvers' },
                        avgtime: { side: 'right', label: 'Avg time' }
                    }
                },
            };

            var chart = new google.charts.Bar(document.getElementById("chart"));
            chart.draw(data, options);
        }

        // load google visualization API. Draw the chart when load complete
        google.load("visualization", "1.1",
            { packages: [ "corechart", "bar" ],
            callback: drawChart }
        );

Henrik Aronsson Henrik Aronsson · Accepted Answer · 2015-09-24T05:55:26

Reading the information provided by Google:

Using google.charts.Bar.convertOptions() allows you to take advantage of certain features, such as the hAxis/vAxis.format preset options.

Your code looks like

chart.draw(data, options);

and changing it to

chart.draw(data, google.charts.Bar.convertOptions(options));

makes everything work as expected.

Link to my fiddle

Customizing google charts

2 Answers