Нажать на кнопку «Создать новый».
Откроется окно «Создать новый виджет».
В поле «Название» задать имя создаваемому виджету.
Заполнить поле «Код виджета (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"
    }
}

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