AnsweredAssumed Answered

Legend doesn't recognize how color is formatted

Question asked by schlot on Aug 7, 2014
Latest reply on Aug 7, 2014 by schlot

I am using something I found at gitHub that will help me classify my data, change classes, colors etc.  It was a little rough, but I got it working and my layer is drawing.  The problem is in the way the color is formatted.  I'm pulling it out an predetermined array and the function is converting it to hex. Somewhere in here I've defined my color such that the legend doesn't like it and it's failing when I create it.

 

The color is defined as hex returned from the function in the format #ffee000.  I using these to create a simplefillsymbol for a classbreakrenderer

 

breakData is what is getting returned from my function.  It is in the format

{"breaks": [{"interval":0.9 , "color":"#fee5d9" },{"interval":5.95 , "color":"#fcae91" },{"interval":11.26 , "color":"#fb6a4a" },{"interval":19.77 , "color":"#de2d26" },{"interval":27.86 , "color":"#a50f15" }]}

 

I've also returned the array of break points so I can use it for my max/min of the classbreaks. 

breaks = [0.9, 3.99, 8.92, 11.98, 16.97, 23.8, 30.02, 64.08];

Note: I couldn't figure how how to specify just a min value and symbol, without a maxValue in between when specifying a new break.  I thought I could put a 'null' in addBreak, but I couldn't figure out how to skip over it.

-------------------------------------------------------------------

var br = new ClassBreaksRenderer(defaultSymbol, findBreakValue); //using a function here instead of a field

var breakData = JSON.parse(jstyle);

var int,nextup, nextInt, col,color, sym;

for (var j in breakData.breaks){

int = breakData.breaks[j].interval;

nextup = parseInt(j) + 1;

nextInt = classBr[nextup];

    if (!nextInt) {

     nextInt = highestValue;

     }

col = breakData.breaks[j].color;

color = new Color(col);

sym = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, polyOutlineSymbol, col); //polyOutlineSymbol defined earlier as a thin gray line

br.addBreak(int, nextInt, sym);

}

featureLayer.setRenderer(br);

featureLayer.redraw();

var legend = new Legend({

map: map, layerInfos: [{

"layer": featureLayer, "title": "Value" }]

},"legend");

legend.startup();

 

I get an error: TypeError: b.color.toRgba is not a function during the legend creation.

 

The map displays correctly, with the classification and colors as defined.  I assume the legend doesn't like the way I formatted the color for my symbology?  There seems to be lots of variations on defining your color, hex, rgb, rgba.

Outcomes