<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Color Ramp</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
}
#info {
position: absolute;
left: 0;
bottom: 0;
padding: 10px;
background-color: #ddd;
font: 14px Segoe UI;
width: 200px;
text-align: center;
border-radius: 0 10px 0 0;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://js.arcgis.com/3.17/"></script>
<script>
var map, collegeLyr, legend, renderer;
require([
"esri/map", "esri/geometry/Circle","esri/dijit/Legend","esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color",
"esri/graphic", "esri/layers/GraphicsLayer", "esri/geometry/Polygon", "esri/layers/LabelClass", "esri/symbols/Font",
"dojo/dom", "dojo/dom-attr", "dojo/domReady!"
], function (Map, Circle, Legend,FeatureLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, Color,
Graphic, GraphicsLayer, Polygon, LabelClass, Font,
dom, domAttr
) {
var font = new Font("100pt", Font.STYLE_ITALIC,
Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Courier");
map = new Map("map", {
zoom: 15,
center: [103.854, 1.286],
basemap: "gray"
});
var color = "#45bbc2";// "#45bbc2",
lum = 0.1;
var renderer = new SimpleRenderer({
symbol: new SimpleFillSymbol({
outline: { // makes the outlines of all features consistently light gray
color: "lightgray",
width: 0.5
}
}), // the default symbol defined in step 1
label: "% population in poverty by county", // label for the legend
visualVariables: [{
type: "colorInfo", // indicates this is a color visual variable
field: "propertyVal", // total population in poverty
normalizationField: "propertyVal", // total population
minDataValue: 10, // features where < 10% of the pop in poverty
maxDataValue: 40, // features where > 30% of the pop in poverty
colors: ["#FFFCD4", "#810042"] // will be assigned this color (beige)
// features with values between 0.1 - 0.3 will be assigned
// a color on a ramp between beige and purple proportional
// to where the value falls between 0.1 and 0.3
}]
});
//var layer = new FeatureLayer('http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer',{});
var layer = new GraphicsLayer();
layer.id = 'graphicLr1';
var ImageName = "Raffles.jpg";
var polygonSymbol = new SimpleFillSymbol();
var MarinaBay = new Polygon({
"rings": [
[
[103.851, 1.280],
[103.852, 1.282],
[103.854, 1.287],
[103.854, 1.286],
[103.854, 1.281],
[103.858, 1.278],
[103.854, 1.278],
[103.852, 1.279],
[103.851, 1.280]
]
]
});
var Raffles = new Polygon({
"rings": [
[
[103.85127, 1.28396],
[103.84831, 1.28940],
[103.84607, 1.28608],
[103.84820, 1.28242],
[103.84879, 1.28049],
[103.85127, 1.28396]
]
]
});
var Shenton = new Polygon({
"rings": [
[
[103.846, 1.273],
[103.848, 1.276],
[103.849, 1.281],
[103.851, 1.280],
[103.851, 1.278],
[103.850, 1.276],
[103.850, 1.274],
[103.846, 1.273]
]
]
});
var Marina = new Polygon({
"rings": [
[
[103.860, 1.299],
[103.855, 1.291],
[103.857, 1.290],
[103.862, 1.289],
[103.863, 1.291],
[103.863, 1.293],
[103.863, 1.296],
[103.860, 1.299],
]
]
});
var s = new SimpleFillSymbol({
outline: { // makes the outlines of all features consistently light gray
color: "lightgray",
width: 0.5
}
});
var graphic1 = new Graphic(Shenton, s);
graphic1.setAttributes({
propertyId: 1,
propertyVal: 10
});
var graphic2 = new Graphic(Raffles, s);
graphic2.setAttributes({
propertyId: 2,
propertyVal: 20
});
var graphic3 = new Graphic(MarinaBay, s);
graphic3.setAttributes({
propertyId: 3,
propertyVal: 30
});
var graphic4 = new Graphic(Marina, s);
graphic4.setAttributes({
propertyId: 4,
propertyVal: 40
});
console.log('g1 :' + layer);
layer.add(graphic1);
layer.add(graphic2);
layer.add(graphic3);
layer.add(graphic4);
//gl.setRenderer(renderer);
//map.addLayer(gl);
var legend = new Legend({
map: map,
layerInfos: [{ title: "test tr", layer: layer }]
}, "legend");
layer.setRenderer(renderer);
map.addLayer(layer);
layer.on("load", function(){
console.log('lr load');
legend.startup();
});
$( document ).ready(function() {
$('#graphicLr1_layer').load(function()
{
console.log('jq lr load');
layer.setRenderer(renderer);
map.addLayer(layer);
legend.startup();
});
});
});
</script>
</head>
<body>
<div id="map"></div>
<div id="info"><div id="legend"></div></div>
</body>
</html>
Your original question stated you want a color ramp, but in your code you are applying a fill symbol. Please read the documentation on the ClassBreakRenderer first and play around with it. 
