Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/3/jsapi/classbreaksrenderer-amd.html below:

ClassBreaksRenderer | API Reference | ArcGIS API for JavaScript 3.46

require(["esri/renderers/ClassBreaksRenderer"], function(ClassBreaksRenderer) { /* code goes here */ });

(Added at v1.4)

A class breaks renderer symbolizes each graphic based on the value of some numeric attribute. For more information about renderers, see

.

More information on working with rendering, smart mapping, and using visual variables can be found in the Data Visualization guide topic and the multiple samples referenced within this topic.

Search for

that use this class.

esri/renderers/Renderer
|_esri/renderers/ClassBreaksRenderer

Constructor Details

Creates a new ClassBreaksRenderer object.

Specify either the attribute field the renderer uses to match values or starting at version 3.3, a function that returns a value to be compared against class breaks. If a function is specified the renderer will call this function once for every graphic drawn on the map. This can be used in cases where you want class breaks to be compared against a computed value that is not available via the attribute fields. 

At version 3.0, the Class Breaks renderer can be used to render feature layer tracks. Specify the layer's trackIdField as the attributeField

require([
  "esri/renderers/ClassBreaksRenderer", ... 
], function(ClassBreaksRenderer, ... ) {
  var renderer = new ClassBreaksRenderer(symbol, "POP07_SQMI");
  ...
});

require([
  "esri/renderers/ClassBreaksRenderer", ... 
], function(ClassBreaksRenderer, ... ) {
  var renderer = new ClassBreaksRenderer(defaultSymbol, function(feature){
    return feature.attributes.POP07_SQMI;
  });
  ...
});

Creates a new ClassBreaksRenderer.

require([
  "esri/renderers/ClassBreaksRenderer", ... 
], function(ClassBreaksRenderer, ... ) {
  var rend = new ClassBreaksRenderer(inputJson);
  ...
});

Property Details

Attribute field renderer uses to match values. At version 3.0 the Class Breaks renderer can be used to render

. Specify the layer's trackIdField as the

To symbolize polygon features with

, use backgroundFillSymbol to specify a simple fill symbol to represent polygon features, and use

of varying sizes in class breaks to indicate the quantity.

A 2-D array representing defined breaks. The array consists of [minValue,maxValue] pairs.

The classification method used to generate class breaks. (Added at v3.5)

Known values: equal-interval | geometrical-interval | natural-breaks | quantile | standard-deviation

An object defining a color ramp used to render the layer. See the following object specifications table for its properties. (Added at v3.8)

<colorInfo>

• (Required) Value is a number type and indicates the value in the data range.
• (Required) Color is the color used to render the value.
• string label property used by the Legend. When at least one stop has a label, only those stops with a label will be marked and labeled, (added at v3.12).

{
var stops = [
  {
    value: 50,
    color: new Color([255,0,0]),
    label: "50"
  }
]
}

<legendOptions>

renderer.setColorInfo({
  field: "M086_07",
  minDataValue: 0,
  maxDataValue: 100,
  colors: [
    new Color([255, 255, 255]),
    new Color([127, 127, 0])
  ]
});

Default symbol used when a value or break cannot be matched.

Each element in the array is an object that provides information about the class breaks associated with the renderer. The object has the following properties:

require([
  "esri/_base/array", ... 
], function(array, ... ) {
  //create an array containing the label and symbol for the renderer
  var symbols = array.map(results[0].layer.renderer.infos,function(info){
    return  {label: info.label,symbol:info.symbol};
  });
  ...
});

Include graphics with attribute values equal to the max value of a class in that class. Always true. Use setMaxInclusive(false) after creating a renderer to change this property if the desired behavior is to make a class include values less than the max value but not equal to the max value. (Added at v3.10)

Known values: true | false

Default value: true

An object containing a

property that describes the variable driving the visualization. This is displayed as the title of the renderer in the Legend and takes precedence over a given

or

.

When normalizationType is "field", this property contains the attribute field name used for normalization. (Added at v3.5)

When normalizationType is "percent-of-total", this property contains the total of all data values. (Added at v3.5)

Indicates how the data is normalized. If this property is defined then the class breaks contain a normalized min/max value instead of the actual value. The data value, obtained from the

