This sample application demonstrates the visualization of regions on an Analytic Map and their corresponding data in a chart. You can filter the display of the chart data by selecting and deselecting regions on the Analytic Map.

Define and set a Model

Controller code

this.oData = 
   {
      regionProperties :
      [  {
            "code" : "DE",
            "region" : "Germany",
            "Revenue": 428214.13,
            "Cost": 94383.52,
            "color" : "rgb(92,186,230)",
         }, {
            "code" : "FR",
            ...
         }   
      ]
   };
// Analytic Map: create model, set the data and set the model
this.oModel = new sap.ui.model.json.JSONModel();
this.oModel.setData(this.oData);
this.oVBI = this.getView().byId("VBIAnalytic");
this.oVBI.setModel(this.oModel);
....
// Chart: create model, set the data and set the model
this.oChartModel = new sap.ui.model.json.JSONModel();
this.oChartModel.setData(this.oData);
this.oChart = this.getView().byId("ChartAnalytic");
this.oChart.setModel(this.oChartModel);

In the method onInit of the controller we define some data for the regions in JSON format. This data is given to a JSONModel for AnalyticMap Control and for the VizFrame Control that serves as the chart, and then assigned to the view. We use two different models for both controls because with the selection of regions on the map the data for the chart is filtered.

Add Analytic Map control to view and bind it to model data

XML View code

<vbm:AnalyticMap
   id="VBIAnalytic" 
   regions="{/regionProperties}" 
   width="100%" 
   height="100%" 
   centerPosition="10.350;48.431" 
   zoomlevel="5" 
   regionSelect="handleSelect" 
   regionDeselect="handleDeselect">
   <vbm:regions> 
      <vbm:Region 
         code="{code}" 
         color="{color}" 
         tooltip="{region}">
      </vbm:Region>
   </vbm:regions>
   ....
</vbm:AnalyticMap>

In the XML view we define an Analytic Map control with some settings.

The regions aggregation consists of several Region controls. The path to the regions' data is the regionProperties array.

The regions aggregation gets a single Region control acting as a template for the aggregation binding. The attributes of the template object are bound to model attributes.

We add event handler regionSelect and regionDeselect to the Analytic Map.

Add VizFrame control to view and bind it to model data

XML View code

<viz:VizFrame 
   id="ChartAnalytic" 
   uiConfig="{applicationSet:'fiori'}"
   height='100%' width="100%" vizType='column'>
   <viz:dataset>
      <viz.data:FlattenedDataset data="{/regionProperties}">
         <viz.data:dimensions>
            <viz.data:DimensionDefinition name="Region"
               value="{region}" />
         </viz.data:dimensions>
         <viz.data:measures>
               <viz.data:MeasureDefinition name="Revenue"
                  value="{Revenue}" />
               <viz.data:MeasureDefinition name="Cost"
                  value="{Cost}" />
         </viz.data:measures>
      </viz.data:FlattenedDataset>
   </viz:dataset>
...
</viz:VizFrame>

Then we define the second control as a VizFrame which acts as a chart. The data again points to the regionProperties array. The values of the x- and y-axis are bound to the model attributes.

Create and set the legend on the Analytic Map

Controller code

// Analytic Map: create and set the legend
this.oLegend = new sap.ui.vbm.Legend({
   caption: "Analytic Legend",
   items: {
      path: "/regionProperties",
      template: new sap.ui.vbm.LegendItem({
         text: "{region}",
         color: '{color}'
      })
   }
});
this.oVBI.setLegend(this.oLegend);

We create a new Legend with a defined caption and LegendItems as aggregation.

With the attribute items of the Legend we define a path on the model, selecting the regionProperties array in our case.

We define a template object LegendItem with attributes bound to model attributes.

Then we set the legend on the Analytic Map.

Select and deselect regions on the map to filter the chart data

Controller code

handleSelect : function (e) {
   var oObject = e.getParameters().selected[0];
   this.Selection[oObject.getProperty("code")] = true;
   this.refreshFilter();
},
handleDeselect : function (e) {
   var aRegionProperties = e.getParameters().deselected;
   for (var j = 0; j < aRegionProperties.length; j++) {
      delete this.Selection[aRegionProperties[j].getCode()];
   }
   this.refreshFilter();
}

When a select event occurs we fetch the first selected object out of the event parameters. Note that multi selection is not considered in this basic sample!

The region code of this object is added to the selection hashmap which is used afterwards in the method refreshFilter.

When a deselect event occurs we take the array of all deselected regions out of the event and remove the corresponding code from the selection. The selection hashmap is then used in the refreshFilter method.

Set the filter

Controller code

refreshFilter : function (e) {
  this.aFilter = [];
  for (var j = 0; j < this.oData.regionProperties.length; j++){ 
    var oFilter = this.oData.regionProperties[j];
    if (this.Selection[oFilter.code]) {                                    
      this.aFilter.push(oFilter);
    }     
  }
  if (this.aFilter.length < 1){
    // no filter
    this.oChartModel.setData(this.oData);
   } else {
    this.oChartModel.setData({"regionProperties":this.aFilter});
   }
},

In the refreshFilter method we loop over the regionProperties array and add all objects with their code also in the selection to the filter array.

If the filter array is empty the chart uses all data; otherwise the filter data.