1

I've an animated torque visualization in CartoDB. The Time Column of animation is date type: 2015-07-03T00:00:00Z The visualization is ok, but in the mapview the timeslider write the steps like '07/03/2015' (month/day/year). And I want the timeslider write '3 JUL' (day monthshortname).

How I can do this?

2

The Torque formatter is not editable via the CartoDB Editor at this moment. In order to edit it to show a different date format you'd need to use Javascript and the CartoDB.js library.

You can check a working example here, but the key code is:

cartodb.createVis('map', 'YOUR_TORQUE_VIZJSON_URL')
        .done(function(vis, layers) {
          //For CartoDB.js versions 3.12 an up
          var slider = vis.timeSlider;
          //For CartoDB.js version 3.11
          //var slider = vis.getOverlay('time_slider')

          slider.formatter(function(d) {

            return d.getUTCDay() + " " + d.getUTCMonth();

          })
        })
        .error(function(err) {
          console.log(err);
        });

You might want to edit the line that returns the formatted line, in this case "return d.getUTCDay() + " " + d.getUTCMonth();". This StackOverflow question could be useful in this case.

  • Hi! Thank you for the answer, but the solution does not work. This is my code: code'<script> function main() { cartodb.createVis('map', 'grupovocento.cartodb.com/u/colpisa/api/v2/viz/…) .done(function(vis, layers) { var slider = vis.getOverlay('time_slider') slider.formatter(function(d) { return d.getUTCDay() + " de Julio"; }) }) .error(function(err) { console.log(err); }); } window.onload = main; </script>code – Encarni Hinojosa Onieva Jul 22 '15 at 12:08
  • The timeslider not change, is the same (07/03/2015). In the [link] (bl.ocks.org/iriberri/df90d4d4662202894d65) example does not work, because the timeslider is (09/03/2009) (month/day/year) too and the code of the example is codereturn d.getUTCMonth()+"-"+ d.getUTCDay() + " "+ d.getUTCHours() + ":"+ d.getUTCMinutes();code The hours and the minutes does not writed. – Encarni Hinojosa Onieva Jul 22 '15 at 12:16
  • Oh, I actually updated the version of the CDB.js library without doing the appropriate change. I have fixed the example but it might be cached some time in blocks yet. For CartoDB.js versions 3.12 and up you need to get the timeslider element as var slider = vis.timeSlider;. I have updated the answer too. – iriberri Jul 22 '15 at 13:04
  • Ok, is fixed!!! The code was wrong. The correct code is var slider = vis.timeSlider; This is my new and ok code code.done(function(vis, layers) { var slider = vis.getOverlay('time_slider') vis.timeSlider.formatter(function(d) { return d.getUTCDate() + " de julio"; }) }) .error(function(err) { console.log(err); }); } window.onload = main;code Thank you so much!!! – Encarni Hinojosa Onieva Jul 22 '15 at 20:42
  • If the responses were useful, could you mark your question as answered? :) – iriberri Jul 23 '15 at 12:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.