score:0

Accepted answer

You need to read up on Ajax, and also on jQuery.

Try this first

function chooseCategory(mat_id){
  $.post("test.php",{"id":mat_id},function(data) {
    window.console && console.log(data);
  });
}

then when you are happy try the highcharts which has to be loaded of course

function chooseCategory(mat_id){
  $.post("test.php",{"id":mat_id},function(data) {
    $('#container3').highcharts({
     series: [{  "type":"line", "name": "#numbers", "data": data }]
    });
  });
}

score:1

Since the Ajax call is asynchronous, you need to wait for it to complete before loading Highcharts. To do this you typically use a callback. Put the chart-loading code into a function "loadCharts(data)", and invoke that from inside the Ajax handler. Something like this:

function chooseCategory(mat_id){
    // ...

    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            data_ajax = ajax.responseText;
            alert(data_ajax);
            loadCharts(data_ajax);
        }
    };
}

function loadCharts(data_ajax)
    $('#container3').highcharts({ ... });
}

score:1

Just define a function which calles highcharts.

var drawChart = function(data_ajax) {
   $('#container3').highcharts({
      ...
      ...
      series: [{  type: 'line', name: '#numbers：', data: data_ajax
   });
}

And then instead of alert the data simply call the function:

drawChart(data_ajax)

Related Query

More Query from same tag