Для выполнения примера создайте html-страницу и выполните следующие действия:
1. В теге HEAD добавьте ссылки на следующие js и css-файлы:
PP.css;
PP.Express.css;
PP.Metabase.css;
PP.js;
PP.ChartMaster.js;
PP.MapMaster.js;
PP.MapChart.js;
PP.TabSheet.js;
PP.Metabase.js;
PP.Navigator.js;
PP.Express.js;
jquery.js;
resources.ru.js.
2. В теге SCRIPT добавьте код для создания компонентов ChartBox и ChartMaster:
<script type="text/javascript">
var eaxData;
var idTime;
onReady = function () {
var IMAGE_PATH = "../../build/img/"; //путь к папке с картинками
PP.resourceManager.setRootResourcesFolder("../resources/"); //путь к папке с ресурсами
PP.setCurrentCulture(PP.Cultures.ru); //выбор языковых настроек
var eaxAnalyzer, eaxMbService; //создаем компонент Waiter для ожидания соединения с метабазой
waiter = new PP.Ui.Waiter();
//Создаем экземпляр метабазы
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);
}
});
//Открываем метабазу
metabase.open(); // Создаём сервис для работы с экспресс-отчетами
eaxMbService = new PP.Exp.EaxMdService({
Metabase: metabase
});
//Открываем экспресс-отчёт с ключом 935529 на редактирование
eaxAnalyzer = eaxMbService.edit(935529);
//Создаём контейнер для диаграммы
chartBox = new PP.Exp.Ui.ChartBox({
Source: eaxAnalyzer, // Источник данных
Width: 500,
Height: 500,
ParentNode: "tdChart",
Service: eaxMbService,
EditMode: "None",
SelectionEnabled: true
});
//Создаём мастер диаграммы
master = new PP.Ui.ChartMaster({
ParentNode: "chartM", //DOM-вершина, в которой будет размещаться мастер диаграммы
Height: 500,
Width: 300,
ImagePath: IMAGE_PATH,
DataView: chartBox
});
// Неподдерживаемые типы данных диаграммы отображать не будем master.getItem(PP.Ui.ChartCommon).setShowUnsupportedTypes(false); // Обновим элемент управления на вкладке Подсказки master.getItem(PP.Ui.ChartTooltipCommon).refreshHeaderControl(); } </script>
3. В теге BODY разместите созданные компоненты:
<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>
После выполнения примера на странице будет размещена диаграмма экспресс-отчёта и мастер для её настройки:

См. также: