定制的JQuery UI仪表板插件 [英] Customized JQuery UI Dashboard plugin
问题描述
我正在尝试为我的应用程序使用jquery仪表板插件.我已经看到 http://connect.gxsoftware.com/dashboardplugin/demo中记录的插件/dashboard.html .
I am trying to use a jquery dashboard plugin for my application. I have seen the plugin as documented in http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html.
这是一个很好的插件，但是我的要求有些不同.我只想进行1个单一服务器调用，并获取仪表板的各个小部件所需的数据.我们将在仪表板内使用很多小部件(基本上是图表)，因此我们认为可以通过调用一个服务器来获取每个小部件所需的配置和数据，从而提高性能.我提到的链接是，加载小部件后的小部件将单独调用以从服务器获取其数据.
This is a good plugin but my requirement is a bit different. I want to make only 1 single server call and get the data required for the individual widgets of the dashboard. We will be using lot of widgets [charts basically] inside the dashboard so we feel we can improve the performance by getting the configuration and the data required for each widget by making one server call. The link I have mentioned, the widgets after they are loaded make individual call to get their data from the server.
有没有这样的Jquery仪表板插件可以满足我的要求.任何指向此类的指针也将非常有帮助.
Is there any such Jquery dashboard plugin that will suffice my requirement. Any pointers to such will also be very helpful.
谢谢， 阿尼班
推荐答案
所以这是我做的解决方案！
So here is the solution I did !!
我使用了与 http://connect.gxsoftware.com/dashboardplugin/demo/dashboard中相同的插件. html .
我采取的方法:
1)单独调用服务器以从服务器获取所有数据.我在服务器上执行的Model以这样的方式:一次返回了图表所需的数据:我的模型看起来像这样:
1) Made a separate call to the server to get all data from the server. The Model on the server I did in such a way that it returns the data required for the charts at one go : My model looked something like this :
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调用.仪表板将仅负责创建窗口小部件，而不会负责其他任何事情.
1)The dashboard should only be responsible to create the widgets. So all json calls to the server were removed. Dashboard will only be responsible for just creating the widgets and nothing else.
2)创建了一个单独的框架，该框架仅负责将内容附加到已创建的div [由仪表板创建]
2)Created a separate framework which will be responsible only for attaching the contents to the already created div [created by the dashboard]
这是Jquery代码:
Here is the Jquery code :
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}" }
}
});
}
});
}
});
}
});
希望这会有所帮助！
谢谢， 阿尼班
这篇关于定制的JQuery UI仪表板插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
