Show contents 

Working with Time Series Analysis > Components > PeriodSeriesViewItem > Example of Creating the PeriodSeriesViewItem Component

Example of Creating the PeriodSeriesViewItem Component

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:

PeriodSeriesViewItem