html5自定义dashboard,sDashboard简单轻量级的jquery图表插件

sDashboard是一个简单、轻量级的jquery图表插件。

sDashboard能将对象数组转换为jQuery图表的插件。每个对象数组将被渲染成一张图表，并且这张图表是可以被拖动、放大和关闭的。

sDashboard支持了渲染DataTable和flotr2图。它也支持侦听事件如单击图表数据表行，单击并选择图表数据。

创建一个最基本的图表

在文件头部引入以下文件

调用插件

$(function(){

var randomString = "Lorem ipsum dolor sit amet,consectetur adipiscing elit. Aenean lacinia mollis condimentum. Proin vitae ligula quis ipsum elementum tristique. Vestibulum ut sem erat.";

//dashboard json data

//this is the data format that the dashboard framework expects

//**********************************************//

var dashboardJSON = [{

widgetTitle : "Bubble Chart Widget",

widgetId : "id009",

widgetType : "chart",

enableRefresh: true,

refreshCallBack : function(widgetId){

var refreshedData = {

data : myExampleData.constructBubbleChartData(),

options : myExampleData.bubbleChartOptions

};

return refreshedData;

},

widgetContent : {

data : myExampleData.bubbleChartData,

options : myExampleData.bubbleChartOptions

}

}, {

widgetTitle : "Table Widget",

widgetId : "id3",

widgetType : "table",

enableRefresh : true,

refreshCallBack : function(widgetData){

return {

"aaData" : [myExampleData.constructTableWidgetData(),

myExampleData.constructTableWidgetData(),

myExampleData.constructTableWidgetData(),

myExampleData.constructTableWidgetData(),

myExampleData.constructTableWidgetData(),

myExampleData.constructTableWidgetData(),

myExampleData.constructTableWidgetData()

],

"aoColumns" : [{

"sTitle" : "Engine"

}, {

"sTitle" : "Browser"

}, {

"sTitle" : "Platform"

}]

};

},

widgetContent : myExampleData.tableWidgetData

}, {

widgetTitle : "Text Widget",

widgetId : "id2",

enableRefresh : true,

refreshCallBack : function(widgetId){

return randomString + new Date();

},

widgetContent : randomString

}, {

widgetTitle : "Pie Chart Widget",

widgetId : "id001",

widgetType : "chart",

widgetContent : {

data : myExampleData.pieChartData,

options : myExampleData.pieChartOptions

}

}, {

widgetTitle : "bar Chart Widget",

widgetId : "id002",

widgetType : "chart",

enableRefresh: true,

refreshCallBack : function(widgetId){

var refreshedData = {

data : myExampleData.constructBarChartData(),

options : myExampleData.barChartOptions

};

return refreshedData;

},

widgetContent : {

data : myExampleData.barChartData,

options : myExampleData.barChartOptions

}

}, {

widgetTitle : "line Chart Widget",

widgetId : "id003",

widgetType : "chart",

getDataBySelection : true,

widgetContent : {

data : myExampleData.lineChartData,

options : myExampleData.lineChartOptions

}

}, {

widgetTitle : "Adding an existing dom element",

widgetId : "tweet123",

widgetContent : $("#myTweets")

}];

//basic initialization example

$("#myDashboard").sDashboard({

dashboardData : dashboardJSON

});

});