, is normalized using one of the following functions before it is compared with the class breaks:

• field: Divide the data value using the attribute value of the field specified by the normalizationField property.
• log: Compute the base 10 logarithm of the data value. This can be a useful approach for some data distributions because it reduced the influence of very large data values.
• percent-of-total: Divide the data value by the sum of all data values then multiply by 100. Use normalizationTotal to determine the total value.

With the exception of log normalization, data normalization creates a ratio by dividing two values. When comparing attribute values between features normalization is useful to minimize the effect of varying map area or the number of observations.

For example, dividing the 18 to 30 year old population by the area of a polygon feature yields a density value that can be compared regardless of the size of each feature. Dividing the 18 to 30 year old population by the total population of a feature yields a ratio of people between the ages of 18 and 30 which is comparable regardless of the possibly large differences in total population between the features.

An object that describes how opacity of features is calculated. See the object specifications table below for properties of the opacityInfo object. (Added at v3.11)

<legendOptions>

<opacityInfo>

var opacityInfo = {
  field:"fieldname",
  normalizationField: "normalizationField",
  minDataValue:  0,
  maxDataValue:  100,
  // stops: [
  //   { value: 10, opacity: 0   }, 
  //   { value: 39, opacity: 0.5 },  
  //   { value: 68, opacity: 1   }   
  // ]
         
  // OR, you can specify alphaValues using:
  opacityValues:   [ 0, 1 ]
};

Defines how marker symbols are rotated. Use rotation to depict wind direction, vehicle heading etc. Specify an object with the following properties. (Added at v3.7)

<rotationInfo>

Name of the feature attribute field that contains the angle of rotation. Or a function that returns the angle of rotation.

A function is useful in cases where the angle of rotation is not available in an attribute field but needs to be computed using a mathematical expression or formula. For example, you can specify a function to compute wind or current direction when the underlying data is stored as U or V vectors. View example below.

Defines the origin and direction of rotation depending on how the angle of rotation was measured. Can be one of the following:

• geographic: rotates the symbol from the north in a clockwise direction.
• arithmetic: rotates the symbol from the east in a counter-clockwise direction.

The default value is "geographic".

// field value contains rotation variable
var rotationInfo = {
  type: "rotationInfo",
  field: "WindDirection",
  rotationType: "geographic"
};

// custom function defines rotation
var rotationInfo = {
  type: "rotationInfo",
  field: function(graphic){
    var U = graphic.attributes.U,
    V = graphic.attributes.V;

    //Oceanographic Convention
    return 360 + (180 / Math.PI) * Math.atan2(U,V);
  }
};

Defines the size of the symbol where feature size is proportional to data value. Note: prior to v3.12, this property was known as proportionalSymbolInfo. See the object specifications table below for a list of its available properties.

Symbol size rendering can be applied to two types of data:

• Data that represents a distance quantity. For example:
  • If you have tree locations defined as points and an attribute field with the radius of tree canopy, you can use proportional symbols to depict the actual ground area covered by each tree.
  • You can use proportionally sized lines to depict the width of water mains.
• Data that represents a non-distance quantity. For example:
  • Display traffic data like roads and highways as line symbols where stroke width is proportional to the traffic count.
  • Create a census map of proportional marker symbols where the area of each symbol reflects the population of the state.

In addition, regardless of the type of data described above, you can map a range of data values to a range of symbol sizes.

For point features, maker size is varied in proportion to the data value. For line features, stroke width is varied.

<legendOptions>

<sizeInfo>

