Customized JQuery UI Dashboard plugin

Question

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.

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.

Is there any such Jquery dashboard plugin that will suffice my requirement. Any pointers to such will also be very helpful.

Thanks, Anirban

Anirban Anirban · Accepted Answer · 2012-02-17T18:57:01

So here is the solution I did !!

I used the same plugin as in http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html.

The approach i took:

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)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)Created a separate framework which will be responsible only for attaching the contents to the already created div [created by the dashboard]

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}" }
                        }
                    });
                }
            });


        }
    });


}

});

Hope this helps !

Thanks, Anirban

Customized JQuery UI Dashboard plugin

1 Answers