jquery - After adding callback function, why is my variable modified inside it unaltered?

I know it is asynchronicity, but I have followed the steps of adding callback function Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference but I can only access the changes inside the callback function. Here is my code snippet. Please help

function callback(point) {

       for (i = 0; i < point.length; i++) {
           myDate[i] = point[i].date_time;
           myValue[i] = point[i].my_value;
       }


       for (j = 0; j < myDate.length; j++) {
           var temp = new Array(myDate[j], myValue[j]);
           mySeries[j] = temp;
       }
       alert("MYSERIES in scope:  " + mySeries); //defined

   }
   alert("MYSERIES out scope:  " + mySeries); // undefined
   getAllMessagesforChart(callback);


   function getAllMessagesforChart(callback) {
                var data = @Html.Raw(JsonConvert.SerializeObject(this.Model))


        $.ajax({
            url: '/messages/GetMessagesforChat',
            data: {
                id: data.id,
            },

            contentType: 'application/html ; charset:utf-8',
            type: 'GET',
            dataType: 'JSON'

        }).success(function (data) {
            callback(data);
        }).error(function (e) {
            alert("error " + e)
        })     


   }