Axis label control

[Andy Graulund]

Hey guys!

I love the chart API and have been using it for ages. Until today, though, it has primarily been through use of the good ol' Image Charts API, and following the deprecation of that a month ago, I thought I'd step into the new world of interactive charts. I'm happy with it, and nearly everything transitions perfectly over, except for one thing: manual labels on axes. Case in point, here's an area chart of track plays per day I'm making for a site, comparing the old with the new version:

http://pongsocket.com/experiments/googlecharts.html

I decided a while ago only to have a label for every month, for simplicity. I could easily handle generating the position of the required labels myself. The old Image Charts API gave me the CHXL and CHXP arguments which could control the label values and label positions on the X-axis. There's always the possibility I'm missing some option somewhere (and I really hope that's the case), but what I've found seems like the new Interactive Charts majorly dumb down this aspect, giving no control and only five (or maybe more, if I'm feeling lucky) evenly spaced randomly placed labels. As they are, marking up random dates doesn't really contribute much to the visualisation.

The X-axis is a "continuous" axis with a "date" datatype, so apparently this is why this is occuring. I tried changing to a "discrete" axis by changing the dates to strings, which resulted in even weirder labels (showing every date and truncating it "2012...", or showing every Xth label more or less randomly dependent on the starting date). And if I use such an axis I can't get the visual dividers on the labels for some reason.

I tried using the "format" option by setting it to month and year only ("MMMM y"), which only resulted in four consecutive labels saying the same thing. Definitely not intended usage.

What gives? Is there some magic feature I can't find somewhere? Or has custom axis control simply been down-prioritized? Or is there some other alternative strategy I'm supposed to use? I'd love to get control over every visual part of my chart, including this.

Nonetheless, thanks to the team at Google for a wonderful product I've used for many years. Visualization rocks!

Andy

[asgallant]

Hmmm....If you want to duplicate the original as close a possible, you might want to use a discrete axis and custom format your axis values, perhaps something like this?

​/*  assume:
 *    data is the DataTable
 *    dates are JS Date objects
 *    chart is the chart
 *    options is an options object
 */   
var month;
var months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
];
var view = new google.visualization.DataView(data);
view.setColumns([{
    type: 'string',
    label: 'Month',
    calc: function (dt, row) {
        var date = dt.getValue(row, 0);
        if (date.getMonth() > month || (date.getMonth() == 0 && month != 0)) {
            month = date.getMonth();
            return months[month];
        }
        else {
            return null;
        }
    }
}, 1, 2, 3, 4, etc.]);

chart.draw(view, options); 

This will return month labels only on the first day of each month.

[Andy Graulund]

This is a really slow reply; I've been caught up with other projects for the last month, and only got time to return to this yesterday. 

Thank you very much for helping me out, asgallant, it is definitely looking better now, and closer to the original:

http://pongsocket.com/experiments/googlecharts-new.html

 

However, as you guys can see, the x-axis labels are still at least a little bit weird. The second label out of two is shifted down, even though there's nothing visible hindering it from being placed further up. If I force all labels to be on the same line with maxAlteration: 1, the second label simply goes away. So it seems like it's still trying to render all the other labels we gave the value null, or at least allocate space for them as if they're still there. This is obviously annoying, and it's really hard to believe that this is intended behaviour, so I'm "hoping" I'm doing something wrong.

Secondly, as you can see, the original image charts design relied a lot on having the separating lines for each labels, an entire functionality that's seemingly not present in the interactive charts for discrete axes.

It also seems silly that I can't align the labels, text-wise. Since all labels are center-aligned, anyone who should want a label placed at one of the very ends of the x-axis is just asking for trouble, because it will almost always wrap into more than one line in a really weird way, being center-aligned on an an edge of the canvas.

I hope there will be more label customization options one day. Cheers, and thanks again for the help so far, nonetheless!

[asgallant]

I came up with something that is a bit different from what you were going for, but may be functionally what you need: http://jsfiddle.net/asgallant/DsDZE/1/ 

[Andy Graulund]

Oh, that's interesting! I might use this until we some day (hopefully) get greater axis control. Perhaps if it was possible to style the annotations so that the text would be horisontal, it would look even better.

Regardless, thank you for all your efforts, you are a gentleman and a scholar. :)