Jquery Display Div with Interval

You need to use $(document) instead of $('document')

$('document') will look for HTML Element with document tag, which doesn't exist.

Learn to use developer tools, Here's a good read: How to open the JavaScript console in different browsers?

Code

$(document).ready(function(){
     window.setTimeout(mytimer,5000); //You can simply pass the function reference 
     window.setTimeout(mytimer2,10000);
     window.setTimeout(mytimer3,15000);
     window.setTimeout(mytimer4,20000);
 });

Try it this way:

$(document).ready(function(){
    window.setTimeout(mytimer, 5000);
    window.setTimeout(mytimer2, 10000);
    window.setTimeout(mytimer3, 15000);
    window.setTimeout(mytimer4, 20000);
});
function mytimer(){
    $('#data1').hide();
}
function mytimer2(){
    $('#data2').hide();
}
function mytimer3(){
    $('#data3').hide();
}
function mytimer4(){
    $('#data4').hide();
}

Well you can use setInterval function too for this and once all the elements have been hidden you can clearInterval like one below:

DEMO HERE

function mytimer(elem){   
    console.log('came here');
    $(elem).hide();    
} 

$(document).ready(function(){
    var i=0;
    var interval=null;
    interval = window.setInterval(function(){
         i++;
         if(i<=$('#container').children().length)
             mytimer("#data"+i);
        else
        {
            clearInterval(interval);
            return;
        }
    },5000);
});

Try this change and so on for the rest:

window.setTimeout(mytimer, 5000);// removed quotes and `()`

Another solution using jQuery fadeOut():

$(function() {
  for (var i = 1; 4 >= i; i++)
    $('#data' + i).fadeOut(5000 * i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div id="data1">123</div>
  <div id="data2">456</div>
  <div id="data3">789</div>
  <div id="data4">012</div>
</div>

Use .delay() in jquery . No Settimeout function needed.

$('#data1').delay(5000).hide('fast');
$('#data2').delay(10000).hide('fast');
$('#data3').delay(15000).hide('fast');
$('#data4').delay(20000).hide('fast');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="data1">123</div>
<div id="data2">456</div>
<div id="data3">789</div>
<div id="data4">012</div>
</div>

There are multiple errors in your code.

1. You have used $('document').ready(function(){}), which is incorrect. document is a keyword, it shouldn't be in quotes.
2. You don't have to use multiple instance of calling $(document).ready(). You can call all your statements from a single function. You can also use $(function(){}).
3. While calling the function name inside the timeout function, you shouldn't put them under quotes. They act like keywords after you have defined them in your code. The function call inside the Timeout function shouldn't be followed by (). So it should be window.setTimeout(mytimer,5000);

Please refer the fiddle : http://jsfiddle.net/65gs8s9y/

I have modified your code which works fine now:

$(document).ready(function(){
    window.setTimeout(mytimer,5000);
    window.setTimeout(mytimer2,10000);
    window.setTimeout(mytimer3,15000);
    window.setTimeout(mytimer4,20000);
  });

  function mytimer(){   
      $('#data1').hide();    
  } 
  function mytimer2(){   
      $('#data2').hide();    
  } 
  function mytimer3(){   
      $('#data3').hide();    
  } 
  function mytimer4(){   
      $('#data4').hide();    
  }