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