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

score 1 · Accepted Answer · edited May 23 '17 at 12:03

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();

edited May 23 '17 at 12:03

Community

1
1

answered Dec 20 '13 at 20:33

Eric Bridger

3,751
1
19
34

Thank you @eric-bridger I have updated my fiddle following your previous posts: http://jsfiddle.net/nautilia/8zwGP/4/ but no luck. I imagine the problem it's related to making global the var suma. A direct sql query https://www.googleapis.com/fusiontables/v1/query?sql=SELECT%20COUNT%28%29%20FROM%201BV8lFXocqLor3Mack66ld82zSmUeHPyzKeCSK_w%20WHERE%20start%20%3E%201900%20AND%20start%20%3C%201940&key=AIzaSyAKReZYKiY2TotZ-r6q50jFObhh3U2yZMM gives me a correct reply. Can you mark my mistake? Thank you! – nautilia Dec 21 '13 at 16:13
You have getCount as a var, not a function. You need to make it a function and then call it right after you set window.suma = ... in your slider function. – Eric Bridger Dec 21 '13 at 18:02
I'm sorry for being so clumsy. I've tried two versions of the code according to your comments. But both have problems. First, http://jsfiddle.net/nautilia/8zwGP/9/ blocks the slider movement/queries and shows a reference error: `data is not defined` (in `... + data.rows[0])), ..` ) ||| 2nd, http://jsfiddle.net/nautilia/8zwGP/8/ , with the `function(data)`, doesn't show errors, but it's not getting the count. Thank you for your patience! – nautilia Dec 22 '13 at 15:52

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

1 Answers1