How to get ajax to read an array of objects(Lists) from javascript and display graph for every object it reads.

Hi

I am dynamically trying to create charts using chartjs based on the number of objects my array contains. I have done the web service code and it returns the array accordingly, I am not sure how to get the ajax part of it done. See, the objects count are dynamic as we will not know during the design time how many charts will be there so that too will be automated. Basically, I would need the javasript to identify the number of objects there are in the passed array, create that number of charts in the web page and then fill up the values inside it. 

This is my C# code 

string constr = ConfigurationManager.ConnectionStrings["sqlconn"].ConnectionString;
        protected void Page_Load(object sender, EventArgs e)
        {
            LabelDate.Text = DateTime.Now.ToString("dd-MM-yyyy");
            LoadDataonDate();
        }


        //Get Data into List
        internal void LoadDataonDate()
        {
            List<SQLTables> resultslist = new List<SQLTables>();
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.Connection = con;
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.CommandText = "CheckforDateinTables";
                    con.Open();

                    SqlDataReader rdr = cmd.ExecuteReader();
                    while (rdr.Read())
                    {
                        SQLTables results = new SQLTables
                        {
                            RunningJobTblName = rdr["TableName"].ToString(),
                            TblNameShort = rdr["ShortForm"].ToString(),
                            JobOrderName = rdr["JobOrderName"].ToString(),
                        };
                        resultslist.Add(results);
                    }
                }
            }
            // resultslist.RemoveAll(a => a.RunningJobTblName.Contains(nondenoactivities.activties.Any().ToString()));
            resultslist.RemoveAll(a => nondenoactivities.activties.Contains(a.RunningJobTblName));


            AddListintoParentArr(resultslist);
        }

        [System.Web.Services.WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        internal List<ChartDataXY>[] AddListintoParentArr(List<SQLTables> mainlist)
        {
            //an array of lists
            List<ChartDataXY>[] jsonlist = new List<ChartDataXY>[mainlist.Count];
            using (SqlConnection con = new SqlConnection(constr))
            {
                //now we need to store the value of XY in the jsonlist
                for (int i = 0; i < jsonlist.Length; i++ )
                {
                    jsonlist[i] = new List<ChartDataXY>();
                    for (int j = i; j <= i; j++)
                    {
                        using (SqlCommand cmd = new SqlCommand())
                        {
                            cmd.Connection = con;
                            cmd.CommandType = CommandType.Text;
                            cmd.CommandText = $"SELECT * FROM (SELECT PlanDate, ProcessUnitID, ProcessUnitNm, TypeofValue, DTargetcumtotalUnit, DTargetcumtotal, DActualcumtotalUnit, DActualcumtotal, (DActualcumtotal - DTargetcumtotal) as yaxis, RANK() OVER(PARTITION BY ProcessUnitNm ORDER BY PlanDate DESC) as ProcessRank FROM " + mainlist[j].TblNameShort + " where TypeofValue = 'Detailed Plan' and DActualcumtotal IS NOT NULL) " + mainlist[j].TblNameShort + " where ProcessRank = 1 ORDER BY ProcessUnitNm desc, ProcessRank"; ;
                            con.Open();

                            SqlDataReader rdr = cmd.ExecuteReader();
                            while (rdr.Read())
                            {
                                ChartDataXY resultsxy = new ChartDataXY
                                {
                                    ProcessUnit = rdr["ProcessUnitNm"].ToString(),
                                    ActualMinusTotal = Convert.ToInt32(rdr["yaxis"]),

                                };
                                jsonlist[i].Add(resultsxy);
                            }
                        }
                    }
                    con.Close();

                   
                }
           
            }
            //a[0] = new List<int>();

            return jsonlist;

     
            //return jsonlist;
        }

How should I get my ajax javascript started ..it's so confusing...any guide or advice on how should I loop through the whole array. My Array actually contains list of objects.  Please help.