Javascript X-axix中JQPlot时间问题折线图
我需要你帮忙解决我代码中的一个问题。所以，让我解释一下我在“JQPlot折线图”中所面临的问题。我正在使用这个jqplot插件在live中开发一个信息图表。首先，我只为生活而发展。随着时间的推移，它正常工作。第二，我尝试加入另外一个功能，用过去一小时的数据显示实时值。它不起作用，但我得到了该折线图中所有过去的数据，如屏幕截图所示 如果我单独向数组变量Javascript X-axix中JQPlot时间问题折线图,javascript,php,html,Javascript,Php,Html,我需要你帮忙解决我代码中的一个问题。所以，让我解释一下我在“JQPlot折线图”中所面临的问题。我正在使用这个jqplot插件在live中开发一个信息图表。首先，我只为生活而发展。随着时间的推移，它正常工作。第二，我尝试加入另外一个功能，用过去一小时的数据显示实时值。它不起作用，但我得到了该折线图中所有过去的数据，如屏幕截图所示 如果我单独向数组变量（storedData.push（“.row1[$\u POST['parameters1']]）添加值，在JavaScript中，它的工作状态是实
（storedData.push（“.row1[$\u POST['parameters1']]）添加值，
函数图（）
{
//Try1------
var值=；
var metersparameters=；
var totalmetersparameters=metersparameters.length；
//var DataSeriesToPlot=[12,12:22:00]、[13,12:32:00]、[14,12:42:00]、[15,12:52:00]；
jQuery.noConflict（）；
jQuery（文档）.ready（函数（$）
{
var s=“[new Array（1）]”；
变量plot1、plot2、plot3、plot4、plot5；
函数renderGraph（）
{
如果（绘图）
plot.destroy（）；
绘图=$.jqplot（'图表'，[storedData]，
{
图例：
{
秀：没错，
位置：“内部”
},
系列：[
{
标签：metersparameters[]
},
{
yaxis：‘y2axis’，
标签：“fdg”，
showMarker：是的，
填充：假，
邻里持股：3，
线宽：0.2，
颜色：'#0571B6'，
fillAndStroke：是的，
渲染器选项：{
顺利：是的
}}],
轴线：{
xaxis：{
渲染器：$.jqplot.DateAxisRenderer，
选择：{
格式字符串：“%H:%M:%S”
},
号码:12,，
标签：“时间”
//滴答声间隔：“1秒”
},
//亚克斯：{
//标签：“价值”
//},
Y轴：{
最低：-1.12，
最高：3.12，
选择：{
formatString:“%.3f”
},
号码：10
}
}
});
}
var图表=新数组（“图表1”、“图表2”、“图表3”、“图表4”、“图表5”）；
var变量=[]；
//plot1=$.jqplot（'chart'，[storedData]）；
//plot=$.jqplot（eval（“charts[“+”]），eval{
plot=$.jqplot（eval（“charts[“+”]），[storedData]{
//plot1=$.jqplot（“图表1”，[storedData]{
//标题：“实时数据”，
图例：{
秀：没错，
位置：“内部”
},
系列：[
{
标签：metersparameters[]
},
{
yaxis：‘y2axis’，
标签：“fdg”，
showMarker：是的，
填充：假，
邻里持股：3，
线宽：0.2，
颜色：'#0571B6'，
fillAndStroke：是的，
渲染器选项：{
顺利：是的
}}],
轴线：{
xaxis：{
渲染器：$.jqplot.DateAxisRenderer，
选择：{
格式字符串：“%H:%M:%S”
},
号码:12,，
标签：“时间”
//滴答声间隔：“1秒”
},
//亚克斯：{
//标签：“价值”
//},
Y轴：{
最低：-1.12，
最高：3.12，
选择：{
formatString:“%.3f”
},
号码：10
}
},
光标：{
真的，
showTooltip:false，
秀：真的
},
荧光灯：{
useAxesFormatters:false，
showMarker:false，
节目：假
},
荧光灯：{
秀：没错，
showLabel:true，
showTooltip:true，
useAxesFormatters:true，
formatString:'\
时间：%s\
%#.3f'，
SizedJust:7.5，
tooltipLocation:'s'
}
<?php
$metersparameters = $_POST['parameters1'] = "WAvg";
$meters = array("Frunace 1/2");
$quer1 = mysql_query("select scanDateTime,".$_POST['parameters1']." from parameterslog where scanDateTime>'2013-08-10 10:00:01' and scanDateTime<'2013-08-10 10:50:05'") or die(mysql_error());
echo "<script>
var storedData = [];";
while($row1 = mysql_fetch_assoc($quer1))
echo "storedData.push(['".date("H:i:s", strtotime($row1['scanDateTime']))."',".$row1[$_POST['parameters1']]."]);";
//echo "storedData.push([".date("m/d/Y H:m", strtotime($row1['scanDateTime'])).",".$row1[$_POST['parameters1']]."]);";
//echo "storedData.push(".$row1[$_POST['parameters1']].");";//This is working but time is displaying
echo "</script>";
?>
<script>
function plot()
{
//Try1 ------
var chartvalues=<?php echo json_encode($Values); ?>;
var metersparameters = <?php echo json_encode($metersparameters); ?>;
var totalmetersparameters = metersparameters.length;
//var DataSeriesToPlot = [[12,12:22:00],[13,12:32:00],[14,12:42:00],[15,12:52:00]];
jQuery.noConflict();
jQuery(document).ready(function($)
{
var s = "[new Array(1)]";
var plot1,plot2,plot3,plot4,plot5;
function renderGraph()
{
<?php
for($i = 0; $i < 2; $i++)
{
if ($i < count($meter))
{ ?>
if(plot<?php echo $i+1;?>)
plot<?php echo $i+1;?>.destroy();
plot<?php echo $i+1;?> = $.jqplot('chart<?php echo $i+1;?>', [storedData],
{
legend:
{
show: true,
placement: 'inside'
},
series: [
{
label: metersparameters[<?php echo $i;?>]
},
{
yaxis: 'y2axis',
label: 'fdg',
showMarker: true,
fill: false,
neighborThreshold: 3,
lineWidth: 0.2,
color: '#0571B6',
fillAndStroke: true,
rendererOptions: {
smooth: true
}}],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%H:%M:%S'
},
numberTicks: 12,
label: "Time"
// tickInterval:'1 seconds'
},
//yaxis: {
//label: "Value"
//},
y2axis: {
min: -1.12,
max: 3.12,
tickOptions: {
formatString: "%.3f"
},
numberTicks: 10
}
}
});
<?php
}
} ?>
}
var charts = new Array("chart1","chart2","chart3","chart4","chart5");
var variables = [];
<?php
for($i = 0; $i < 2; $i++)
{
if ($i < count($meter))
{ ?>
//plot1 = $.jqplot('chart<?php echo $i+1;?>', [storedData]);
//plot<?php echo $i+1;?> = $.jqplot(eval("charts["+<?php echo $i;?>+"]"), eval(s), {
plot<?php echo $i+1;?> = $.jqplot(eval("charts["+<?php echo $i;?>+"]"), [storedData], {
//plot1 = $.jqplot("chart1", [storedData], {
// title: 'Live Data',
legend: {
show: true,
placement: 'inside'
},
series: [
{
label: metersparameters[<?php echo $i;?>]
},
{
yaxis: 'y2axis',
label: 'fdg',
showMarker: true,
fill: false,
neighborThreshold: 3,
lineWidth: 0.2,
color: '#0571B6',
fillAndStroke: true,
rendererOptions: {
smooth: true
}}],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%H:%M:%S'
},
numberTicks: 12,
label: "Time"
// tickInterval:'1 seconds'
},
//yaxis: {
//label: "Value"
//},
y2axis: {
min: -1.12,
max: 3.12,
tickOptions: {
formatString: "%.3f"
},
numberTicks: 10
}
},
cursor: {
zoom: true,
showTooltip: false,
show: true
},
highlighter: {
useAxesFormatters: false,
showMarker: false,
show: false
},
highlighter: {
show: true,
showLabel: true,
showTooltip: true,
useAxesFormatters: true,
formatString: '<table class="jqplot-highlighter"> \
<tr><td>Time: %s</td></tr> \
<tr><td>%#.3f</td></tr></table>',
sizeAdjust: 7.5 ,
tooltipLocation : 's'
}
});
variables = [];
for(var i = 0; i < totalmetersparameters; i++)
variables[i] = "var myData" + i + " = [];";
var myData0 = [], myData1 = [], myData2 = [], myData3 = [], myData4 = [];
var x, y, samples = 0;
for(var i = 0; i < totalmetersparameters; i++)
plot<?php echo $i+1;?>.series[0].data = variables[i];
plot<?php echo $i+1;?>.resetAxesScale();
plot<?php echo $i+1;?>.axes.xaxis.numberTicks = 12;
plot<?php echo $i+1;?>.axes.y2axis.numberTicks = 10;
plot<?php echo $i+1;?>.replot();
<?php
}
} ?>
var secsBuffer = 60, refreshInterval = 1;
var sampleWindow = secsBuffer / refreshInterval;
$("#refreshInterval").change(function() {
clearInterval(gint);
gint = window.setInterval(updateSeries, $("#refreshInterval").val() * 1000);
refreshInterval = $("#refreshInterval").val();
sampleWindow = secsBuffer / refreshInterval;
});
$("#secsBuffer").change(function() {
secsBuffer = $("#secsBuffer").val();
sampleWindow = secsBuffer / refreshInterval;
});
function updateSeries()
{
var result;
jQuery.ajax({
url: "includes/live/Multi_Meters_Multi_Parameters_Chart_Data.php?¶meters="+<?php echo json_encode($parameters); ?> + "&meters=" + <?php echo json_encode($meters); ?>+"",
success: function(html)
{
result = html;
},
async:false
});
var minx, maxx, miny, maxy;
var device_values = result.split("#");
var time, parameter, eachDevicevalues = device_values[0].split(",");
var n = eachDevicevalues[1].replace(/-/gi, ",");
n = n.replace(/ /gi, ",");
n = n.replace(/:/gi, ",");
var str = n.split(',');
n = new Date(str[0],str[1]-1,str[2],str[3],str[4],str[5]);
minx = maxx = Number((n).getTime());
miny = maxy = Number(eachDevicevalues[0]);
for(var i = 0; i < device_values.length; i++)
{
eachDevicevalues = device_values[i].split(",");
var n = eachDevicevalues[1].replace(/-/gi, ",");
n = n.replace(/ /gi, ",");
n = n.replace(/:/gi, ",");
var str = n.split(',');
n = new Date(str[0],str[1]-1,str[2],str[3],str[4],str[5]);
time = (n).getTime();
if(Number(time) > maxx)
maxx = time;
else if (Number(time) <= minx)
minx = time;
parameter = Number(eachDevicevalues[0]);
if(parameter > maxy)
maxy = parameter;
else if (parameter <= miny)
miny =parameter;
var vars = variables[i].split(' ');
//alert(parameter+"="+eachDevicevalues[1]);
storedData.push(eachDevicevalues[1].substring(19,11), parameter);
renderGraph();
//eval(vars[1]).push([time, parameter]);
//eval("plot" + (i+1) +".series[0].data = eval(vars[1]);");
//maxx = maxx + (secsBuffer * 60000); // to vary xaxis ticks to certain interval,
//minx = minx - (secsBuffer * 250); // to vary xaxis ticks to certain interval,
maxy = maxy + 0.5;
miny = miny - 0.5;
eval("plot" + (i+1) +".resetAxesScale();");
//eval("plot" + (i+1) +".axes.xaxis.numberTicks = 12;");//Test
eval("plot" + (i+1) +".axes.y2axis.numberTicks = 10;");
//eval("plot" + (i+1) +".axes.xaxis.min = minx;");//Test
//eval("plot" + (i+1) +".axes.xaxis.max = maxx;");//Test
eval("plot" + (i+1) +".axes.y2axis.max = maxy;");
eval("plot" + (i+1) +".axes.y2axis.max = miny;");
eval("plot" + (i+1) +".replot();");
}
samples++;
}
gint = window.setInterval(updateSeries, refreshInterval * 3000);
});
}