compare-hatena-graph.user.js

// ==UserScript==
// @name           Compare Hatena Graph
// @namespace      http://shinten.info/
// @include        http://graph.hatena.ne.jp/*
// @require        http://gist.github.com/raw/3238/0b1c093e30415be1109f9a36664ebd56e0e7300b
// ==/UserScript==
(function () {
    var color  = 'rgb(240, 240, 240)';
    var graphs = {};
    var id = location.href.match(/graph\.hatena\.ne\.jp\/([^\/]+)\//)[1];

    var a = document.createElement('button');
    a.innerHTML = '選択したグラフを比較';
    a.addEventListener('click', function (e) {
        location.href = 'http://graph.hatena.ne.jp/detail?' + keys(graphs).map(function (g) 'id=' + id + '&graphname=' + g).join('&');
    }, false);
    a.disabled = true;
    a.style.margin = '0.5em';
    $X('//h2')[0].appendChild(a);

    $X('//div[@class="smallgraph"]').forEach(function (g) {
        g.addEventListener('click', function (e) {
            var name = $X('./a/@href', g, String).match(/\/([^\/]+?)\/$/)[1];
            var s = g.style;

            if (graphs[name]) {
                delete graphs[name];
                s.backgroundColor = 'transparent';
            }
            else {
                graphs[name] = true;
                s.backgroundColor = color;
            }

            a.disabled = keys(graphs).length < 2;
        }, false);
    });

    function keys (obj) {
        var k = [];
        for (var i in obj) {
            k.push(i);
        }
        return k;
    }

})();