X axis hasn't margin after setData

[thathsara404]

actually i requested data from the server by angular http request and it is getting data successfully. inside the successCallback i called setData for morris Line Chart.

$http({
        method: 'POST',
        url: '<?php echo base_url(); ?>login/fetch_results',
        headers: {},
        data: FormData
        }).then(function successCallback(response) {
                alert(JSON.stringify(response.data.result));
            console.log(response.data.result);
            chart.setData(response.data.result);
                }, function errorCallback(response) {
            console.log("Error in Access Fetching Exams marks : "+response);
            });

Also i have initialized the chart in this way

var chart = new Morris.Line({
  element: 'myfirstchart',
  data: [{"marks":"60","date":"2017-01-12"},{"marks":"70","date":"2017-1-19"},        {"marks":"80","date":"2017-3-1"}],
  xkey: 'date',
  ykeys: ['marks'],
  labels: ['Marks'],
  goals: [75.0, 55.0 ],
  postUnits: '%',
  goalLineColors: ['#45a577', '#d3cc00'],
  parseTime:false,
  pointSize: 4,
  xLabelAngle: 45,
  xLabelMargin: 10,
  behaveLikeLine: true,
  lineWidth: 3,
  resize: true,
  smooth: true
});

but before calling setData chart is appear pretty nicely, after calling the function chart x axis doesn't show margins between points. so all the data appear in single vertical line. Can you help guys?

and the other thing is when i move initialization into the http success, it gives same error.

[thathsara404]

Oh. really !!! i just solved it by myself, the thing is i called the http request in page load. but after i setting a button click it worked perfectly.