how can i draw dynamic highchart. the y-axis and the number of charts are dynamic from json

Question

im new in angular js and i need to use highchart in my angular page . the problem is that i must draw chart with dynamic data from json and the number of charts will be dynamic too , maybe it should draw 3 or 4 different chart from one json . I searched alot but couldnt solve my problem. this code works but show the data in one chart in different series. I need to show each series in different charts, and in this case the json send 4 data but it will be changed .

 1. List item

 $scope.draw_chart = function(){
     Highcharts.chart('container2', {
         chart:{
             type: 'spline',
             animation: Highcharts.svg, // don't animate in old IE
             marginRight: 10,
             events: {
                 load: function () {
                     var this_chart = this;
                     $scope.ws = ngSocket('ws://#');
                     $scope.ws.onOpen(function () {
                     });
                     var k = 0 ;
                     var time=0;
                     $scope.points_avarage = [];
                     $scope.ws.onMessage(function (message) {
                         listener(JSON.parse(message.data));
                         var z = JSON.parse(message.data);
                         var line_to_draw = z.result.length;
                         var j = 0 ;
                         for(i=0 ; i < line_to_draw*2 ; i+=2)
                         {
                             $scope.data_to_draw[i] = {
                                 name : z.result[j][0]['name'] ,
                                 y : z.result[j][0]['rx-bits-per-second']
                             }
                             $scope.data_to_draw[i+1] = {
                                 name : z.result[j][0]['name'] ,
                                 y : z.result[j][0]['tx-bits-per-second']
                             }

                             j++;
                         }


                    
                         this_chart.series[0].name= $scope.data_to_draw[0].name;
                         this_chart.series[1].name= $scope.data_to_draw[1].name;
                         this_chart.series[2].name= $scope.data_to_draw[2].name;
                         this_chart.series[3].name= $scope.data_to_draw[3].name;

                    
                         for(i=0; i < line_to_draw*2; i++) {
                             var x = (new Date()).getTime();  // current time
                             var y =  parseInt($scope.data_to_draw[i].y);
                             this_chart.series[i].addPoint([x, y], true, true);
                         
                          
                         }

                     });
                     var d = new Date().toTimeString();
                 }
             }
         },
         global: {
             useUTC: false
         },
         title: {
             text: 'Live data'
         },
         xAxis: {
             type: 'datetime'//,
            
         },
         yAxis: {
             title: {
                 text: 'Value'
             },
             plotLines: [{

                width: 1,
                 color: '#808080'
             }
            ]
         }
        

        plotOptions: {
             series: {
                 marker: {
                    enabled: false
                 }

             }
         },

         series: [{
            
             data: (function () {

                 var data = [],
                     time = (new Date()).getTime(),
                     i;

                 for (i = -5; i <= 0; i += 1) {
                     data.push({
                         x: time ,
                         y: 0
                     });
                 }
                 return data;
             }())
         },
             {
                 
                 data: (function () {
                     var data = [],
                         time = (new Date()).getTime(),
                         i;

                     for (i = -5; i <= 0; i += 1) {
                         data.push({
                             x: time ,
                             y: 0
                         });
                     }
                    return data;
                }())
             },
             {
                
                 data: (function () {
                     var data = [],
                         time = (new Date()).getTime(),
                         i;

                     for (i = -5; i <= 0; i += 1) {
                         data.push({
                            x: time ,
                            y: 0
                         });
                     }
                     return data;
                 }())
             },
             {
                
                 data: (function () {
                     var data = [],
                         time = (new Date()).getTime(),
                         i;

                     for (i = -5; i <= 0; i += 1) {
                         data.push({
                            x: time ,
                            y: 0
                         });
                     }
                     return data;
                 }())
             }

         ]
     });



 };

<div id="containet" ng-init="draw_chart()"></div>