Example of Creating the ParetoDialog Component

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

1. Add links to the following files: PP.css, PP.Express.css.

Also add links to the following JS files: PP.js, PP.Metabase.js, PP.Express.js, and resources.ru.js.

2. In the <head> tag specify style for the elements:

<style type="text/css">
body, html
{
    height: 100%;
    width: 100%; 
    margin: 0;
    padding: 0;
    overflow: hidden;
} 
</style>

3. Then in the <head> tag add a script that creates a dialog box to set up the Pareto distribution:

<script type="text/javascript">
    var metabase, eaxAnalyzer, eaxMbService, waiter, paretoDialog;
    var IMAGE_PATH = "../Debug/img/";
    var info, eax;
    function Ready() {    
        // Determine language settings for resources 
        PP.setCurrentCulture(PP.Cultures.ru);
        // Specify path to the root folder with resources files
        PP.resourceManager.setRootResourcesFolder("../resources/");
    }
    // Function for creating a dialog for the Top N% setting dialog of Pareto distribution
    function openDial() {    
        // Create a component
        paretoDialog = new PP.Ui.ParetoDialog({
            Width: 400,
            Height: 230,
            Id: "FirstNPercent", // The Top N% setting         
            ResourceKey: "ExpRibbonTableParetoDialogFirstNPercent",
            Type: "percent", // Type - percent         
            LabelResourceKey: "ExpRibbonTableParetoDialogLabel",
            DescriptionResourceKey: "ExpRibbonTableParetoDialogFirstNPercentDescription"    
        });    
        // Display document    
        paretoDialog.show();
    }    
</script>

4. In the <body> tag as a value of the onLoad attribute specify name of the function that sets resources culture and sets path to the root folder that contains resources. Inside the tag add a button, clicking which creates a dialog box to set up the Pareto data distribution:

<body onselectstart="return false" class="PPNoSelect" onload="Ready()">
    <!-- Button, clicking which creates the First N% setup dialog box 
         Pareto distribution -->
    <input type="button" value="Show paretoDialog" onclick="openDial()" />
</body>

5. At the end of the document insert a code that sets styles corresponding to client's operating system, to the document.body node:

<script type="text/javascript">
    PP.initOS(document.body);
</script>

After executing the example clicking the Show paretoDialog button places the ParetoDialog component on the HTML page:

See also:

ParetoDialog