get custom output for use in convase js from php server

i have a table in worodpress site and output from this table is like :

{
  { [line1]=> array(3) {{'x'=>'5' , 'y'=>'8},{'x'=>'5' , 'y'=>'8},{'x'=>'5' , 'y'=>'8}},
  { [line2]=> array(3) {{'x'=>'5' , 'y'=>'8},{'x'=>'5' , 'y'=>'8},{'x'=>'5' , 'y'=>'8}}
}

i want show chart by this data and needed output is like :

<script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
      {
        axisX: {
          title: "Thick Axis line",
          lineThickness: 6

        },
        data: [{
          type: "line",
          title: 'line1',
          dataPoints: [{ x: 5, y:8 }, { x: 5, y: 8 }]
        }, {
          type: "column",
          title: 'line2',
          dataPoints: [{ x: 5, y: 8 }, { x: 5, y: 8}]
        }
        ]
      });

    chart.render();
  }
</script>

how convert php output to custom needed data?

Of course, the number of lines is different and can be from one line to 20 lines