# Integrating OfficeExcel with external libraries

- Note about Microsoft Internet Explorer and the ModalDialog
- Hiding the ModalDialog
- Customising the ModalDialog
- ModalDialog integration
- Covering the scroll bars

This page shows you how you can easily integrate the charts with other external Javascript libraries. This particular example adds a context menu to the chart, of which the only option is to show a login dialog. This could, for example, be used to allow logging in to an admin area.

The dialog doesn't need to require user input - it could just be a static "Please wait..." type dialog, which is shown while a subsequent page loads that takes a few seconds.

The ModalDialog was originally an external library, however it's now part of the OfficeExcel package. It's also covered by the OfficeExcel license - so if you have an OfficeExcel license, then the ModalDialog is part of that.

    <script src="OfficeExcel.common.core.js">
    <script src="OfficeExcel.common.context.js">
    <script src="OfficeExcel.line.js">
    <script src="OfficeExcel.modaldialog.js">

    <script>
        window.onload = function ()
        {
            /**
            * Draw the line chart
            */
            var line = new OfficeExcel.Line('myLine', [45,12,16,18,44,54,23,21,56,58,33,47]);
            line.Set('chart.background.barcolor1', 'white');
            line.Set('chart.background.barcolor2', 'white');
            line.Set('chart.tickmarks', null);
            line.Set('chart.hmargin', 10);
            line.Set('chart.linewidth', 3);
            line.Set('chart.shadow', true);
            line.Set('chart.shadow.offset', 2);
            line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
            line.Set('chart.title', 'A line chart with context menu');

            // This defines a context menu which calls the given function. This function in turn shows the dialog
            line.Set('chart.contextmenu', [['Login to admin area...', function () {ModalDialog.Show('myDialog', 300);}}]]);

            line.Draw();
        }
    </script>

    <!-- This is the popup dialog-->
        <div id="myDialog" class="modalDialog" style="display: none">
            <b>Please login</b>
            <p>
                <table border="0">
                    <tr>
                        <td align="right" style="padding-top: 4px">Email</td>
                        <td><input type="text" size="20" name="email" style="width: 150px" /></td>
                    </tr>
                    <tr>
                        <td align="right" style="padding-top: 4px">Password</td>
                        <td><input type="password" size="20" name="password" style="width: 150px" /></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="right">
                            <input type="reset" value="Cancel" onclick="ModalDialog.Close()">
                            <input type="submit"
                                      name="submit"
                                      value="Login »"
                                      onclick="alert('This is just an example'); event.stopPropagation()">
                        </td>
                    </tr>
                </table>
            </p>
        </div>
    <!-- End of dialog -->

If you're interested in using this modal dialog, then you'll probably also want the CSS that styles it. This can be found in the "css" directory.

### Note about Microsoft Internet Explorer 8 and the ModalDialog

Microsoft Internet Explorer 8 only supports fixed positioning in strict rendering mode, therefore you must specify a DTD when using this browser. Eg:

    <!DOCTYPE html >

### Hiding the ModalDialog

To hide the ModalDialog (from a "Cancel" button for example), you can use the Close() method:

    <input type="reset" value="Cancel" onclick="ModalDialog.Close()">

### Customising the ModalDialog

You can customise the appearance of the ModalDialog by using three CSS classes, which are documented here. This page customises the dialog slightly by changing the shadow X/Y offsets:

    <style>
        /*
        * These are the CSS classes that you can use to customise the appearance of the ModalDialog. If you're trying to
        * override something which the scripts set, then because of the ordering you may need to use the "! important"
        * modifier.
        */

        /**
        * This is the semi-opaque background
        */
        .ModalDialog_background {
        }

        /**
        * This is the dialog itself
        */
        .ModalDialog_dialog {
            -webkit-box-shadow: gray 0 0 15px ! important;
            -moz-box-shadow: 0 0 15px gray ! important;
            box-shadow: 0 0 15px gray ! important;
        }

        /**
        * This is gray bar at the top of the dialog
        */
        .ModalDialog_topbar {
        }
    </style>

### ModalDialog integration

To integrate the ModalDialog look at the sample code above (the key line is where the context menu is defined). The method you should call is ModalDialog.Show(id, width). The id is the id of the layer to use. Only the .innerHTML is used, not the layer itself, so it can be hidden by setting the display CSS display property to none. The width is a number which is used as the width of the dialog.

The only library needed for the ModalDialog to work is OfficeExcel.modaldialog.js - you do not need to use OfficeExcel.common.js. This makes for far smaller download requirements.

### Covering the scroll bars

Normally, a regular DIV lives inside the browser and cannot cover the scroll bars. There is however a way to achieve this but it does mean that restructuring your website may be necessary, and it's done by using an IFRAME. The following steps are involved:

1. The index page of your website creates an IFRAME and sets it to cover the entire window.
2. This IFRAME then loads the website.
3. The DIV then covers the top-most window.

There is an example of this technique here

Please login

Email |
Password |