Example of Joint Use of the EaxRibbon and EaxDataBox Components

To execute the example, create an HTML page and execute the following operations:

1. Add references to the following JS and CSS files in the HEAD tag:

2. In the SCRIPT tag add code that creates the EaxRibbon and EaxDataBox components:

    var eaxData;
    var idTime;
    onReady = function () {
        var IMAGE_PATH = "../build/img/";//path to images folder
        PP.resourceManager.setRootResourcesFolder("../resources/");//path to resources folder
        PP.setCurrentCulture(PP.Cultures.ru);//select language settings
        var eaxAnalyzer, eaxMbService;
        //create the Waiter component to wait for repository connection
        waiter = new PP.Ui.Waiter();
        //Create a repository instance
        metabase = new PP.Mb.Metabase({
            Id: "WAREHOUSE",
            UserCreds: { UserName: "user", Password: "password" },
            StartRequest: function () {
                waiter.show();
            },
            EndRequest: function () {
                waiter.hide();
            },
            Error: function (sender, args) {
                alert(args.ResponseText);
            }
        });
        //Open repository
        metabase.open();
        //Create a service for working with express reports
        eaxMbService = new PP.Exp.EaxMdService({ Metabase: metabase });
        //Open express report with the 935529 key for edit
        eaxAnalyzer = eaxMbService.edit(935529);
        //Create a data area
       eaxData = new PP.Exp.Ui.EaxDataBox({
            ParentNode: "Eax",
            Source: eaxAnalyzer, //data source
            Service: eaxMbService, //service, via which data source is opened
            Width: "100%",
            Height: "100%",
            ImagePath: IMAGE_PATH,
            DataChanged: function (sender, args) {
                eaxData.refresh(args);
                rb.refresh(args);
            }
        });
        //Create a ribbon
        rb = new PP.Exp.Ui.EaxRibbon({
            ParentNode: "Ribbon",
            Source: eaxAnalyzer,
            Service: eaxMbService,
            ImagePath: IMAGE_PATH,
            ChartDataView: eaxData.getChartView(),//Specify map and chart views to work with ribbon settings
            MapDataView: eaxData.getMapView(),
            DataChanged: function (sender, args) {
                eaxData.refresh(args);
            }
        });
        window.onresize();
    }
    // Function for resizing the EaxDataBox container on page resize
    window.onresize = function ()
    {
        if (idTime)
            clearTimeout(idTime);
        idTime = setTimeout(function () {
            if (eaxData)
                eaxData.setSize(document.body.offsetWidth, document.body.offsetHeight - rb.getHeight());
            
            idTime = null;
        }, 100);
    };

3. Within the BODY tag place the created components and specify function to be executed on page loading:

<body onselectstart="return false" class="PPNoSelect" onload="onReady()">

    <div id="Ribbon" style="width: 100%;">

    </div>

    <div id="Eax">

    </div>

</body>

After executing the example the page will contain the EaxRibbon and EaxDataBox components:

On changing chart, map, table or bubble chart settings from the tool ribbon, the selected settings are applied to chart. Sizes of the components will change on browser window resizing.

See also:

EaxRibbon | Example of Creating the EaxRibbon Component