How can I add radius line with miles text to a dynamic circle in ArcGIS API for JavaScript

Question

I have created a circle on the fly, but I failed to create a radius line with text showing the radius in miles. I have created a circle dynamically using the following code:

    var circle = new Circle({
      center: [31.0928, -17.9318],
      geodesic: true,
      radius: 2,
      radiusUnit: units.MILES
    });

For convenience, here is my JS Fiddle: http://jsfiddle.net/scriptstar/rL5nyt9j

All I have to do is add a radius line and text something like the picture below.

Answer 1

I have made few update to your demo and added the line and the text.

See a working demo here: http://jsfiddle.net/12nymwoL/

var map;
var graphicsArray = [];
require(["esri/map",
  "esri/toolbars/draw",
  "esri/geometry/Geometry",
  "esri/geometry/Point",
  "esri/geometry/Polyline",
  "esri/geometry/Polygon",
  "esri/graphic",
  "esri/geometry/Circle",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/TextSymbol",
  "esri/units",
  "esri/Color",
  "esri/InfoTemplate",
  "dojo/domReady!",
  "dojo/parser", "dijit/registry",
  "esri/geometry"
], function(Map, Draw,

  Geometry,
  Point,
  Polyline,
  Polygon,
  Graphic,
  Circle,
  SimpleMarkerSymbol,
  SimpleLineSymbol,
  SimpleFillSymbol,
  TextSymbol,
  units,
  Color,
  InfoTemplate, parser, registry) {
  map = new Map("map", {
    basemap: "topo",
    center: [31.0928, -17.9318],
    zoom: 13
  });

  map.on("load", function() {
    var point = new Point(31.0928, -17.9318);
    var pointAttributes = {
      city: "Harare",
      country: "Zimbabwe"
    };
    var pointInfoTemplate = new InfoTemplate("Airport");
    var pointSymbol = new SimpleMarkerSymbol();
    var pointGraphic = new Graphic(point, pointSymbol, pointAttributes).setInfoTemplate(pointInfoTemplate);
    graphicsArray.push(pointGraphic);

    var circle = new Circle({
      center: [31.0928, -17.9318],
      geodesic: true,
      radius: 2,
      radiusUnit: units.MILES
    });
    var circleSymbol = new SimpleFillSymbol().setColor(null).outline.setColor("black");
    var circleGraphic = new Graphic(circle, circleSymbol);
    graphicsArray.push(circleGraphic);

    var line = new Polyline({
      paths: [[[circle.center.x, circle.center.y], circle.rings[0][45]]]
    });
    var lineSymbol = new SimpleLineSymbol();
    var lineGraphic = new Graphic(line, lineSymbol);
    graphicsArray.push(lineGraphic);

    var textPoint = new Point((circle.rings[0][45][0] + circle.center.x)/2, (circle.rings[0][45][1] + circle.center.y)/2);
    var textSymbol = new TextSymbol("Radius: " + circle.radius + " Miles");
    var textPointGraphic = new Graphic(textPoint, textSymbol);
    graphicsArray.push(textPointGraphic);

    for (i = 0; i < graphicsArray.length; ++i) {
      map.graphics.add(graphicsArray[i]);
    }
  });
});