This repository has been moved to http://modeln.github.com/sDashboard
A simple & light weight dashboard framework in javascript
sDashboard is a jQuery plugin that converts an array of objects into a dashboard. Each object in the array would be rendered as a dashboard widget that can be rearranged by dragging around.
sDashboards has built in support for rendering datatable's and flotr2 charts. It also has support to listen for events such as table row click, chart data click and data selection built-in.
view an example at : example
The current version of the dashboard includes the following features
Current version : V2.0 (aka Salt&Pepper)
Previous version : V1.0
sDashboard depends on the following libraries
To set up a basic dashboard :
<!-- load jquery ui css theme -->
<link type="text/css" href="https://github.com/niki4810/sDashboard/blob/master/css/jquery-ui.css" rel="stylesheet" />
<!-- load the sDashboard css -->
<link href="https://github.com/niki4810/sDashboard/blob/master/./sDashboard.css" rel="stylesheet">
<!-- load jquery library -->
<script src="https://github.com/niki4810/sDashboard/raw/master/libs/jquery/jquery-1.8.2.js" type="text/javascript"></script>
<!-- load jquery ui library -->
<script src="https://github.com/niki4810/sDashboard/raw/master/libs/jquery/jquery-ui.js" type="text/javascript"></script>
<!-- load datatables library -->
<script src="https://github.com/niki4810/sDashboard/raw/master/libs/datatables/jquery.dataTables.js"></script>
<!-- load flot charting library -->
<script src="https://github.com/niki4810/sDashboard/raw/master/libs/float/jquery.flotr2.min.js" type="text/javascript"></script>
<!-- load sDashboard library -->
<script src="https://github.com/niki4810/sDashboard/raw/master/./jquery-sDashboard.js" type="text/javascript"></script>
<ul id="myDashboard"></ul>var widgetDefinitions =[
{
widgetTitle : "Widget 1" //Title of the widget
widgetId: "Widget1" //unique id for the widget
widgetContent: "Some Random Content" //content for the widget
},
{
widgetTitle : "Widget 1" //Title of the widget
widgetId: "Widget1" //unique id for the widget
widgetContent: "Some Random Content" //content for the widget
}
]$("#myDashboard").sDashboard({
dashboardData : widgetDefinitions
});Currently while defining the widget definitions you can use the following options
Title of the dashboard widget
A unique id for the dashboard widget
Type of widget, possible values are : table , chart . When set to table, the widget renders as a data table with default row click event built-in. If its a chart, the widget gets rendered as a flotr2 chart. The chart type depends on the options you pass to the widgetContent.
Default value is false, when set to true, registers a chart selection event instead of chart click on the flotr2 charts. Generally turn on this setting, if you are using a line chart, for ease of selecting chart data.
When using a basic widget, it can represent an string or any html dom element. For example, if a dom element already exists on the page, and you want to render it as a dashboard widget, simply get a hook to the dom element using $("#id") (or any jQuery selector) and pass it to the widgetDefinition by setting it on the widgetContent.
if widgetType is set to chart, the widgetContent is set as an object with two keys, data and options, a sample setup looks like
var chartData; //flort2 data
var charOptions; //flotr2 options
$("#myDashboard").sDashboard("addWidget",{
widgetId : "id123",
widgetTitle: "Widget Title",
widgetType : "chart",
//isADonut : True //uncomment if the chart is a donut chart
widgetContent : {
data : chartData,
options : chartOptions
}
});
NOTE: chartData and chartOptions should be constructed based on flotr2 documentation, please see the flotr2 documentation for more details on settings can be found on flotr2 documentation page. You can also refer to the demo example of sDashboard.
table , it expected to set as : var tableData = {
"aaData" : [[0,2],[2,4],[4,6],[6,8]],
"aoColumns" : [{
"sTitle" : "Col A"
},{
"sTitle: : "Col B"
}
]
};
$("#myDashboard").sDashboard("addWidget",{
widgetId : "id123",
widgetTitle: "Widget Title",
widgetType : "table",
widgetContent : tableData
});
NOTE: aaData, aoColumns and sTitle are datatables specific keywords, please refer to datatable documentation for more details on this.
To add a widget simple call the addWidget method and pass in the widget definition that needs to be added.
$("#myDashboard").sDashboard("addWidget", {
widgetTitle : "Widget 7",
widgetId : "id77",
widgetContent : "Some Content"
});
To delete a widget simple call the removeWidget method and pass in the widget id that you want to remove from the dashboard
$("#myDashboard").sDashboard("removeWidget", "id7");
To get the array of widget definitions in the current dashboard you can use the getDashboarData api
var arr = $("#myDashboard").sDashboard("getDashbaordData");
Alternatively you can also, use the getter on the dashboardData options
var arr = $("#myDashboard").sDashboard("option","dashboardData");
To register for a row click event on a table widget simple set a listener as follows
//table row clicked event example
$("#myDashboard").bind("sdashboardrowclicked", function(e, data) {
alert("table row clicked");
if (console) {
console.log("table row clicked, for widget: " + data.selectedWidgetId);
}
});
To register for a plot selection event on a chart widget simply set a listener as follows
//plot selected event example
$("#myDashboard").bind("sdashboardplotselected", function(e, data) {
alert("plot selected");
if (console) {
console.log("chart range selected, for widget: " + data.selectedWidgetId);
}
});To register for a plot click event on a chart widget simply set a listener as follows
//plot click event example
$("#myDashboard").bind("sdashboardplotclicked", function(e, data) {
alert("plot clicked");
if (console) {
console.log("chart clicked, for widget: " + data.selectedWidgetId);
}
});
When widgets are rearranged by dragging around, the sDashboard dispatches a sdashboardorderchanged event. The event carries an array of sortedDefinitions which are stored with a key sortedDefinitions
$("#myDashboard").bind("sdashboardorderchanged", function(e, data) {
console.log(data.sortedDefinitions);
});One of the major change I've made is to replace slot charts with flotr2 library, I ve been researching many charting libraries and I strongly feel that flotr2 is the best charting library in terms of the features and ease of use it provides. Hence went forward with this library.
Special thanks to the following project which are a great source of inspiration for the sDashboard framework.
sDashboard is heavily inspired from flex dashboard framework, more details flex dashboard can be found at: link
sDashboard uses Flotr2 charts to render charts within widgets, more details about flotr2 charts can be found at link
sDashboard uses datatables library to render table grids, more details about datatables can be found at link
Few portions for sDashboard look and feel have been inspired from the following example on the jQuery UI project pages
The MIT License (MIT)
Copyright (c) 2012 Nikhilesh Katakam
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.