Incorporating Additional Chart Properties in a Map Chart

Example: Adding a Heat Scale Legend to a Leaflet Choropleth Chart

The following request makes the legend visible in a Leaflet chart.

Note: Due to their length, certain lines of code in the example below may wrap onto the next line of text. Wrapping may create breaks within strings or URL references, which may cause errors when run. If you copy and paste this example, be sure to remove these line breaks before running it.

GRAPH FILE WF_RETAIL_LITE
SUM MDN.STATE_PROV_POPULATION
BY STATE_PROV_NAME
WHERE COUNTRY_NAME EQ 'United States'
WHERE STATE_PROV_NAME NE 'Puerto Rico'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET STYLE *
*GRAPH_JS 
  "legend": {"visible":true},
"mapProperties": {
  "engine": "leaflet",
              
"leaflet": {
"initPos": { 
                  "center": [37.8, -96], 
                  "level": 4 
            },

"overlayLayers": [{
"title": "United States of America",
"dataLookup": "properties.state_name",
"layerInfo": {
"maxZoom": -1,
"minZoom": -1,
"type": "regions"
},
"type": "tdg",
"url": function(){ return tdgchart.getScriptPath() + 'map/US.json'}
}],
"controls": [
    {"control": "L.Control.Layers"},
    {
     "control": "L.Control.Scale",
     "options": {
      "imperial": true,
      "metric": true }
    }
   ],

"baselayers": [{
"title": "ArcGIS_World_Street_Map",
"layerInfo": {
"maxZoom": 17,
"minZoom": 0,
"attribution": function(){ return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | "  + "Map Tiles: &|copy; Esri";}
},
"url": function(){return 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
}
}]
}
},
*END
ENDSTYLE 
END

The output now has a legend that defines the color for each population range.

Example: Defining Colors and Tooltips on Esri Choropleth Charts

The following request generates a choropleth with a color scale consisting of purple and lavender using Reporting Server syntax. It also defines HTML-style tooltips.

 
DEFINE FILE wf_retail_lite
FIELD1/A30 (GEOGRAPHIC_ROLE=STATE) = STATE_PROV_NAME;
END
GRAPH FILE wf_retail_lite
SUM COGS_US
BY STATE_PROV_NAME
BY FIELD1
WHERE COUNTRY_NAME EQ 'United States' 
AND STATE_PROV_NAME NE 'Puerto Rico'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
TYPE=REPORT, CHART-LOOK=com.esri.map, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=color, $
*GRAPH_JS_FINAL
"colorScale": {"colors": ["purple", "lavender"] },
"htmlToolTip": {"enabled": true, "snap": true},

"extensions": {
  "com.esri.map": {
      "overlayLayers": 
      [
        {
         "ibiDataLayer": {
                  "map-metadata": {
                       "map_by_field": "FIELD1"
                                            }
                                   }
         }
      ],
      "baseMapInfo": 
         {
          "customBaseMaps":
           [
               {
                "ibiBaseLayer": "gray"
                }
            ]
          }
                          }
                   }
*END
ENDSTYLE
END

The output is shown in the following image.

Note: You can also define colors and tooltips using chart engine syntax.

Example: Defining Colors and Tooltips on Leaflet Choropleth Charts

The following request generates a choropleth with a color scale consisting of purple and lavender. It also defines automatic HTML-style tooltips.

Note: Due to their length, certain lines of code in the example below may wrap onto the next line of text. Wrapping may create breaks within strings or URL references, which may cause errors when run. If you copy and paste this example, be sure to remove these line breaks before running it.

GRAPH FILE WF_RETAIL_LITE
SUM MDN.STATE_PROV_POPULATION
BY STATE_PROV_NAME
WHERE COUNTRY_NAME EQ 'United States'
WHERE STATE_PROV_NAME NE 'Puerto Rico'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET STYLE *
*GRAPH_JS
"mapProperties": {
  "engine": "leaflet",
              
"leaflet": {
"initPos": { 
                  "center": [37.8, -96], 
                  "level": 4 
            },

"overlayLayers": [{
"title": "United States of America",
"dataLookup": "properties.state_name",
"layerInfo": {
"maxZoom": -1,
"minZoom": -1,
"type": "regions"
},
"type": "tdg",
"url": function(){ return tdgchart.getScriptPath() + 'map/US.json'}
}],
"controls": [
{"control": "L.Control.Layers"},
{
"control": "L.Control.Scale",
"options": {
"imperial": true,
"metric": true
}
}
],

"baselayers": [{
"title": "ArcGIS_World_Street_Map",
"layerInfo": {
"maxZoom": 17,
"minZoom": 0,
"attribution": function(){ return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | " + "Map Tiles: &|copy; Esri";}
},
"url": function(){return 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
}
}]
}
},
"legend":{"visible":true}, 
"title": {"visible": true, "text": "United States Population in 2010"},

"colorScale": {"colors": ["purple", "lavender"] },
"htmlToolTip": {"enabled": true, "snap": true},
"series": [{"series": "reset", "tooltip":"auto"}]  ,
*END
 ENDSTYLE
END

The output is:

Example: Showing Data Text Labels on an Esri Bubblemap

The following request generates a bubblemap with data text labels using Reporting Server syntax.

DEFINE FILE WF_RETAIL_LITE
GEOPOINT/A200 = GIS_POINT('4326', STATE_PROV_CAPITAL_LONGITUDE, STATE_PROV_CAPITAL_LATITUDE);
END
GRAPH FILE WF_RETAIL_LITE
SUM DAYSDELAYED 
BY GEOPOINT
WHERE COUNTRY_NAME EQ 'United States' AND STATE_PROV_NAME NE 'Puerto Rico'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BUBBLEMAP
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
TYPE=REPORT, CHART-LOOK=com.esri.map, $
TYPE=DATA, COLUMN=DAYSDELAYED , BUCKET=size, $
*GRAPH_JS_FINAL
"bubbleMarker": {"maxSize": "10%"},
"series": [{"series":0, "color": "yellow", "dataLabels":{"visible":true}}],

"extensions": {
  "com.esri.map": {
      "overlayLayers": 
      [
        {
         "ibiDataLayer": {
                  "map-geometry": {
                       "map_by_field": "GEOPOINT"
                                            }
                                   }
         }
      ],
      "baseMapInfo": 
         {
          "customBaseMaps":
           [
               {
                "ibiBaseLayer": "gray"
                }
            ]
          }
                          }
                   }
*END
ENDSTYLE
END

The output is shown in the following image.

Note: You can also show data text labels using chart engine syntax.

Example: Showing Data Text Labels on a Leaflet Bubblemap

The following request generates a bubblemap with data text labels.

Note: Due to their length, certain lines of code in the example below may wrap onto the next line of text. Wrapping may create breaks within strings or URL references, which may cause errors when run. If you copy and paste this example, be sure to remove these line breaks before running it.

GRAPH FILE WF_RETAIL_LITE
SUM MDN.STATE_PROV_POPULATION
BY STATE_PROV_NAME
WHERE COUNTRY_NAME EQ 'United States'
WHERE STATE_PROV_NAME NE 'Puerto Rico'
WHERE TIME_YEAR EQ 2009
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BUBBLEMAP
ON GRAPH SET STYLE *
*GRAPH_JS
 "series": [{"series":0, "color": "teal", "border":{"color": "navy", "width": 1}}],
"dataLabels": {
"visible": true     
},

"legend": {"visible":false},
"bubbleMarker": {"maxSize": "10%" },
"mapProperties": {
  "engine": "leaflet",
              
"leaflet": {
"initPos": { 
                  "center": [37.8, -96], 
                  "level": 4 
            },"overlayLayers": [{
"title": "United States of America",
"dataLookup": "properties.state_name",
"layerInfo": {
"maxZoom": -1,
"minZoom": -1,
"type": "regions"
},
"type": "tdg",
"url": function(){ return tdgchart.getScriptPath() + 'map/US.json'}
}],
  "controls": [
    {"control": "L.Control.Layers"},
    {
     "control": "L.Control.Scale",
     "options": {
      "imperial": true,
      "metric": true }
    }
   ],
 "baselayers": [{
   "title": "ArcGIS_World_Street_Map",
   "layerInfo": {
     "maxZoom": 17,
     "minZoom": 0,
      "attribution": function(){ return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | " + "Map Tiles: &|copy; Esri";}
},
  "url": function(){return 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}';
}   
}]    
}
},
*END
ENDSTYLE 
END

The output is shown on the following image:

Example: Displaying Location Names as Data Text Labels on an Esri Map Chart

The following request uses Reporting Server syntax to apply the "content": "name" property of the dataLabels object in order to display country names as data text labels.

GRAPH FILE wf_retail_lite
SUM CITY_POPULATION
BY COUNTRY_NAME
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, CHART-LOOK=com.esri.map, $
TYPE=DATA, COLUMN=CITY_POPULATION, BUCKET=color, $
*GRAPH_JS_FINAL
"series": [{"series":0, "dataLabels":{"visible":true, "content": "name"}}],
"extensions": {
  "com.esri.map": {
      "overlayLayers": 
      [
        {
         "ibiDataLayer": {
                  "map-metadata": {
                       "map_by_field": "COUNTRY_NAME"
                                            }
                                   }
         }
      ],
      "baseMapInfo": 
         {
          "customBaseMaps":
           [
               {
                "ibiBaseLayer": "gray"
                }
            ]
          }
                          }
                   }
*END
ENDSTYLE
END

The output is shown in the following image.

Note: You can also show location names as data text labels using chart engine syntax.

Example: Displaying Location Names as Data Text Labels on a Leaflet Map Chart

The following request uses the "content": "name" property of the dataLabels object to display country names as data text labels.

Note: Due to their length, certain lines of code in the example below may wrap onto the next line of text. Wrapping may create breaks within strings or URL references, which may cause errors when run. If you copy and paste this example, be sure to remove these line breaks before running it.

GRAPH FILE WF_RETAIL_LITE
SUM CITY_POPULATION
BY COUNTRY_NAME
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENWarm.sty,$
TYPE=DATA, COLUMN=N1, BUCKET=location, $
TYPE=DATA, COLUMN=N2, BUCKET=color, $
*GRAPH_JS_FINAL       
"dataLabels": {"visible": true, "content": "name"}, 
"mapProperties": {
    "leaflet": {
      "baselayers":             [
                {
         "layerInfo": {
            "maxZoom": 16,
            "attribution": function() {  return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | " + 
               "Map Tiles: &|copy; Esri"; }
                    },
                 "title": "ArcGIS_World_Street_Map",
                 "url": function() { return 'http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}'; }
                }
            ],

        "overlayLayers":             [
                {
                 "dataLookup": "properties.country_name",
                 "layerInfo": {
                     "type": "countries"
                    },
                "type": "tdg",
                "title": "World",
                "url": function() {  return tdgchart.getScriptPath() + 'map/world.json' }
                }
            ]
    }
},
*END
ENDSTYLE
END

The output is shown in the following image.