JavaScript example of using a function with a renderer to symbolize features in an ArcGIS API for JavaScript app.

gistfile1.js

// create a class breaks renderer
var breaks = calcBreaks(gasMin, gasMax, 4);
var sfs = esri.symbol.SimpleFillSymbol;
var sls = esri.symbol.SimpleLineSymbol;
var outline = sls("solid", new dojo.Color("#444"), 1);
var br = new esri.renderer.ClassBreaksRenderer(null, findGasPrice);
br.setMaxInclusive(true);
br.addBreak(breaks[0], breaks[1], new sfs("solid", outline, new dojo.Color([255, 255, 178, 0.75])));
br.addBreak(breaks[1], breaks[2], new sfs("solid", outline, new dojo.Color([254, 204, 92, 0.75])));
br.addBreak(breaks[2], breaks[3], new sfs("solid", outline, new dojo.Color([253, 141, 60, 0.75])));
br.addBreak(breaks[3], gasMax, new sfs("solid", outline, new dojo.Color([227, 26, 28, 0.75])));

fl.setRenderer(br);
// redraw, unlike refresh, re-renders features w/o a server roundtrip
fl.redraw();

// function used by the class breaks renderer to get the
// value used to symbolize each state
function findGasPrice(graphic) {
  var state = graphic.attributes.STATE_NAME;
  return statePrices[state];
}

function calcBreaks(min, max, numberOfClasses) {
  var range = (max - min) / numberOfClasses;
  var breakValues = [];
  for ( var i = 0; i < numberOfClasses; i++ ) {
    breakValues[i] = formatDollars(min + ( range * i ));
  }
  return breakValues;
}