PP.Ui.MapBarVisualPanel(settings);
settings. JSON object that contains values of class properties.
The MapBarVisualPanel constructor creates an instance of the MapBarVisualPanel class.
To execute the example the HTML page must contain the MapChart component named map (see Example of Creating the MapChart Component). Create a master to work with a map, clear panels created by default and add only panels to work with arrows, bar and pie factors in this wizard:
// Creates master to work with a map
function createMaster() {
var master = new PP.Ui.MapMaster({
DataView: map,
ParentNode: "mapMaster",
ImagePath: PP.ImagePath,
ShowBorders: true,
Id: "Master",
Height: 500,
Width: 300
});
return master;
}
// The PropertyChanged event handler for master panels
var handler;
function getPropertyChangedHandler(master) {
var handler = null;
if (master.getItems().lenght > 0) {
handler = master.getItems()[0].PropertyChanged;
}
}
// Returns settings for master panels
function getPanelSettings() {
var settings = {
ImagePath: PP.ImagePath,
ViewType: PP.Ui.NavigationItem,
PropertyChanged: handler,
IsRTL: map.getIsRTL(),
Parent: document.body
};
return settings;
}
// Creates master panel to work with bar factor
function createMapBarVisualPanel() {
var mapBarVisualPanel = new PP.Ui.MapBarVisualPanel(getPanelSettings());
return mapBarVisualPanel;
}
// Creates master panel to work with pie factor
function createMapPieVisualPanel() {
var mapPieVisualPanel = new PP.Ui.MapPieVisualPanel(getPanelSettings());
return mapPieVisualPanel;
}
// Creates master panel to work with arrow on the map
function createMapArrowVisualPanel() {
var mapArrowVisualPanel = new PP.Ui.MapArrowVisualPanel(getPanelSettings());
return mapArrowVisualPanel;
}
// Create master panel to work with arrows on the map
function createMapArrowsPanel() {
var mapArrowsPanel = new PP.Ui.MapArrowsPanel(getPanelSettings());
return mapArrowsPanel;
}
// Create master panel to work with markers on the map
function createMapMarkerPanel() {
var mapMarkerPanel = new PP.Ui.MapMarkerVisualPanel(getPanelSettings());
return mapMarkerPanel;
}
// Fills master with panels
function addPanels(master) {
// Add panel to work with bar factor
var mapBarVisualPanel = createMapBarVisualPanel();
master.addMasterPanel(mapBarVisualPanel);
// Add panel to work with pie factor
var mapPieVisualPanel = createMapPieVisualPanel();
master.addMasterPanel(mapPieVisualPanel);
// Add panel to work with arrow on the map
var mapArrowVisualPanel = createMapArrowVisualPanel();
master.addMasterPanel(mapArrowVisualPanel);
// Add panel to work with arrows
var mapArrowsPanel = createMapArrowsPanel();
master.addMasterPanel(mapArrowsPanel);
// Add panel to work with markers
var mapMarkerPanel = createMapMarkerPanel();
master.addMasterPanel(mapMarkerPanel);
}
// Create master to work with the map
var master = createMaster();
// Delete all panels from master
master.clearItems();
// Fill the master with panels
addPanels(master);
After executing the example the master containing panels to work with arrows, bar and pie factors, markers is created:
See also: