Personnalisé JQuery UI Dashboard plugin

Question

J'essaie d'utiliser un plugin de tableau de bord jquery pour mon application. J'ai vu le plugin comme documenté dans http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html.

Ceci est un bon plugin mais mon exigence est un peu différente. Je veux faire seulement 1 appel de serveur unique et obtenir les données requises pour les widgets individuels du tableau de bord. Nous allons utiliser beaucoup de widgets [des tableaux de façon générale] dans le tableau de bord, donc nous pensons que nous pouvons améliorer les performances en obtenant la configuration et les données requises pour chaque widget en faisant un appel de serveur. Le lien que j'ai mentionné, les widgets après qu'ils soient chargés font un appel individuel pour obtenir leurs données du serveur.

Y at-il un tel plugin de tableau de bord Jquery qui suffira à mes besoins. Toute indication à ce sujet sera également très utile.

Merci, Anirban

Answer 1

est la solution que je l'ai fait !! Voici donc J'ai utilisé le même plugin comme http://connect.gxsoftware.com/dashboardplugin/demo/dashboard.html.

L'approche que je prend:

1) a fait un appel séparé au serveur pour obtenir toutes les données du serveur. Le modèle sur le serveur que je l'ai fait de telle sorte qu'il renvoie les données requises pour les cartes d'un seul coup: Mon modèle avait l'air quelque chose comme ceci:

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) Le tableau de bord ne devrait être responsable de créer les widgets . Tous les appels JSON vers le serveur ont donc été supprimés. Dashboard ne sera responsable que de la création des widgets et rien d'autre.

2) a créé un cadre distinct qui sera responsable que pour fixer le contenu de la div déjà créé [créé par le tableau de bord]

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


     } 
    }); 


} 

}); 

Hope this helps !

Merci, Anirban