google.load('visualization', '1', {'packages':['barchart']});
google.setOnLoadCallback(init);


function init() {
    var query = new google.visualization.Query('https://app.transifex.com/_/charts/js/otf/open-keychain/json/strings/');
    query.send(handleResponse);
    //drawToolbar();
}

function handleResponse(response) {
    if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();

    container = document.getElementById('txchart-open-keychain-strings');
    container.style.textAlign = "center";

    chart_div = document.createElement('div');
    chart_div.style.width = "100%";
    chart_div.style.height = "210px";

    link_tx = document.createElement("a");
    link_tx.target = "_blank";
    link_tx.href = "https://app.transifex.com/";
    link_tx.title = "See more information on Transifex.com";
    link_tx.innerHTML = '<img border="0" src="https://cdn.transifex.com/txc/static/charts/images/tx-logo-micro.c5603f91c780.png"/>';

    link_resource = document.createElement("a");
    link_resource.target = "_blank";
    link_resource.style.textDecoration = "none";
    link_resource.style.color = "black";
    link_resource.style.fontSize = "66%";
    link_resource.href = "https://app.transifex.com/otf/open-keychain/strings/";
    link_resource.innerHTML = "Top translations: OpenKeychain » Strings";


    container.innerHTML = "";
    container.appendChild(link_resource);
    container.appendChild(chart_div);
    container.appendChild(link_tx);

    var chart = new google.visualization.BarChart(chart_div);
    chart.draw(data, {
        isStacked : true,
        min : 0,
//        title : "Project: OpenKeychain >> ",
        legend : "none",
        titleColor : '333333',
        colors : ['#B7E1FF', '#26D9CE', '#F4F6FB'],
    });
}