Problem with charts

Hello guys,

I'm having a problem creating a chart.

My goal is to have a chart with all hours of the day even if there are no records on some hours.

The actual state of the chart is in the image chart1.png

The problem tha i'm havig is that all hours that have data appear in the end of the chart!!! That makes no sense ... when i run the query its ok(query1.png) !  and in the page JavaScript the order ir ok to:

xAxis: { title: {text: ''},categories:['0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '16:00', '17:00']},
  yAxis: outsystems.ext({title: {text: ''}}, {allowDecimals: false}),
  series: [{name: ' ', data: [{y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:0}, {y:null}, {y:null}]}, {name: 'Canal C', data: [{y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:1}, {y:null}]}, {name: 'Staff', data: [{y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:2}, {y:2}]}, {name: 'T2', data: [{y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:null}, {y:1}, {y:null}]}],

Can someone please help me??? I dont know what to do anymore!!!



The other screen.

Thank you!