• expression: (Required) A string value that allows a size to be defined based on the scale. "view.scale" is the only expression currently supported, but is subject to change in future implementations.
• stops: (Required) An array of objects that define the maximum size of the symbol at various values of the expression. Each object in the array has a numeric size property and a numeric value property. If the value calculated from the expression matches the value of a stop, than the size corresponding to that stop is selected. For example, if expression is set to "view.scale", the value corresponds to the map's scale. The size represents the maximum symbol size (in pixels) that corresponds to this scale. If the map scale matches the scale value of a stop, the size corresponding to that stop value is used as the maximum symbol size for the features. If the map scale value falls between two stops, the maximum symbol size is interpolated between the sizes of the two stops. The minSize and maxSize stop values are usually the same, although it is possible to have different values depending on how minSize is calculated versus the maxSize. The sample snippet below illustrates a scenario where the stops are optimized and minSize and maxSize values are different. In this snippet, all the scales smaller than 288895 have a minSize of 16 and maxSize of 80. This could be optimized by removing the first stop from both minSize and maxSize. The scale values would remain identical even after removing the first stop. This could vary depending on how many consecutive stops have the same size.

  {
    "type": "sizeInfo",
  
    "field": "pop2000",
    "minDataValue": 493782,
    "maxDataValue": 33871648,
    "valueUnit": "unknown",
  
    "minSize": {
      "type": "sizeInfo",
      "expression": "view.scale",
      "stops": [
        { "value": 1128,      "size": 16 },
        { "value": 288895,    "size": 16 },
        { "value": 73957191,  "size": 9 },
        { "value": 591657528, "size": 2 }
      ]
    },
  
    "maxSize": {
      "type": "sizeInfo",
      "expression": "view.scale",
      "stops": [
        { "value": 1128,      "size": 80 },
        { "value": 288895,    "size": 80 },
        { "value": 73957191,  "size": 50 },
        { "value": 591657528, "size": 25 }
      ]
    },
  }
  

• type: String value indicating the type of rendering, e.g., "sizeInfo".
• target: String value indicating that the sizeInfo should be applied to the outline of polygons. This value can be "outline" or null.

  "maxSize": {
    "type": "sizeInfo",
    "expression": "view.scale",
    "stops": [
      {"value": 1128, "size": 80},
      {"value": 288895, "size": 80},
      {"value": 73957191, "size": 50},
      {"value": 591657528, "size": 25}
    ]
  }

• expression: (Required) A string value that allows a size to be defined based on the scale. "view.scale" is the only expression currently supported, but is subject to change in future implementations.
• stops: (Required) An array of objects that define the minimum size of the symbol at various values of the expression. Each object in the array has a numeric size property and a numeric value property. If the value calculated from the expression matches the value of a stop, than the size corresponding to that stop is selected. For example, if expression is set to "view.scale", the value corresponds to the map's scale. The size represents the minimum symbol size (in pixels) that corresponds to this scale. If the map scale matches the scale value of a stop, the size corresponding to that stop value is used as the minimum symbol size for the features. If the map scale value falls between two stops, the minimum symbol size is interpolated between the sizes of the two stops. The minSize and maxSize stop values are usually the same, although it is possible to have different values depending on how minSize is calculated versus the maxSize. The sample snippet below illustrates a scenario where the stops are optimized and minSize and maxSize values are different. In this snippet, all the scales smaller than 288895 have a minSize of 16 and maxSize of 80. This could be optimized by removing the first stop from both minSize and maxSize. The scale values would remain identical even after removing the first stop. This could vary depending on how many consecutive stops have the same size.

  {
    "type": "sizeInfo",
  
    "field": "pop2000",
    "minDataValue": 493782,
    "maxDataValue": 33871648,
    "valueUnit": "unknown",
  
    "minSize": {
      "type": "sizeInfo",
      "expression": "view.scale",
      "stops": [
        { "value": 1128,      "size": 16 },
        { "value": 288895,    "size": 16 },
        { "value": 73957191,  "size": 9 },
        { "value": 591657528, "size": 2 }
      ]
    },
  
    "maxSize": {
      "type": "sizeInfo",
      "expression": "view.scale",
      "stops": [
        { "value": 1128,      "size": 80 },
        { "value": 288895,    "size": 80 },
        { "value": 73957191,  "size": 50 },
        { "value": 591657528, "size": 25 }
      ]
    },
  }
  

• type: String value indicating the type of rendering, e.g., "sizeInfo".
• target: String value indicating that the sizeInfo should be applied to the outline of polygons. This value can be "outline" or null.

  "maxSize": {
    "type": "sizeInfo",
    "expression": "view.scale",
    "stops": [
      {"value": 1128, "size": 80},
      {"value": 288895, "size": 80},
      {"value": 73957191, "size": 50},
      {"value": 591657528, "size": 25}
    ]
  }

