Add a COUNT chart to a queried map visualization in Fusion Tables

Question

I have added a slider to a Fusion Tables map, that generates a query: http://jsfiddle.net/nautilia/8zwGP/1/

slide: function (event, ui) {
    document.getElementById("slider-value").innerHTML = "año " + ui.value;
    var suma = "start > 1900 AND start <" + ui.value + " AND end >" + ui.value;
    capa.setOptions({
        query: {
            select: "col8",
            from: "1BV8lFXocqLor3Mack66ld82zSmUeHPyzKeCSK_w",
            where: suma
        }
    });
}

It's a list of cinemas in a city. The slider queries the table to know which cinemas are open in the selected year.

I want to add an element next to the map, telling how many cinemas (points) are open (showed in the map) in that year.

I have done several failed attempts, trying to mix code from Fusion Tables API https://developers.google.com/fusiontables/docs/sample_code?hl=ca&csw=1#gviz and from this tutorial http://michelleminkoff.com/2012/02/05/how-to-count-queried-rows-in-a-google-fusion-table/ with my code.

I don't really know how to obtain the query output (COUNT()) for the ui.value (year) using the existent code. And neither I'm able to show it, as a bar or simply the number.

I'm puzzled and can't achieve the right code. Any help will be thanked.

Thank you in advance

Answer 1

You need to get the count, based on your slder query (or your var suma, which you'll need to make a global) asynchronously via another jsonp call. I answered this a while ago at: https://stackoverflow.com/a/16217367/1211981 There is no way to get this value via your slider handler. You'll need a separate function FT API call to get the count and set it after the fact.

var count_qry = 'select count() from "1BV8..." where ' + suma;

See this answer https://stackoverflow.com/a/9778985/1211981 and look for the getFTCount() function. Note: this code predates the FT API 1.0 so the AJAX end points have changed.

Adding code re: my comment below. Change this:

var getCount = $.get(queryurl,

    function (data) {
        try {
     .. .

To:

function getCount(){
   $.get(queryurl,
    . . .
}

Then add getCount() after this line.

window.suma = "start > 1900 AND start <" + ui.value + " AND end >" + ui.value;
getCount();