To execute the example, the HTML page must contain the WorkbookBox component named workbookBox (see Example of Creating the WorkbookBox Component). Create the PeriodSeriesViewItem component and show it in the workbook:
// Get workbook properties panel var propertyBar = workbookBox.getPropertyBarView(); // Get time series control wizard var pswPanel = propertyBar.getPeriodSeriesViewPanel(); // Create the Series panel var periodSeriesViewItem = new PP.TS.Ui.PeriodSeriesViewItem({ Source: workbookBox.getSource(), // Data source ViewType: PP.Ui.NavigationItem, // Create a navigation bar Title: "Series", // OwnerMaster: propertyBar, // Process a series list loading event RootLoaded: function () { console.log("Loading data series..."); }, // Process data layout position change events DerivedVisibleChanged: function () { console.log("Time series layout position is changed"); } }); // Create the created panel to the workbook properties panel propertyBar.addMasterPanel(periodSeriesViewItem); // Expand the Series panel periodSeriesViewItem.expand();
After executing the example the PeriodSeriesViewItem component was created and displayed:
The RootLoaded event was fired on component creation. Handler of this event shows an appropriate notice in the browser console:
Loading data series...
See also: