I am working with data that I need to be able to display by day gathered, and it's gathered over a period of years. I would like the user to be able to select a date from a calendar-type picker, and then only display points from that date.

My gut tells me that this must have been done before, but I can't find any examples anywhere. I'm tempted to dive in and just start coding stuff and making it work, but I'd like to avoid reinventing this particular wheel. Can anyone point me in a good direction?

1 Answer 1


You would need to add to your code a date picker plugin, I have used the one from UI jQuery. Here you have the API documentation.

First, you have to insert the javascript library and styles within your </head> tag:

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

Secondly, just below your map add the containing the date-picker:

  <div id='date-picker' style="top: 20px; left: 75px; bottom: auto;position: absolute">
    <p>Date: <input type="text" id="datepicker"></p>

Finally, I have used a simple createVis to build a visualization, but you can use createLayer instead. So within this fucntion add the datepicker function to extract the date, and then use it in a WHERE clause inside a SQL query:

$ ( function() {

      onSelect: function() { 
        var dateObject = $(this).datepicker({
          yearRange: "2009:2014"

        var d = dateObject,
            day = d.getDate(),
            month = d.getMonth() + 1,
            year = d.getFullYear(),
            date = year + '-' + month + '-' + day;


        var query = "SELECT * FROM railroad_data WHERE date = '" + date + "&'";



Here you have a working example.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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