How to make data from ajax become X axis in Highchart?

Question

I use this Highchart.js. In the example, the axis is manually defined. However, I'd like to make my data from ajax as the X axis. This is how I process the data.

var bln     = "";
$.ajax({
    type     : "POST",
    url      : "some_function",
    async    : true,
    cache    : false,
    dataType : "json",
    data     : data,
    success  : function(response)
            {
               $.each(response.result_pakai, function(index, rows_pakai){
                    bln +=  rows_pakai.tgl+",";
               });
   })

This is the X axis part:

xAxis       : {
                 categories : [bln.slice(0,-1)],
                 crosshair  : true
              },

This is what I get:

So, how to make the data spread all over the x axis?

Answer 1

Use array instead of string,

var bln = [];
$.ajax({
    type: "POST",
    url: "some_function",
    async: true,
    cache: false,
    dataType: "json",
    data: data,
    success: function(response) {
        $.each(response.result_pakai, function(index, rows_pakai) {
            bln.push(rows_pakai.tgl);
        });
    }); xAxis: {
    categories: bln,
    crosshair: true
})

Answer 2

I do that one time, try something like that:

$.ajax({
        type:"POST",
        url:'url',
        data:{id:xx, interval:xxx},
        dataType: "json",
        success: function(response){
           favChart = Highcharts.stockChart('fav-chart-container', {
            chart: {
                type: 'area'
            },
            title: {
                text: 'XXX'
            },
            xAxis: {
                type: 'datetime',
                plotBands: response.datas
            },
            yAxis: {
                title: {
                    text: 'XXX'
                }
            },

            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            rangeSelector:{
                allButtonsEnabled: true,
                selected: 2
            },
            series: [{
                type: 'line',
                name: '2017',
                data: response.otherDatas
            }]

        });
    }
});