add(visualizer: PP.Ui.DataVisualizer);
visualizer. Visualizer.
The add method adds a visualizer to collection of synchronized items.
To execute the example, the HTML page must contain the BubbleChart component named bubbleChart (see Example of Creating the BubbleChart Component). It is also required to create a copy of the BubbleChartSettings.js file where the settings variable name must be changed from settings to settings2. In the component file it is required to add the link to created file.
Change the height of current bubble chart and create a new bubble chart. Determine synchronization settings and set objects to be synchronized:
// Change height of current bubble chart
bubbleChart.setHeight(300);
// Get the DOM item of container where the second bubble chart will be rendered
var container = document.getElementById("bubbleChart");
// Create bubble chart
var bubbleChart2 = new PP.Ui.BubbleChart();
bubbleChart2.setSettings(settings2);
// Place bubble chart in the container
bubbleChart2.addToNode(container);
// Set sizes of the bubble chart
bubbleChart2.setWidth(551);
bubbleChart2.setHeight(300);
// Determine object of components synchronization
var syncSettings = {
SyncHover: true, // Highlighting synchronization
SyncSelection: true, // Selection synchronization
SyncTimeline: true, // Timeline synchronization
HoverSameTime: false // Synchronization of items with different steps of time line
}
var syncManager = new PP.Ui.DVSyncManager(syncSettings);
// Add synchronized components
syncManager.add(bubbleChart);
syncManager.add(bubbleChart2);
As a result height of current bubble chart is changed and new bubble chart is added. Data of bubble chart is synchronized:
Remove synchronization parameters:
// Remove synchronized object syncManager.remove(bubbleChart); // Remove all synchronized objects if any if (syncManager.getVisualizers() != null) syncManager.clear();
As a result bubble chart will not be synchronized.