• size: A numeric value indicating the size of the symbol
• value: A numeric value indicating the value the symbol represents.

var stops = 
 [
   { "value": 1128, "size": 16 },
   { "value": 288895, "size": 16 },
   { "value": 73957191, "size": 9 },
   { "value": 591657528, "size": 2 }
 ]

• radius: Data value represents the radius of a circular feature.
• diameter: Data value represents the diameter of a circular feature.
• area: Data value represents the area of a feature.
• width: Data value represents the width of a line.
• distance: Data value represents the distance from the center line (one half of the width).

If the data value represents a non-distance quantity (for example traffic count, census data) then valueUnit should be set to "unknown".

Data representing

quantity:

{
  field: "tree_canopy",
  valueUnit: "meters",
  valueRepresentation: "diameter"
}

//ground area covered by trees measured in square feet. 
{
  field: "GroundArea", 
  valueUnit: "feet",
  valueRepresentation: "area"
}

Specify

and

to smooth out outliers.

Data representing a non-distance quantity.

{
  field: "avg_daily_traffic",
  valueUnit: "unknown",
  minSize: 1000,
  minDataValue: 8
}

Specify

to smooth out outliers.

Map a range of data values to a range of symbol sizes:

{
  field: "avg_daily_traffic",
  valueUnit: "unknown",
  minSize: 1,
  maxSize: 10,
  minDataValue: 1000,
  maxDataValue: 100000
}

To use

:

renderer.sizeInfo({
  field: "POP_PER_DOC",
  minSize: 2,
  maxSize: 20,
  minDataValue: 100,
  maxDataValue: 10000,
  valueUnit: "unknown",
  legendOptions: {
    customValues: [100, 200, 300, 10000]
  }
});

An

evaluating to a number. This expression can reference field values using the

global variable and perform mathematical calculations and logical evaluations at runtime. This property is typically used as an alternative to

.

The title identifying and describing the associated

as defined in the

property. This is displayed as the title of the renderer in the Legend in the absence of a provided

in the

property.

This property allows you to define how to render values in a layer. It is composed of an array of objects (called "visual variables"), each of which contains the type of drawing property, the axis the variable is applied to, and additional properties for the variable. Variables (or data values) may be visualized in one of four ways: color, size, opacity, and rotation. The following bullet points outline how each visual variable may be defined:

• Color - To visualize values by color, set the type property of the visual variable object to colorInfo. Then define the rest of the object using the colorInfo object specification table.NOTE:This does not apply to VectorFieldRenderer.
• Size - To visualize values by size, set the type property of the visual variable object to sizeInfo. Then define the rest of the object using the sizeInfo object specification table.
• Opacity - To visualize values by opacity, set the type property of the visual variable object to opacityInfo. Then define the rest of the object using the opacityInfo object specification table.
• Rotation - Added as a visual variable at version 3.15. To visualize values by rotation, set the type property of the visual variable object to rotationinfo. Then define the rest of the object using the rotationInfo object specification table.

"visualVariables": [
  {
    "type": "colorInfo",
    "field": "M086_07",
    "normalizationField": "AREA",
    "stops": [
       {
         "value": 0,
         "color": new Color([255,255,255]),
         "label": "< 30.900"
       },
      {
         "value": 100,
         "color": new Color([127,127,0]),
         "label": "37.415"
      }
    ]
 }]

"visualVariables": [
  {
    "type": "sizeInfo",
    "field": "pop2000",
    "minDataValue": 493782,
    "maxDataValue": 33871648,
    "valueUnit": "unknown",

    "minSize": {
      "type": "sizeInfo",
      "expression": "view.scale",
      "stops": [
        { "value": 1128, "size": 16 },
        { "value": 288895, "size": 16 },
        { "value": 73957191, "size": 9 },
        { "value": 591657528, "size": 2 }
       ]
      },

     "maxSize": {
     "type": "sizeInfo",
     "expression": "view.scale",
     "stops": [
       { "value": 1128, "size": 80 },
       { "value": 288895, "size": 80 },
       { "value": 73957191, "size": 50 },
       { "value": 591657528, "size": 25 }
      ]
  }
  }]

