我需要您帮忙解决我的代码中的问题。那么，让我解释一下我在“JQPlot的折线图”中所面临的问题。我正在使用这个jqplot插件来实时开发信息图表。首先，我只为现场开发。这与时间一起正常运作。其次，我尝试为此添加一个功能，以显示过去一小时数据的实时值。它不起作用，但我在屏幕截图中可以看到该折线图中的所有过去数据。
如果我在JavaScript中将数值单独添加到数组变量(storedData.push(".$row1[$_POST['parameters1']].");)，那么它的工作时间会跟着过去一小时的数据，而x轴也会用数字代替时间。
但我希望用过去一小时的数据显示实况。注意：时间应以x axix显示。
这里我附上了图片，所以请查看此代码并为此提供解决方案。
提前致谢..： - Dillibabu K）
Here is the screenshot : http://facebookcomi.pcriot.com/ss.png
<?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);
});
}