Нажать на кнопку «Создать новый».
Откроется окно «Создать новый виджет».
В поле «Название» задать имя создаваемому виджету.
Заполнить поле «Код виджета (JavaScript)». Пример можно увидеть в Приложении 1 внизу данной страницы.
Заполнить поле «Свойства виджета (JSON)». Пример можно увидеть в Приложении 2 внизу данной страницы.
Поле «Свойства виджета (JSON)» предназначено для того, чтобы при дальнейшей работе с данным виджетом аналитик имел возможность изменять настройки этих свойств.
Нажать на кнопку «Создать».
На панели инструментов появится новый виджет.

Индивидуальная настройка пользовательского виджета осуществляется в пункте «Пользовательские свойства».

Чтобы удалить виджет с панели инструментов необходимо щёлкнуть по виджету правой кнопкой мыши и выбрать «Удалить».

Если пользовательские виджеты созданы в одном из Dashboard Designer подключенному к определенному серверу, то добавленный виджет станет доступным во всех Dashboard Designer, подключенных к тому же серверу.

Если Dashboard Designer запущен на одном ПК, а на другом ПК в Dashboard Designer добавили пользовательский виджет, то Dashboard Designer на первом ПК следует перезапустить.

Пользовательскому виджету доступна «Привязка данных». Осуществляется аналогично стандартному виджету «График».

Привязка данных с помощью вкладки «Привязка данных» может работать не корректно! Зависит от функциональности добавляемого пользовательского виджета.

Приложение 1

var categories = w.data.rows.map(function(row) {

    return row[0];

});

var series = w.data.cols.map(function (col, colIndex) {

    var data = w.data.values[colIndex].map(function (value) {

        return parseFloat(value);

    });

    return {

        name: col,

        data: data

    }

});



Highcharts.chart(w.general.renderTo, {

    chart: {

        type: 'column'

    },

    xAxis: {

        categories: categories

    },

    yAxis: {

        title: {

            text: w.props.yAxisTitle

        }

    },

    plotOptions: {

        series: {

            dataLabels: {

                enabled: w.props.dataLabels.enabled,

                style: {

                    color: w.props.dataLabels.color,

                }

            }

        }

    },

    series: series

});

Приложение 2

{

    "yAxisTitle": "Расстояние",

    "dataLabels": {

         "enabled": true,

         "color": "red"

    }

}

Браузер не поддерживается