Example of ChartMaster and ChartBox Components Collocation

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. Within the SCRIPT tag add a script for creation of the ChartBox and ChartMaster components:

<script type="text/javascript">
    var eaxData;
    var idTime;
    onReady = function () {
        var IMAGE_PATH = "../../build/img/"; //path to mages 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 to 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 chart container
        chartBox = new PP.Exp.Ui.ChartBox({
            Source: eaxAnalyzer, // Data source
            Width: 500,
            Height: 500,
            ParentNode: "tdChart",
            Service: eaxMbService,
            EditMode: "None",
            SelectionEnabled: true        
        });
        //Create a chart wizard
        master = new PP.Ui.ChartMaster({
            ParentNode: "chartM", //DOM node, in which chart wizard will be located
            Height: 500,
            Width: 300,
            ImagePath: IMAGE_PATH,
            DataView: chartBox
        });
        // Unsupported chart data types will not be displayed
        master.getItem(PP.Ui.ChartCommon).setShowUnsupportedTypes(false);     
        // Refresh control on the Tooltips tab
        master.getItem(PP.Ui.ChartTooltipCommon).refreshHeaderControl();     
    }
</script>

3. In the BODY tag place the created components:

<body onselectstart="return false" class="PPNoSelect" onload="onReady()">
    <table style="width: 100%">
        <tr>
            <td valign="top" width="350" id="chartM">
            </td>
            <td valign="top" id="tdChart">
            </td>
        </tr>
    </table>
</body>

After executing the example the express report chart and the chart setup wizard are placed on the page:

See also:

ChartMaster | ChartBox