Years ago, there was a sample to visualize dynamic JSON by "joining" to a static FeatureLayer "template" by a shared pk (state, in this case). It is no longer available as the data source went offline, but here's the sample code to give you an idea of what it was doing:
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>doctype html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1,user-scalable=no"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F3.11%2Fesri%2Fcss%2Fesri.css" target="_blank">http://js.arcgis.com/3.11/esri/css/esri.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token">"css/styles.css"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN><SPAN class="keyword token">var</SPAN> dojoConfig <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
packages<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN>
name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"extras"</SPAN><SPAN class="punctuation token">,</SPAN>
location<SPAN class="punctuation token">:</SPAN> location<SPAN class="punctuation token">.</SPAN>pathname<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="regex token">/\/[^/]+$/</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">+</SPAN> <SPAN class="string token">"/extras"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fjs.arcgis.com%2F3.11%2F" target="_blank">http://js.arcgis.com/3.11/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>
<SPAN class="string token">"dojo/parser"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/json"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/_base/array"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/_base/connect"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/Color"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/number"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/dom-construct"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/geometry/Extent"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/symbols/SimpleLineSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/renderers/SimpleRenderer"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/renderers/ClassBreaksRenderer"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/dijit/Legend"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"esri/request"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"extras/Tip"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dijit/layout/BorderContainer"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dijit/layout/ContentPane"</SPAN><SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"dojo/domReady!"</SPAN>
<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>
parser<SPAN class="punctuation token">,</SPAN> JSON<SPAN class="punctuation token">,</SPAN> arr<SPAN class="punctuation token">,</SPAN> conn<SPAN class="punctuation token">,</SPAN> Color<SPAN class="punctuation token">,</SPAN> number<SPAN class="punctuation token">,</SPAN> domConstruct<SPAN class="punctuation token">,</SPAN>
Map<SPAN class="punctuation token">,</SPAN> Extent<SPAN class="punctuation token">,</SPAN> SimpleLineSymbol<SPAN class="punctuation token">,</SPAN> SimpleFillSymbol<SPAN class="punctuation token">,</SPAN> SimpleRenderer<SPAN class="punctuation token">,</SPAN> ClassBreaksRenderer<SPAN class="punctuation token">,</SPAN>
FeatureLayer<SPAN class="punctuation token">,</SPAN> Legend<SPAN class="punctuation token">,</SPAN> esriRequest<SPAN class="punctuation token">,</SPAN> Tip<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">// call the parser to create the dijit layout dijits</SPAN>
parser<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> bounds <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="string token">"xmin"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">2332499</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"ymin"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">1530060</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"xmax"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">2252197</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"ymax"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">1856904</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"spatialReference"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="string token">"wkid"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">102003</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
window<SPAN class="punctuation token">.</SPAN>map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
extent<SPAN class="punctuation token">:</SPAN> bounds<SPAN class="punctuation token">,</SPAN>
lods<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="string token">"level"</SPAN><SPAN class="punctuation token">:</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"resolution"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3966</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"scale"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15000000</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
slider<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
window<SPAN class="punctuation token">.</SPAN>fl <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fsampleserver6.arcgisonline.com%2Farcgis%2Frest%2Fservices%2FCensus%2FMapServer%2F3" target="_blank">http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
maxAllowableOffset<SPAN class="punctuation token">:</SPAN> window<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getWidth</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> window<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">,</SPAN>
mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_SNAPSHOT<SPAN class="punctuation token">,</SPAN>
outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"STATE_NAME"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
visible<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// override default renderer so that states aren't drawn</SPAN>
<SPAN class="comment token">// until the gas price data has been loaded and is joined</SPAN>
fl<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> template <SPAN class="operator token">=</SPAN> <SPAN class="string token">"<strong>${STATE_NAME}: $${GAS_DISPLAY}</strong>"</SPAN><SPAN class="punctuation token">;</SPAN>
window<SPAN class="punctuation token">.</SPAN>tip <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Tip</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="string token">"format"</SPAN><SPAN class="punctuation token">:</SPAN> template<SPAN class="punctuation token">,</SPAN>
<SPAN class="string token">"node"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"legend"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> updateEnd <SPAN class="operator token">=</SPAN> fl<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"update-end"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">// get gas price data</SPAN>
<SPAN class="comment token"><SPAN>// using apify: </SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fapify.heroku.com%2Fresources" target="_blank">http://apify.heroku.com/resources</A></SPAN>
<SPAN class="comment token"><SPAN>// edit the apify thing: </SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fapify.heroku.com%2Fresources%2F53b34e28d804760002000023%2Fedit" target="_blank">http://apify.heroku.com/resources/53b34e28d804760002000023/edit</A></SPAN>
updateEnd<SPAN class="punctuation token">.</SPAN><SPAN class="token function">remove</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> prices <SPAN class="operator token">=</SPAN> <SPAN class="token function">esriRequest</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token"><SPAN>// url: "</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fapify.heroku.com%2Fapi%2Faaagasprices.json" target="_blank">http://apify.heroku.com/api/aaagasprices.json</A><SPAN>",</SPAN></SPAN>
<SPAN class="comment token">// Alternatively, fallback to a local file, use this if APIfy is unavailable.</SPAN>
url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"fallback-gas-price-data.json"</SPAN><SPAN class="punctuation token">,</SPAN>
callbackParamName<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"callback"</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
prices<SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>drawFeatureLayer<SPAN class="punctuation token">,</SPAN> pricesError<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// wire up the tip</SPAN>
fl<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mouse-over"</SPAN><SPAN class="punctuation token">,</SPAN> window<SPAN class="punctuation token">.</SPAN>tip<SPAN class="punctuation token">.</SPAN>showInfo<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
fl<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mouse-out"</SPAN><SPAN class="punctuation token">,</SPAN> window<SPAN class="punctuation token">.</SPAN>tip<SPAN class="punctuation token">.</SPAN>hideInfo<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
window<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>fl<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">drawFeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="comment token">// If data comes back as text (which it does when coming from apify), parse it.</SPAN>
<SPAN class="keyword token">var</SPAN> gas <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">typeof</SPAN> data <SPAN class="operator token">===</SPAN> <SPAN class="string token">"string"</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">?</SPAN> JSON<SPAN class="punctuation token">.</SPAN><SPAN class="token function">parse</SPAN><SPAN class="punctuation token">(</SPAN>data<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">:</SPAN> data<SPAN class="punctuation token">;</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"join prices, number of graphics: "</SPAN><SPAN class="punctuation token">,</SPAN> fl<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// loop through gas price data, find min/max and populate an object </SPAN>
<SPAN class="comment token">// to keep track of the price of regular in each state</SPAN>
window<SPAN class="punctuation token">.</SPAN>statePrices <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> gasMin <SPAN class="operator token">=</SPAN> <SPAN class="number token">Infinity</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> gasMax <SPAN class="operator token">=</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">Infinity</SPAN><SPAN class="punctuation token">;</SPAN>
arr<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>gas<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>g<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN> g<SPAN class="punctuation token">.</SPAN>state <SPAN class="operator token">!==</SPAN> <SPAN class="string token">"State"</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> price <SPAN class="operator token">=</SPAN> <SPAN class="token function">parseFloat</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="token function">parseFloat</SPAN><SPAN class="punctuation token">(</SPAN>g<SPAN class="punctuation token">.</SPAN>regular<SPAN class="punctuation token">.</SPAN><SPAN class="token function">replace</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"$"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
statePrices<SPAN class="punctuation token">[</SPAN>g<SPAN class="punctuation token">.</SPAN>state<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> price<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN> price <SPAN class="operator token"><</SPAN> gasMin <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
gasMin <SPAN class="operator token">=</SPAN> price<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN> price <SPAN class="operator token">></SPAN> gasMax <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
gasMax <SPAN class="operator token">=</SPAN> price<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// format max gas price with two decimal places</SPAN>
gasMax <SPAN class="operator token">=</SPAN> <SPAN class="token function">formatDollars</SPAN><SPAN class="punctuation token">(</SPAN>gasMax<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// add an attribute to each attribute so gas price is displayed</SPAN>
<SPAN class="comment token">// on mouse over below the legend</SPAN>
arr<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN>fl<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>g<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> displayValue <SPAN class="operator token">=</SPAN> statePrices<SPAN class="punctuation token">[</SPAN>g<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>STATE_NAME<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">toFixed</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
g<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>GAS_DISPLAY <SPAN class="operator token">=</SPAN> displayValue<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// create a class breaks renderer</SPAN>
<SPAN class="keyword token">var</SPAN> breaks <SPAN class="operator token">=</SPAN> <SPAN class="token function">calcBreaks</SPAN><SPAN class="punctuation token">(</SPAN>gasMin<SPAN class="punctuation token">,</SPAN> gasMax<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">4</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// console.log("gas price breaks: ", breaks);</SPAN>
<SPAN class="keyword token">var</SPAN> SFS <SPAN class="operator token">=</SPAN> SimpleFillSymbol<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> SLS <SPAN class="operator token">=</SPAN> SimpleLineSymbol<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> outline <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SLS</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#444"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> br <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ClassBreaksRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">,</SPAN> findGasPrice<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
br<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setMaxInclusive</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
br<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addBreak</SPAN><SPAN class="punctuation token">(</SPAN>breaks<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> breaks<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SFS</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">178</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.75</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
br<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addBreak</SPAN><SPAN class="punctuation token">(</SPAN>breaks<SPAN class="punctuation token">[</SPAN><SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> breaks<SPAN class="punctuation token">[</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SFS</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">254</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">204</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">92</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.75</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
br<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addBreak</SPAN><SPAN class="punctuation token">(</SPAN>breaks<SPAN class="punctuation token">[</SPAN><SPAN class="number token">2</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> breaks<SPAN class="punctuation token">[</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SFS</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">253</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">141</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">60</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.75</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
br<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addBreak</SPAN><SPAN class="punctuation token">(</SPAN>breaks<SPAN class="punctuation token">[</SPAN><SPAN class="number token">3</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> gasMax<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SFS</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN> outline<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="number token">227</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">26</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">28</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">0.75</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
fl<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setRenderer</SPAN><SPAN class="punctuation token">(</SPAN>br<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
fl<SPAN class="punctuation token">.</SPAN><SPAN class="token function">redraw</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> legend <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
map<SPAN class="punctuation token">:</SPAN> window<SPAN class="punctuation token">.</SPAN>map<SPAN class="punctuation token">,</SPAN>
layerInfos<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"layer"</SPAN><SPAN class="punctuation token">:</SPAN> fl<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"title"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Regular Gas"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"legend"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
legend<SPAN class="punctuation token">.</SPAN><SPAN class="token function">startup</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="comment token">// remove the loading div</SPAN>
domConstruct<SPAN class="punctuation token">.</SPAN><SPAN class="token function">destroy</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"loading"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">// function used by the class breaks renderer to get the</SPAN>
<SPAN class="comment token">// value used to symbolize each state</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">findGasPrice</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> state <SPAN class="operator token">=</SPAN> graphic<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>STATE_NAME<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">return</SPAN> statePrices<SPAN class="punctuation token">[</SPAN>state<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">calcBreaks</SPAN><SPAN class="punctuation token">(</SPAN>min<SPAN class="punctuation token">,</SPAN> max<SPAN class="punctuation token">,</SPAN> numberOfClasses<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">var</SPAN> range <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">(</SPAN>max <SPAN class="operator token">-</SPAN> min<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">/</SPAN> numberOfClasses<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> breakValues <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN> <SPAN class="keyword token">var</SPAN> i <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> i <SPAN class="operator token"><</SPAN> numberOfClasses<SPAN class="punctuation token">;</SPAN> i<SPAN class="operator token">++</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
breakValues<SPAN class="punctuation token">[</SPAN>i<SPAN class="punctuation token">]</SPAN> <SPAN class="operator token">=</SPAN> <SPAN class="token function">formatDollars</SPAN><SPAN class="punctuation token">(</SPAN>min <SPAN class="operator token">+</SPAN> <SPAN class="punctuation token">(</SPAN> range <SPAN class="operator token">*</SPAN> i <SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="comment token">// console.log("break values: ", breakValues);</SPAN>
<SPAN class="keyword token">return</SPAN> breakValues<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">formatDollars</SPAN><SPAN class="punctuation token">(</SPAN>num<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
<SPAN class="keyword token">return</SPAN> number<SPAN class="punctuation token">.</SPAN><SPAN class="token function">format</SPAN><SPAN class="punctuation token">(</SPAN>num<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"places"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">2</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="keyword token">function</SPAN> <SPAN class="token function">pricesError</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"error getting gas price data: "</SPAN><SPAN class="punctuation token">,</SPAN> e<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"loading"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"shadow loading"</SPAN><SPAN class="operator token">></SPAN>
Getting Latest Gas Price Data<SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN>
<SPAN class="operator token"><</SPAN>img src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fdl.dropbox.com%2Fu%2F2654618%2Floading_gray_circle.gif" target="_blank">http://dl.dropbox.com/u/2654618/loading_gray_circle.gif</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"legend"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"shadow info"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>div data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit.layout.BorderContainer"</SPAN>
data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"design:'headline',gutters:false"</SPAN>
style<SPAN class="operator token">=</SPAN><SPAN class="string token">"width: 100%; height: 100%; margin: 0;"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"map"</SPAN>
data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>type<SPAN class="operator token">=</SPAN><SPAN class="string token">"dijit.layout.ContentPane"</SPAN>
data<SPAN class="operator token">-</SPAN>dojo<SPAN class="operator token">-</SPAN>props<SPAN class="operator token">=</SPAN><SPAN class="string token">"region:'center'"</SPAN><SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"title"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"shadow info"</SPAN><SPAN class="operator token">></SPAN>Current Gas Prices by State<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN>
<SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>Back in 2014, we ran with this idea for our application in v3 since our maps were a tertiary consideration for a mature product, and it was the easiest way to add choropleths within an existing framework... we simply formatted the data returned by a SQL stored procedure as JSON and "joined" it to a static "template" FeatureLayer map service on the front end, manually calculating breaks along the way (we found a nice JS stats library for this), setting tooltips, etc.
Revisiting this in v4, we'd like to do something similar to Visualize data with class breaks | ArcGIS API for JavaScript 4.9 - what's the best way to accomplish this? I don't see any specific samples regarding JSON... it seems most samples either have the data in the map service, or join to tables in the workspace. This, unfortunately, is not an option for us.
Thanks!
