Bar graph in pop Up and Graphic layer in Layers List - WebApp Builder

[DavideAristipini]

Hi, I would like to understand why my popup does not show the graph, also I would like to understand why the graphicLayer is not visible in the Layer list. I enclose the code. Thank you

esempio: function (evt) {
       
        
        let that = this;
        let point = [];
        var json;

        var graphiclayer = new GraphicsLayer();

        function creatable(campo){



          var tab = "<table><tbody>";
          for(var j = 0; j < campo.length; j++){
             tab = tab + "<tr><td style='text-align: left;width: 90%;'>"+ campo[j].values.name +"</td><td style='text-align: right;'>"+ campo[j].values.value.toFixed(1) +"%</td></tr>"; 
          }
          tab = tab + "</tbody></table>";
  
          return tab;
        }


        $.getJSON("mappa.json", (data) => {         
        }).success(function(data) {

          json = data;

          
          for (var i = 0; i < json.length; i++) {

            var result = proj4('EPSG:32632', 'EPSG:4326', [json[i].geometry.x,json[i].geometry.y]);
            point[i] = new Point(result[0], result[1]);

            var symbol = new SimpleMarkerSymbol({
              "color": [250,0,250,1],
              "size": 12,
              "angle": -30,
              "xoffset": 0,
              "yoffset": 0,
              "type": "esriSMS",
              "style": "esriSMSCircle",
              "outline": {
                "color": [0,0,0,255],
                "width": 1,
                "type": "esriSLS",
                "style": "esriSLSSolid"
              }
            });
            
            symbol.setColor(Color.fromHex(json[i].attributes.Colore));


            let gra = new Graphic(point[i], symbol);
            gra.setAttributes({
              "Area": json[i].attributes.Area,
              "Categoria":json[i].attributes.Categoria,
              "CodiceIstat":json[i].attributes.CodiceIstat,
              "Combustibile":json[i].attributes.Combustibile,
              "Potenza":json[i].attributes.Potenza,
              "Totale":json[i].attributes.Totale
            })

             

            var template = new PopupTemplate({
              title: json[i].attributes.Area,
              description: "<h2>Categorie: </h2>" +creatable(json[i].attributes.Categoria) + "<h2>Combustibili: </h2>"+creatable(json[i].attributes.Combustibile) +"<h2>Potenze: </h2>"+ creatable(json[i].attributes.Potenza),
              fieldInfos: [{ //define field infos so we can specify an alias
                fieldName: "CodiceIstat",
                label: json[i].attributes.CodiceIstat
              },{
                fieldName: "Combustibile",
                label:"Combustibile"
                //label: json[i].attributes.Combustibile
              },{
                fieldName: "Potenza",
                label: json[i].attributes.Potenza
              },{
                fieldName: "Totale",
                label: json[i].attributes.Totale
              }],
              mediaInfos:[{ //define the bar chart
                caption: "",
                type:"barchart",
                value:{
                  theme: "Dollar",
                  fields:["Combustibile"]
                }
              }]
            });

            

            gra.setInfoTemplate(template);

            graphiclayer.add(gra);


          }          

          that.map.addLayers([graphiclayer]);
          
        });    
      },