[Solved]-Have an issue with JavaScript, AJAX code displaying data-Highcharts

if i understand correctly, you would like to draw a chart for each different panelcodeui ?

if that's the case, change your code after ajax success with that :

var productions = seriedata.d;

var listpanelcodeui = productions.map(function(p){return p.panelcodeui}).filter(function(item, pos, self) {
    return self.indexof(item) == pos;
});
//listpanelcodeui : [21,11,31]

listpanelcodeui.sort();

listpanelcodeui.foreach(function(e){

   datamacro = [];

   //create a div for each panelcodeui
   $("body").append("<div id='barchart" + e + "'></div>");

   var divid = "#barchart"+e;

   //filter productions for specific panelcodeui
   var data = productions.filter(function(p){return p.panelcodeui === e});

   data.foreach(function(d){
      var yval = d.value;
      var xval = d.date;
      var x = [xval, yval];
      datamacro.push(x);
   });

  $(function () {
      $(divid).highcharts({

      ...

      })
   })
}

that's what you need to parse your data:

charts = [];
$.each(productions.map(function(el) {
    return el.panelcodeui;
  }).filter(function(el, index, arr) {
    return arr.indexof(el) === index;
  }), function(index,panelcodeui) {
    var serie = productions.filter(function(el) {
      return el.panelcodeui === panelcodeui;
    });
    $.each(serie, function(index, production) {
      datamacro.push([production.value, production.date]);
    });
    drawchart('#barchart' + panelcodeui, 'last five days', datamacro);
  });

also i made this helper function to create the charts:

function drawchart(containerid, charttitle, data) {
  charts.push(new highchart.chart({
    chart: {
      type: 'column',
      renderto: containerid
    },
    title: {
      text: charttitle
    },
    subtitle: {
      text: ''
    },
    xaxis: {
      type: "datetime",
      tickinterval: 24 * 3600 * 1000,
      labels: {
        rotation: -45,
        align: 'right'
      },
      datetimelabelformats: { // don't display the dummy year
        day: '%e. %b',
      },
      //crosshair: true
    },
    credits: {
      enabled: false
    },
    yaxis: {
      labels: {
        enabled: false
      },
      title: {
        text: null
      }

    },
    tooltip: {
      formatter: function() {
        return highcharts.dateformat('%d/%m/%y', new date(this.x)) + '<br/>' + ' in barrels: ' + this.y;
      }
    },
    plotoptions: {
      column: {
        pointpadding: 0.2,
        borderwidth: 0
      },
      series: {
        pointrange: 24 * 3600 * 1000, // one day
        pointinterval: 3600 * 1000
      }
    },
    series: [{
      //name: '',
      showinlegend: false,
      data: data,
      datalabels: {
        enabled: true,
        rotation: -90,
        color: '#ffffff',
        align: 'right',
        format: '{point.y:.1f}', // one decimal
        y: 10, // 10 pixels down from the top
        style: {
          fontsize: '13px',
          fontfamily: 'verdana, sans-serif'
        }
      }
    }]
  }));
}