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: