Настраиваемый плагин JQuery UI Dashboard - PullRequest
Новая
       5

Настраиваемый плагин JQuery UI Dashboard

2 голосов
/ 16 февраля 2012

Я пытаюсь использовать плагин панели инструментов jquery для своего приложения.Я видел плагин, описанный в http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html.

. Это хороший плагин, но мои требования немного другие.Я хочу сделать только один вызов на сервер и получить данные, необходимые для отдельных виджетов панели инструментов.Мы будем использовать множество виджетов [в основном диаграмм] внутри панели мониторинга, поэтому мы чувствуем, что можем повысить производительность, получив конфигурацию и данные, необходимые для каждого виджета, выполнив один серверный вызов.Ссылка, которую я упомянул, виджеты после загрузки делают индивидуальный вызов для получения данных с сервера.

Есть ли такой плагин панели инструментов Jquery, который удовлетворит мое требование?Любые указатели на такие также будут очень полезны.

Спасибо, Anirban

1 Ответ

6 голосов
/ 17 февраля 2012

Итак, вот решение, которое я сделал !!

Я использовал тот же плагин, что и в http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html.

Подход, который я выбрал:

1) Сделал отдельный звонок на сервер, чтобы получить все данные с сервера. Модель на сервере, которую я сделал таким образом, чтобы она сразу возвращала данные, необходимые для графиков: Моя модель выглядела примерно так: 

public class DashboardWidget
{

    public DashboardWidget()
    {
        open = "true";
    }

    public string open { get; set; }
    public string title { get; set; }
    public string id { get; set; }
    public string column { get; set; }        
    public string url { get; set; }
    public object data { get; set; }
    public string chartype { get; set; }
}

1) Панель инструментов должна отвечать только за создание виджетов. Таким образом, все вызовы json на сервер были удалены. Dashboard будет отвечать только за создание виджетов и ничего больше.

2) Создан отдельный фреймворк, который будет отвечать только за присоединение содержимого к уже созданному div [созданному на приборной панели]

Вот код Jquery: 

  function CreateAndInitDashboard(jsonUrl, div) {

    var startId = 100;
    $.ajax({
        url: jsonUrl,
        context: document.body,
        success: function (data) {

            var dashboard = div.dashboard({
                // layout class is used to make it possible to switch layouts
                layoutClass: 'layout',
                // feed for the widgets which are on the dashboard when opened   

                layouts:
          [
            { title: "Layout1",
                id: "layout1",
                image: "/layouts/layout1.png",
                html: '<div class="layout layout-a"><div class="column first column-first"></div></div>',
                classname: 'layout-a'
            },
            { title: "Layout2",
                id: "layout2",
                image: "/layouts/layout2.png",
                html: '<div class="layout layout-aa"><div class="column first column-first"></div><div class="column second column-second"></div></div>',
                classname: 'layout-aa'
            },
            { title: "Layout3",
                id: "layout3",
                image: "layouts/layout3.png",
                html: '<div class="layout layout-ba"><div class="column first column-first"></div><div class="column second column-second"></div></div>',
                classname: 'layout-ba'
            },
            { title: "Layout4",
                id: "layout4",
                image: "/layouts/layout4.png",
                html: '<div class="layout layout-ab"><div class="column first column-first"></div><div class="column second column-second"></div></div>',
                classname: 'layout-ab'
            },
            { title: "Layout5",
                id: "layout5",
                image: "/layouts/layout5.png",
                html: '<div class="layout layout-aaa"><div class="column first column-first"></div><div class="column second column-second"></div><div class="column third column-third"></div></div>',
                classname: 'layout-aaa'
            }
          ]

            }); // end dashboard call

            dashboard.init(data.result); // passing the data to the dashboard !!! 

            $(data.result.data).each(function () {

                var element = this.id;
                if (this.chartype == 'PIE') {
                    $('#' + element + ' .widgetcontent').kendoChart({
                        title: { text: "" },
                        dataSource: this.data,
                        //chartArea: { background: "" },
                        legend: { position: "top" },
                        seriesDefaults: { type: "pie" },
                        series: [{
                            field: "ExposedLimit",
                            categoryField: "BusinessUnitName"
                        }],
                        tooltip: {
                            visible: true,
                            format: "{0:N0}"
                        }
                    });
                }
                else if (this.chartype == 'BAR') {
                    $('#' + element + ' .widgetcontent').kendoChart({
                        title: { text: "" },
                        dataSource: this.data,
                        sort: {
                            field: "SubmitMonth",
                            dir: "asc"
                        },
                        //chartArea: { background: "" },
                        legend: { position: "top" },
                        seriesDefaults: { type: "bar", labels: { visible: true, format: "{0}"} },
                        tooltip: { visible: true, format: "{0:N0}" },
                        series: [{ field: "Count", name: "CompanyA"}],
                        valueAxis: {
                            labels: { format: "{0}" }
                        },
                        //seriesClick: onSeriesClick,
                        categoryAxis: {
                            field: "SubmitMonth",
                            labels: { format: "{0:MM}" }
                        }
                    });
                }
            });


        }
    });


}

});

Надеюсь, это поможет!

Спасибо, Anirban

...