Javascript 在移动设备上使用库primefaces时显示图表时出错
我正在为移动应用jsf编程一个网站。在我的代码中，我使用lib primefaces mobile，所有信息在mobile上都显示良好。但手机屏幕上的图表显示错误，图表大小大于手机屏幕大小。当你水平转动手机时，手机壳是打开的。我不知道如何在手机屏幕上正确显示图表。 麦可德Javascript 在移动设备上使用库primefaces时显示图表时出错,javascript,jquery,jsf,mobile,primefaces,Javascript,Jquery,Jsf,Mobile,Primefaces,我正在为移动应用jsf编程一个网站。在我的代码中，我使用lib primefaces mobile，所有信息在mobile上都显示良好。但手机屏幕上的图表显示错误，图表大小大于手机屏幕大小。当你水平转动手机时，手机壳是打开的。我不知道如何在手机屏幕上正确显示图表。 麦可德 在里面 出来 *** $（文档）.ready（函数（）{ lv.netflow.chartPool.config({ nodeId名称：“#nodeId”， //urlUpdateData:'http://103.27.23
在里面
出来
***
$（文档）.ready（函数（）{
lv.netflow.chartPool.config({
nodeId名称：“#nodeId”，
//urlUpdateData:'http://103.27.236.20:8080/analyzer/getDataRealTime',
urlUpdateData:'http://192.168.65.121:8080/analyzer/getDataRealTime',
视图类型：lv.netflow.CHART\u TYPE.RUNTIME
});
lv.netflow.chartPool.addChart([
{
chartId:“#在图表中”，
yAxisId:#图表中的y轴“，
传奇：“传奇中”
}
]);
lv.netflow.chartPool.drawAll（）；
lv.netflow.chartPool.startAll（）；
});
***
***<script src="#{request.contextPath}/resources/js/netflow.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
lv.netflow.chartPool.config({
nodeIdName: "#nodeId",
//urlUpdateData: 'http://103.27.236.20:8080/analyzer/getDataRealTime',
urlUpdateData: 'http://192.168.65.121:8080/analyzer/getDataRealTime',
viewType: lv.netflow.CHART_TYPE.RUNTIME
});
lv.netflow.chartPool.addChart([
{
chartId: "#in-chart",
yAxisId: "#in-chart-y-axis",
legend: "in-legend"
}
]);
lv.netflow.chartPool.drawAll();
lv.netflow.chartPool.startAll();
});
</script>***
***
$（文档）.ready（函数（）{
lv.netflow.chartPool.config({
nodeId名称：“#nodeId”，
//urlUpdateData:'http://103.27.236.20:8080/analyzer/getDataRealTime',
urlUpdateData:'http://192.168.65.121:8080/analyzer/getDataRealTime',
视图类型：lv.netflow.CHART\u TYPE.RUNTIME
});
lv.netflow.chartPool.addChart([
{
chartId:“#在图表中”，
yAxisId:#图表中的y轴“，
传奇：“传奇中”
}
]);
lv.netflow.chartPool.drawAll（）；
lv.netflow.chartPool.startAll（）；
});
***
var lv = lv || {};
lv.netflow = (function(window){
//private variable
var Math = window.Math,
document = window.document,
netflow = window.lv.netflow || {},
$ = window.jQuery,
Rickshaw = window.Rickshaw;
//public variable
netflow.CHART_TYPE = {
RUNTIME:{type:"RUNTIME",increment:1},
DAY:{type:"DAY",increment:60},
MONTH:{type:"MONTH",increment:3600}
};
//Class
// Constructor
var chartPool = function(options){
this.numChart = 0;
this.chartMap = [];
this.config = function(options){
if (!options.nodeIdName) throw "Netflow needs a reference to an nodeIdName";
this.nodeIdName = options.nodeIdName;
this.viewType = options.viewType;
this.viewTypeId = options.viewTypeId;
this.timeSelectedId = options.timeSelectedId;
this.urlUpdateData = options.urlUpdateData;
};
if(options) this.config(options);
};
chartPool.prototype.addChart =function(charts){
for(var i in charts){
var key = charts[i].name || "chart-"+i;
var chart = charts[i];
chart.urlUpdateData = chart.urlUpdateData || this.urlUpdateData;
chart.nodeIdName = chart.nodeIdName || this.nodeIdName;
chart.viewTypeId = chart.viewTypeId || this.viewTypeId;
chart.viewType = chart.viewType || this.viewType || lv.netflow.CHART_TYPE[$(chart.viewTypeId).val()];
chart.timeSelectedId = chart.timeSelectedId || this.timeSelectedId;
if(!(charts[i] instanceof netflowChart)){
chart = new netflowChart(charts[i]);
}
this.chartMap.push({key:key,value:chart});
this.numChart++;
}
};
chartPool.prototype.drawAll = function(){
for(var item in this.chartMap){
var chart = this.chartMap[item].value;
chart.nodeIdValue = $(chart.nodeIdName).val() ;
chart.initChart();
}
this.updateDataAll(true);
};
chartPool.prototype.startAll = function(){
var flag = true;
for(var i in this.chartMap){
if(this.chartMap[i].value.viewType != netflow.CHART_TYPE.RUNTIME){
flag = false;
break;
}
}
if(false == flag ) throw "Can't start all, have a chart not type RUNTIME";
var _this = this;
_this.timer = setInterval( function() {
//Update data first
for(var item in _this.chartMap){
_this.chartMap[item].value.updateDataRealTime();
}
//After update chart => all chart draw not delay
for(var item in _this.chartMap){
_this.chartMap[item].value.graph.update();
}
}, 1000 );
};
chartPool.prototype.updateDataAll = function(isInitData){
this.viewType = lv.netflow.CHART_TYPE[$(this.viewTypeId).val()] || this.viewType;
if(this.viewType.type != "RUNTIME"){
for(var item in this.chartMap){
var chart = this.chartMap[item].value;
isInitData ? chart.initData(): chart.cleanData();
chart.updateDataReport();
}
}
}
chartPool.prototype.changeNodeId = function(){
this.updateDataAll(false);
}
chartPool.prototype.changeViewType = function(){
this.updateDataAll(true);
}
chartPool.prototype.changeTimeSelected = function(){
this.updateDataAll(true);
}
///////////////////////////////////////////////////
// Constructor
var netflowChart = function (options){
if(!options.nodeIdName) throw "Netflow chart needs a reference to an nodeIdName";
if(!options.urlUpdateData) throw "Netflow chart needs a urlUpdateData";
if(!options.viewType) throw "Netflow chart needs a view Type";
if(options.viewType.type != "RUNTIME" && !options.timeSelectedId) throw "Netflow chart report needs a reference to an startTimeId";
this.nodeIdName = options.nodeIdName;
this.chartId = options.chartId || "#netflow-chart";
this.yAxisId = options.yAxisId || "y-axis";
this.legend = options.legend;
this.urlUpdateData = options.urlUpdateData;
this.viewType = options.viewType;
this.viewTypeId = options.viewTypeId;
this.timeSelectedId = options.timeSelectedId ;
this.name = options.name || "new chart";
this.flowDirection = options.flowDirection;
this.chartWidth = options.chartWidth || 400;
this.chartHeight = options.chartHeight || 120;
this.numDataRunTime = options.numDataRunTime || 300;
this.chartRenderer = options.chartRenderer;
this.nodeIdValue =null;
this.dataSeries ={};
this.graph;
this.startTime = Number(new Date())/1000;
this.endTime =Number(new Date())/1000;
this.lastUpdateTime = Math.floor(Number(new Date())/1000)-this.numDataRunTime;
};
////////////////////////////////////////////////////////////////////////
netflowChart.prototype.initRangeView = function(timestamp){
var _this = this;
_this.viewType = lv.netflow.CHART_TYPE[$(_this.viewTypeId).val()] || _this.viewType;
if(null != timestamp){
var date = new Date(Number(timestamp));
if(_this.viewType.type =="DAY"){
var newDate = new Date(date.getFullYear(), date.getMonth(),date.getDate());
_this.startTime = Math.round((newDate.getTime()/1000));
newDate = new Date(date.getFullYear(),date.getMonth(), date.getDate()+1);
_this.endTime = Math.round((newDate.getTime()/1000));
}
if(_this.viewType.type =="MONTH"){
var newDate = new Date(date.getFullYear(), date.getMonth());
_this.startTime = Math.round((newDate.getTime()/1000));
newDate = new Date(date.getFullYear(), date.getMonth()+1);
_this.endTime = Math.round((newDate.getTime()/1000));
}
}
};
netflowChart.prototype.initData = function(){
var _this = this;
if(_this.viewType.type == "RUNTIME"){
_this.endTime = Math.floor(Number(new Date())/1000);
_this.startTime = _this.endTime - _this.numDataRunTime;
}else{
_this.initRangeView($(_this.timeSelectedId).val());
}
for(var key in _this.dataSeries){
var data = _this.dataSeries[key];
data.length = 0;
for(var _x = _this.startTime;_x < _this.endTime;_x = _x + _this.viewType.increment){
data.push({x:_x,y:0});
}
}
};
netflowChart.prototype.initChart =function(){
var _this = this;
// Create Series
var series = [];
if(null == _this.flowDirection){
_this.chartRenderer = _this.chartRenderer || "line";
_this.dataSeries["IN"] = [];
_this.dataSeries["OUT"] = [];
series = [{name:"IN",data: _this.dataSeries["IN"],color:"#4682B4"},
{name:"OUT",data: _this.dataSeries["OUT"],color:"#EF6432"}];
}else{
_this.chartRenderer = _this.chartRenderer || "area";
_this.dataSeries[_this.flowDirection] = [];
series = [{name: _this.flowDirection, data: _this.dataSeries[_this.flowDirection],color:"#4682B4"}];
}
_this.initData(_this.currentTime);
_this.graph = new Rickshaw.Graph({
element: document.querySelector(_this.chartId),
width: _this.chartWidth,
height: _this.chartHeight,
renderer: _this.chartRenderer,
series: series
});
var time = new Rickshaw.Fixtures.Time.Local();
// time.units.push({
// name: 'week',
// seconds: 86400 * 7,
// formatter: function(d) {
// return d.getUTCDate();
// }
// });
var timeUnit = time.unit('week');
timeUnit.formatter = function(d) {
return d.getUTCDate();
};
time.units[time.units.indexOf(timeUnit)] = timeUnit;
var xAxis = new Rickshaw.Graph.Axis.Time( {
graph: _this.graph,
timeFixture: time
} );
var yAxis = new Rickshaw.Graph.Axis.Y( {
graph: _this.graph,
orientation: 'right',
tickFormat: _this.utils.formatBase1024KMGTP,
element: document.querySelector(_this.yAxisId)
} );
if(_this.legend){
var legend = new Rickshaw.Graph.Legend( {
graph: _this.graph,
element: document.getElementById(_this.legend)
} );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: _this.graph,
legend: legend
} );
/*var order = new Rickshaw.Graph.Behavior.Series.Order( {
graph: _this.graph,
legend: legend
} );*/
var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
graph: _this.graph,
legend: legend
} );
}
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: _this.graph,
xFormatter: function(x) { return _this.utils.getDetailsTime(x)},
yFormatter: function(y) { return _this.utils.formatBase1024KMGTP(y) }
} );
_this.graph.render();
};
netflowChart.prototype.updateDataReport = function(){
var _this = this;
var _nodeID = $(_this.nodeIdName).val() ;
if(_nodeID.length > 0){
$.ajax({
url: _this.urlUpdateData,
data: { nodeId: _nodeID,flowDirection:_this.flowDirection,startTime: _this.startTime,endTime:_this.endTime,viewType:_this.viewType.type},
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
async: false,
contentType: "application/json;charset=utf-8",
success: function (result) {
var _dataResult = result["data"];
if(null != _dataResult){
for(var key in _this.dataSeries){
var data = _this.dataSeries[key];
updateDataChart(data,_dataResult[key] || _dataResult);
};
}
function updateDataChart(dataChart,_data){
var i =0;
for(var item in _data){
var timeValue = Number(item);
for(;i<dataChart.length;i++){
if(dataChart[i+1] && timeValue < dataChart[i+1].x){
dataChart[i] = {x: timeValue,y: _data[item]};
i++;
break;
}
}
}
}
_this.graph.update();
},
error: function () {
}
});
}
};
netflowChart.prototype.updateDataRealTime = function(){
var _this = this;
for(var key in _this.dataSeries){
var data = _this.dataSeries[key];
//remove first element
data.shift();
//add last element
data.push({x:data[data.length-1].x+1,y:0});
};
//var _nodeID = this.nodeIdValue.val();
var _nodeID = $(_this.nodeIdName).val() ;
if(_nodeID != _this.nodeIdValue){
//window.chartDialogLoading.show();
_this.nodeIdValue = _nodeID;
_this.cleanData();
_this.lastUpdateTime = Math.floor(Number(new Date())/1000)-_this.numDataRunTime;
}
if(typeof(_nodeID) != 'undefined'){
$.ajax({
url: _this.urlUpdateData,
data: { nodeId: _nodeID,flowDirection:_this.flowDirection,lastUpdateTime: _this.lastUpdateTime },
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
async: false,
contentType: "application/json;charset=utf-8",
success: function (result) {
var _dataResult = result["data"];
if(null != _dataResult){
for(var key in _this.dataSeries){
var data = _this.dataSeries[key];
updateDataChart(data,_dataResult[key] || _dataResult);
};
}
function updateDataChart(dataChart,_data){
for(var i =0;i<_this.numDataRunTime;i++){
if(dataChart[i].x > _this.lastUpdateTime){
if(null != _data[dataChart[i].x]){
dataChart[i].y = _data[dataChart[i].x];
_this.lastUpdateTime = dataChart[i].x;
}
}
}
}
},
error: function () {
}
});
}
};
netflowChart.prototype.cleanData = function(){
var _this = this;
for(var key in _this.dataSeries){
var data = _this.dataSeries[key];
for(var i =0;i< data.length;i++){
data[i] = {x:data[i].x,y:0};
}
};
};
netflowChart.prototype.drawChart = function(){
this.nodeIdValue = $(this.nodeIdName).val() ;
this.initChart();
};
netflowChart.prototype.startRunTime = function(){
var _this = this;
_this.timer = setInterval( function() {
_this.updateDataRealTime();
_this.graph.update();
}, 1000 );
};
netflowChart.prototype.utils ={
formatBase1024KMGTP : function(y) {
var abs_y = Math.abs(y);
if (abs_y >= 1125899906842624) { return (y / 1125899906842624).toFixed(1) + " PB" }
else if (abs_y >= 1099511627776){ return (y / 1099511627776).toFixed(1) + " TB" }
else if (abs_y >= 1073741824) { return (y / 1073741824).toFixed(1) + " GB" }
else if (abs_y >= 1048576) { return (y / 1048576).toFixed(1) + " MB" }
else if (abs_y >= 1024) { return (y / 1024).toFixed(1) + " KB" }
else if (abs_y < 1 && y > 0) { return y.toFixed(2) + " bytes" }
else if (abs_y === 0) { return '' }
else { return y + " bytes" }
},
getDetailsTime : function(x){
var dateTime = new Date(x*1000);
var result = dateTime.getHours().toString()+ ":" + dateTime.getMinutes().toString()+ ":" + dateTime.getSeconds().toString();
result += " ";
result += dateTime.getDate().toString() + "/" + (dateTime.getMonth()+1).toString()+"/"+dateTime.getFullYear().toString();
return result ;
},
bitToSize :function(bit) {
var sizes = ['Bit', 'KB', 'MB', 'GB', 'TB'];
if (bit == 0) return '0';
var i = parseInt(Math.floor(Math.log(bit) / Math.log(1024)));
return Math.round(bit / Math.pow(1024, i), 2) + ' ' + sizes[i];
},
bitToSizeForAxis : function(bit) {
var sizes = ['Bit', 'KB', 'MB', 'GB', 'TB'];
if (bit == 0) return '';
var i = parseInt(Math.floor(Math.log(bit) / Math.log(1024)));
return Math.round(bit / Math.pow(1024, i), 2) + ' ' + sizes[i];
},
parseDate : function(input) {
var parts = input.split('/');
// new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
return new Date(parts[2], parts[1]-1, parts[0]); // months are 0-based
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
netflow.ChartPool = chartPool;
netflow.NetflowChart = netflowChart;
return netflow;
})(window);
$(document).ready(function(){
lv.netflow.chartPool = new lv.netflow.ChartPool();
});
var lv=lv | |{}；
lv.netflow=（函数（窗口）{
//私有变量
var Math=window.Math，
document=window.document，
netflow=window.lv.netflow |{}，
$=window.jQuery，
人力车=窗户。人力车；
//公共变量
netflow.CHART\u类型={
运行时：{type:“RUNTIME”，增量：1}，
日期：{键入：“日期”，增量：60}，
月份：{类型：“月份”，增量：3600}
};
//阶级
//建造师
var chartPool=函数（选项）{
此值为0.numChart=0；
this.chartMap=[]；
this.config=函数（选项）{
如果（！options.nodeIdName）抛出“Netflow需要对nodeIdName的引用”；
this.nodeIdName=options.nodeIdName；
this.viewType=options.viewType；
this.viewTypeId=options.viewTypeId；
this.timeSelectedId=options.timeSelectedId；
this.urlUpdateData=options.urlUpdateData；
};
if（选项）this.config（选项）；
};
chartPool.prototype.addChart=函数（图表）{
用于（图表中的var i）{
var key=charts[i]。名称| |“chart-”+i；
var图表=图表[i]；
chart.urlUpdateData=chart.urlUpdateData | | this.urlUpdateData；
chart.nodeIdName=chart.nodeIdName | | this.nodeIdName；
chart.viewTypeId=chart.viewTypeId | | this.viewTypeId；
chart.viewType=chart.viewType | | this.viewType | | lv.netflow.chart_TYPE[$（chart.viewTypeId）.val（）；
chart.timeSelectedId=chart.timeSelectedId | | this.timeSelectedId；
if（！（图表[i]网络流程图实例））{
图表=新的网络流程图（图表[i]）；
}
this.chartMap.push（{key:key，value:chart}）；
这个.numChart++；
}
};
chartPool.prototype.drawAll=函数（）{
for（此.chartMap中的变量项）{
var chart=this.chartMap[item].value；
chart.nodeIdValue=$（chart.nodeIdName）.val（）；
initChart（）；
}
this.updateDataAll（true）；
};
chartPool.prototype.startAll=函数（）{
var标志=真；
for（此.chartMap中的变量i）{
if（this.chartMap[i].value.viewType！=netflow.CHART\u TYPE.RUNTIME）{
flag=false；
打破
}
}
如果（false==flag）抛出“不能全部启动，有一个图表不是运行时类型”；
var_this=这个；
_this.timer=setInterval（函数（）{
//首先更新数据
for（此.chartMap中的变量项）{
_this.chartMap[item].value.UpdateDarRealTime（）；
}
//更新图表后=>所有图表绘制不延迟
for（此.chartMap中的变量项）{
_this.chartMap[item].value.graph.update（）；
}
}, 1000 );
};
chartPool.prototype.updateDataAll=函数（isInitData）{
this.viewType=lv.netflow.CHART_TYPE[$（this.viewTypeId）.val（）]| | this.viewType；
if（this.viewType.type！=“运行时”）{
for（此.chartMap中的变量项）{
var chart=this.chartMap[item].value；
isInitData？chart.initData（）：chart.cleanData（）；
var lv = lv || {};
lv.netflow = (function(window){
//private variable
var Math = window.Math,
document = window.document,
netflow = window.lv.netflow || {},
$ = window.jQuery,
Rickshaw = window.Rickshaw;
//public variable
netflow.CHART_TYPE = {
RUNTIME:{type:"RUNTIME",increment:1},
DAY:{type:"DAY",increment:60},
MONTH:{type:"MONTH",increment:3600}
};
//Class
// Constructor
var chartPool = function(options){
this.numChart = 0;
this.chartMap = [];
this.config = function(options){
if (!options.nodeIdName) throw "Netflow needs a reference to an nodeIdName";
this.nodeIdName = options.nodeIdName;
this.viewType = options.viewType;
this.viewTypeId = options.viewTypeId;
this.timeSelectedId = options.timeSelectedId;
this.urlUpdateData = options.urlUpdateData;
};
if(options) this.config(options);
};
chartPool.prototype.addChart =function(charts){
for(var i in charts){
var key = charts[i].name || "chart-"+i;
var chart = charts[i];
chart.urlUpdateData = chart.urlUpdateData || this.urlUpdateData;
chart.nodeIdName = chart.nodeIdName || this.nodeIdName;
chart.viewTypeId = chart.viewTypeId || this.viewTypeId;
chart.viewType = chart.viewType || this.viewType || lv.netflow.CHART_TYPE[$(chart.viewTypeId).val()];
chart.timeSelectedId = chart.timeSelectedId || this.timeSelectedId;
if(!(charts[i] instanceof netflowChart)){
chart = new netflowChart(charts[i]);
}
this.chartMap.push({key:key,value:chart});
this.numChart++;
}
};
chartPool.prototype.drawAll = function(){
for(var item in this.chartMap){
var chart = this.chartMap[item].value;
chart.nodeIdValue = $(chart.nodeIdName).val() ;
chart.initChart();
}
this.updateDataAll(true);
};
chartPool.prototype.startAll = function(){
var flag = true;
for(var i in this.chartMap){
if(this.chartMap[i].value.viewType != netflow.CHART_TYPE.RUNTIME){
flag = false;
break;
}
}
if(false == flag ) throw "Can't start all, have a chart not type RUNTIME";
var _this = this;
_this.timer = setInterval( function() {
//Update data first
for(var item in _this.chartMap){
_this.chartMap[item].value.updateDataRealTime();
}
//After update chart => all chart draw not delay
for(var item in _this.chartMap){
_this.chartMap[item].value.graph.update();
}
}, 1000 );
};
chartPool.prototype.updateDataAll = function(isInitData){
this.viewType = lv.netflow.CHART_TYPE[$(this.viewTypeId).val()] || this.viewType;
if(this.viewType.type != "RUNTIME"){
for(var item in this.chartMap){
var chart = this.chartMap[item].value;
isInitData ? chart.initData(): chart.cleanData();
chart.updateDataReport();
}
}
}
chartPool.prototype.changeNodeId = function(){
this.updateDataAll(false);
}
chartPool.prototype.changeViewType = function(){
this.updateDataAll(true);
}
chartPool.prototype.changeTimeSelected = function(){
this.updateDataAll(true);
}
///////////////////////////////////////////////////
// Constructor
var netflowChart = function (options){
if(!options.nodeIdName) throw "Netflow chart needs a reference to an nodeIdName";
if(!options.urlUpdateData) throw "Netflow chart needs a urlUpdateData";
if(!options.viewType) throw "Netflow chart needs a view Type";
if(options.viewType.type != "RUNTIME" && !options.timeSelectedId) throw "Netflow chart report needs a reference to an startTimeId";
this.nodeIdName = options.nodeIdName;
this.chartId = options.chartId || "#netflow-chart";
this.yAxisId = options.yAxisId || "y-axis";
this.legend = options.legend;
this.urlUpdateData = options.urlUpdateData;
this.viewType = options.viewType;
this.viewTypeId = options.viewTypeId;
this.timeSelectedId = options.timeSelectedId ;
this.name = options.name || "new chart";
this.flowDirection = options.flowDirection;
this.chartWidth = options.chartWidth || 400;
this.chartHeight = options.chartHeight || 120;
this.numDataRunTime = options.numDataRunTime || 300;
this.chartRenderer = options.chartRenderer;
this.nodeIdValue =null;
this.dataSeries ={};
this.graph;
this.startTime = Number(new Date())/1000;
this.endTime =Number(new Date())/1000;
this.lastUpdateTime = Math.floor(Number(new Date())/1000)-this.numDataRunTime;
};
////////////////////////////////////////////////////////////////////////
netflowChart.prototype.initRangeView = function(timestamp){
var _this = this;
_this.viewType = lv.netflow.CHART_TYPE[$(_this.viewTypeId).val()] || _this.viewType;
if(null != timestamp){
var date = new Date(Number(timestamp));
if(_this.viewType.type =="DAY"){
var newDate = new Date(date.getFullYear(), date.getMonth(),date.getDate());
_this.startTime = Math.round((newDate.getTime()/1000));
newDate = new Date(date.getFullYear(),date.getMonth(), date.getDate()+1);
_this.endTime = Math.round((newDate.getTime()/1000));
}
if(_this.viewType.type =="MONTH"){
var newDate = new Date(date.getFullYear(), date.getMonth());
_this.startTime = Math.round((newDate.getTime()/1000));
newDate = new Date(date.getFullYear(), date.getMonth()+1);
_this.endTime = Math.round((newDate.getTime()/1000));
}
}
};
netflowChart.prototype.initData = function(){
var _this = this;
if(_this.viewType.type == "RUNTIME"){
_this.endTime = Math.floor(Number(new Date())/1000);
_this.startTime = _this.endTime - _this.numDataRunTime;
}else{
_this.initRangeView($(_this.timeSelectedId).val());
}
for(var key in _this.dataSeries){
var data = _this.dataSeries[key];
data.length = 0;
for(var _x = _this.startTime;_x < _this.endTime;_x = _x + _this.viewType.increment){
data.push({x:_x,y:0});
}
}
};
netflowChart.prototype.initChart =function(){
var _this = this;
// Create Series
var series = [];
if(null == _this.flowDirection){
_this.chartRenderer = _this.chartRenderer || "line";
_this.dataSeries["IN"] = [];
_this.dataSeries["OUT"] = [];
series = [{name:"IN",data: _this.dataSeries["IN"],color:"#4682B4"},
{name:"OUT",data: _this.dataSeries["OUT"],color:"#EF6432"}];
}else{
_this.chartRenderer = _this.chartRenderer || "area";
_this.dataSeries[_this.flowDirection] = [];
series = [{name: _this.flowDirection, data: _this.dataSeries[_this.flowDirection],color:"#4682B4"}];
}
_this.initData(_this.currentTime);
_this.graph = new Rickshaw.Graph({
element: document.querySelector(_this.chartId),
width: _this.chartWidth,
height: _this.chartHeight,
renderer: _this.chartRenderer,
series: series
});
var time = new Rickshaw.Fixtures.Time.Local();
// time.units.push({
// name: 'week',
// seconds: 86400 * 7,
// formatter: function(d) {
// return d.getUTCDate();
// }
// });
var timeUnit = time.unit('week');
timeUnit.formatter = function(d) {
return d.getUTCDate();
};
time.units[time.units.indexOf(timeUnit)] = timeUnit;
var xAxis = new Rickshaw.Graph.Axis.Time( {
graph: _this.graph,
timeFixture: time
} );
var yAxis = new Rickshaw.Graph.Axis.Y( {
graph: _this.graph,
orientation: 'right',
tickFormat: _this.utils.formatBase1024KMGTP,
element: document.querySelector(_this.yAxisId)
} );
if(_this.legend){
var legend = new Rickshaw.Graph.Legend( {
graph: _this.graph,
element: document.getElementById(_this.legend)
} );
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle( {
graph: _this.graph,
legend: legend
} );
/*var order = new Rickshaw.Graph.Behavior.Series.Order( {
graph: _this.graph,
legend: legend
} );*/
var highlight = new Rickshaw.Graph.Behavior.Series.Highlight( {
graph: _this.graph,
legend: legend
} );
}
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: _this.graph,
xFormatter: function(x) { return _this.utils.getDetailsTime(x)},
yFormatter: function(y) { return _this.utils.formatBase1024KMGTP(y) }
} );
_this.graph.render();
};
netflowChart.prototype.updateDataReport = function(){
var _this = this;
var _nodeID = $(_this.nodeIdName).val() ;
if(_nodeID.length > 0){
$.ajax({
url: _this.urlUpdateData,
data: { nodeId: _nodeID,flowDirection:_this.flowDirection,startTime: _this.startTime,endTime:_this.endTime,viewType:_this.viewType.type},
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
async: false,
contentType: "application/json;charset=utf-8",
success: function (result) {
var _dataResult = result["data"];
if(null != _dataResult){
for(var key in _this.dataSeries){
var data = _this.dataSeries[key];
updateDataChart(data,_dataResult[key] || _dataResult);
};
}
function updateDataChart(dataChart,_data){
var i =0;
for(var item in _data){
var timeValue = Number(item);
for(;i<dataChart.length;i++){
if(dataChart[i+1] && timeValue < dataChart[i+1].x){
dataChart[i] = {x: timeValue,y: _data[item]};
i++;
break;
}
}
}
}
_this.graph.update();
},
error: function () {
}
});
}
};
netflowChart.prototype.updateDataRealTime = function(){
var _this = this;
for(var key in _this.dataSeries){
var data = _this.dataSeries[key];
//remove first element
data.shift();
//add last element
data.push({x:data[data.length-1].x+1,y:0});
};
//var _nodeID = this.nodeIdValue.val();
var _nodeID = $(_this.nodeIdName).val() ;
if(_nodeID != _this.nodeIdValue){
//window.chartDialogLoading.show();
_this.nodeIdValue = _nodeID;
_this.cleanData();
_this.lastUpdateTime = Math.floor(Number(new Date())/1000)-_this.numDataRunTime;
}
if(typeof(_nodeID) != 'undefined'){
$.ajax({
url: _this.urlUpdateData,
data: { nodeId: _nodeID,flowDirection:_this.flowDirection,lastUpdateTime: _this.lastUpdateTime },
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
async: false,
contentType: "application/json;charset=utf-8",
success: function (result) {
var _dataResult = result["data"];
if(null != _dataResult){
for(var key in _this.dataSeries){
var data = _this.dataSeries[key];
updateDataChart(data,_dataResult[key] || _dataResult);
};
}
function updateDataChart(dataChart,_data){
for(var i =0;i<_this.numDataRunTime;i++){
if(dataChart[i].x > _this.lastUpdateTime){
if(null != _data[dataChart[i].x]){
dataChart[i].y = _data[dataChart[i].x];
_this.lastUpdateTime = dataChart[i].x;
}
}
}
}
},
error: function () {
}
});
}
};
netflowChart.prototype.cleanData = function(){
var _this = this;
for(var key in _this.dataSeries){
var data = _this.dataSeries[key];
for(var i =0;i< data.length;i++){
data[i] = {x:data[i].x,y:0};
}
};
};
netflowChart.prototype.drawChart = function(){
this.nodeIdValue = $(this.nodeIdName).val() ;
this.initChart();
};
netflowChart.prototype.startRunTime = function(){
var _this = this;
_this.timer = setInterval( function() {
_this.updateDataRealTime();
_this.graph.update();
}, 1000 );
};
netflowChart.prototype.utils ={
formatBase1024KMGTP : function(y) {
var abs_y = Math.abs(y);
if (abs_y >= 1125899906842624) { return (y / 1125899906842624).toFixed(1) + " PB" }
else if (abs_y >= 1099511627776){ return (y / 1099511627776).toFixed(1) + " TB" }
else if (abs_y >= 1073741824) { return (y / 1073741824).toFixed(1) + " GB" }
else if (abs_y >= 1048576) { return (y / 1048576).toFixed(1) + " MB" }
else if (abs_y >= 1024) { return (y / 1024).toFixed(1) + " KB" }
else if (abs_y < 1 && y > 0) { return y.toFixed(2) + " bytes" }
else if (abs_y === 0) { return '' }
else { return y + " bytes" }
},
getDetailsTime : function(x){
var dateTime = new Date(x*1000);
var result = dateTime.getHours().toString()+ ":" + dateTime.getMinutes().toString()+ ":" + dateTime.getSeconds().toString();
result += " ";
result += dateTime.getDate().toString() + "/" + (dateTime.getMonth()+1).toString()+"/"+dateTime.getFullYear().toString();
return result ;
},
bitToSize :function(bit) {
var sizes = ['Bit', 'KB', 'MB', 'GB', 'TB'];
if (bit == 0) return '0';
var i = parseInt(Math.floor(Math.log(bit) / Math.log(1024)));
return Math.round(bit / Math.pow(1024, i), 2) + ' ' + sizes[i];
},
bitToSizeForAxis : function(bit) {
var sizes = ['Bit', 'KB', 'MB', 'GB', 'TB'];
if (bit == 0) return '';
var i = parseInt(Math.floor(Math.log(bit) / Math.log(1024)));
return Math.round(bit / Math.pow(1024, i), 2) + ' ' + sizes[i];
},
parseDate : function(input) {
var parts = input.split('/');
// new Date(year, month [, date [, hours[, minutes[, seconds[, ms]]]]])
return new Date(parts[2], parts[1]-1, parts[0]); // months are 0-based
}
}
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////
netflow.ChartPool = chartPool;
netflow.NetflowChart = netflowChart;
return netflow;
})(window);
$(document).ready(function(){
lv.netflow.chartPool = new lv.netflow.ChartPool();
});
<script type="text/javascript">
$(window).resize(function() {
resizePlot();
lineChart_ext();
});
function resizePlot() {
widthDiv = $('#dashPanel').width();
heightDiv = $('#dashPanel').height();
$('#chart').height($('#dashPanel').height() * 0.93);
$('#chart').width($('#dashPanel').width() * 0.93);
chart.plot.replot({});
}
;
function lineChart_ext() {
this.cfg.axes = {
xaxis: {
min: 0,
max: 23,
tickInterval: 1,
autoscale: true,
tickOptions: {
formatString: '%d',
fontSize: '8pt'
}
},
yaxis: {
autoscale: true,
min: 0,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
autoscale: true,
fontSize: '10pt',
angle: 15
}
}
},
this.cfg.legend = {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
showLabels: true,
location: 'nw',
placement: 'inside',
fontSize: '11px',
fontFamily: ["Lucida Grande", "Lucida Sans Unicode", "Arial", "Verdana", "sans-serif"],
rendererOptions: {
seriesToggle: 'normal'
},
grid: {
backgroundColor: "white"
}
};
}
</script>
<p:panel id="dashPanel" style="width:85%;height: 420px;margin: auto;font-weight: bold;">
<h:panelGrid style="margin: auto;" columns="2">
<h:outputLabel value="Market" />
<h:selectOneMenu>
<f:selectItems value="#{monitorBean.services}"/>
</h:selectOneMenu>
</h:panelGrid>
<br/>
<hr />
<p:lineChart widgetVar="chart" id="chart" style="width:95%;" extender="lineChart_ext" value="#{monitorBean.cartesianChartModel}"
legendPosition="ne" title="Transactions Monitoring" />
</p:panel>