{
  "type": "opacityInfo",
  "field": "PCP",
  "stops": [{
    "value": 0,
    "opacity": 100
  }, {
    "value": 10,
    "opacity": 0
  }]
}

{
  "type": "rotationInfo",
  "field": "Rotate",
  "rotationType": "arithmetic"
}

Method Details

Adds a class break. You can provide the minimum, maximum and symbol values as individual arguments or using the info object. The range of the break is greater than or equal to the minimum value and less than the maximum value. After making changes, you must refresh the graphic.

<minValueOrInfo>

Specify the minimum and maximum values and symbol as individual arguments.

renderer.addBreak(2, 5, symbol);

Specify the minimum and maximum values and symbol as an info object.

renderer.addBreak({

  minValue: 2,

  maxValue: 5,

  symbol: symbol,

  label: "Low Density"

});

Remove all existing class breaks for this renderer. (Added at v3.3)

Returns the index at which rendering and legend information can be found in the break

array for the given graphic. Returns -1 if the renderer was unable to classify the graphic.

Returns rendering and legend information (as defined by the renderer) associated with the given graphic. (Added at v3.7)

Gets the color for the Graphic. (Added at v3.8)

Returns the opacity value for the specified graphic. This is calculated using the

definition.

Returns the angle of rotation (in degrees) for the graphic calculated using rotationInfo. (Added at v3.7)

Return the symbol size (in pixels) for the graphic, calculated using sizeInfo. (Added at v3.7)

Gets the symbol for the Graphic.

Returns the visual variable of the specified type. (Added at v3.13)

var colorVisVar = renderer.getVisualVariablesForType('colorInfo');

Removes a break. After making changes, you must refresh the graphic.

Sets the colorInfo property. (Added at v3.8)

renderer.setColorInfo({
      field:"fieldname",
      minDataValue:  0,
      maxDataValue:  100,
      colors: [
         new Color([255, 255, 255]),
         new Color([127, 127, 0])
      ],
      //stops: [
      //  { value: 10, color: new Color([0, 0, 0, 0]) },     // -1 stddev
      //  { value: 39, color: new Color([0, 128, 64]) },     // average
      //  { value: 68, color: new Color([255, 0, 0, 0.8]) }  // 1 stddev
      //]
 });

A graphic or feature is considered a match for a class break for the first break where the graphic's attribute value is greater than or equal to the class's min value and less than or equal to the class's max value.

Use this method to modify the behavior so that a class break is considered a match only if the attribute value is less than a class's max value.

Sets opacity info for the renderer as defined by the info parameter.

The info parameter is an object with the same properties as opacityInfo.

renderer.setOpacityInfo({
      field:"fieldname",
      minDataValue:  0,
      maxDataValue:  100,
      // stops: [
      //   { value: 10, opacity: 0   }, 
      //   { value: 39, opacity: 0.5 },  
      //   { value: 68, opacity: 1   }   
      // ]
         
      // OR, you can specify alphaValues using:
      opacityValues:   [ 0, 1 ]
 });

Modifies rotation info for the renderer. The info argument has the same properties as rotationInfo. (Added at v3.7)

renderer.setRotationInfo({
   field: "WIND_DIRECT"
});

Set size info of the renderer to modify the symbol size based on data value. The info object has the same properties as sizeInfo.

NOTE:

• Take note that setting type only applies if rendering sizeInfo using visualvariables.
• Prior to v3.12, this property was known as setProportionalSymbolInfo.

renderer.setSizeInfo({
  field:"WIND_SPEED",
  minSize:3,
  maxSize:20,
  minDataValue:5,
  maxDataValue:50
 });

layer.setRenderer(renderer);

//This specific example uses sizeInfo.
  renderer.setVisualVariables([{
    type: "sizeInfo",
    field: "TOTPOP_CY",
    minSize: 5,
    maxSize: 50,
    minDataValue: 50,
    maxDataValue: 1000
  }]);

Converts object to its ArcGIS Server JSON representation. (Added at v2.1)

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4