かなりうまく機能するハイチャートスプライングラフがあります。いくつかの ajax 呼び出しを変更したところ、最初の 30 程度のポイントを結ぶ線が描画されなくなりました。しばらく点を描いてから、線が入ります。私は点よりも線に関心があります。
なぜこれを行うのか誰にもわかりますか？以下の私のコードを見てください。助けてくれてありがとう！
var results_a;
var results_b;
var flag_a = 1;
var flag_b = 1;
var current_a;
var current_b;
var previous_a = 0;
var previous_b = 0;
var xmlhttp_a;
var xmlhttp_b;
var url_a = "http://mysite.com/web/johnsNumber.txt";
var url_b = "http://mysite.com/web/johnsNumber.txt";
////////////////////////////////////////////////////////////////////////////////////////////////////////
function loadFirstDoc(url_a,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp_a=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp_a=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp_a.onreadystatechange=cfunc;
xmlhttp_a.open("GET",url_a,true);
xmlhttp_a.send();
}
function myFunction_a()
{
loadFirstDoc(url_a,function()
{
if (xmlhttp_a.readyState==4 && xmlhttp_a.status==200)
{
current_a = parseInt(xmlhttp_a.responseText);
flag_a = 1;
}
});
}
////////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////////
function loadSecondDoc(url_b,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp_b=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp_b=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp_b.onreadystatechange=cfunc;
xmlhttp_b.open("GET",url_b,true);
xmlhttp_b.send();
}
function myFunction_b()
{
loadSecondDoc(url_b,function()
{
if (xmlhttp_b.readyState==4 && xmlhttp_b.status==200)
{
current_b = parseInt(xmlhttp_b.responseText);
flag_b = 1;
}
});
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////
function randInRange(start, end){
return Math.floor(Math.random() * (end-start+1) + start);
}
function is_numeric(input){
return !isNaN(input);
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////
/*js for first graph....container*/
$(function () {
$(document).ready(function() {
// Apply the grey theme
Highcharts.setOptions({
colors: ["#B00000"],
});
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
myFunction_a(); //ajax call
//check if flag has been set...if so, then random number
if(flag_a == 1){
results_a = current_b;
; //results_a = randInRange(1, 5);
}
//flag not set so results = 0
else{
results_a = 0;
}
//Need to write to a text file right here
var x = (new Date()).getTime(), // current time
y = results_a;
series.addPoint([x, y], true, true);
//series.addPoint([x, y], true, true);
previous_a = current_a;
flag_a = 0;
}, 1500);
}
}
},
title: {
text: 'Linux Server Sales Graph',
style: {
color: '#B00000',
font: 'bold 20px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
min: -1,
max: 6,
title: {
text: 'Sales'
},
plotLines: [{
value: 0,
width: 1,
color: '#000',
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'sales/sec',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: randInRange(1, 5)
});
}
return data;
})()
}]
});
});
});
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/*script for the second graph...container2*/
$(function () {
$(document).ready(function() {
Highcharts.setOptions({
colors: ["#0000FF"],
});
Highcharts.setOptions({
global: {
useUTC: false
}
});
var chart;
$('#container2').highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
myFunction_b();
if(flag_b == 1){
results_b = current_b;
//results_b = randInRange(1, 5);
}
else{
results_b = 0;
}
//need to write to text file right here
var x = (new Date()).getTime(), // current time
y = results_b;
//series.addPoint([x, y], true, true);
series.addPoint([x, y], true, true);
previous_b = current_b;
flag_b = 0;
}, 1500);
}
}
},
title: {
text: 'Windows Server Sales Graph',
style: {
color: '#0000FF',
font: 'bold 20px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif'
}
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
min: -1,
max: 6,
title: {
text: 'Sales'
},
plotLines: [{
value: 0,
width: 1,
color: '#000',
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'<br/>'+
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'sales/sec',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i++) {
data.push({
x: time + i * 1000,
y: randInRange(1, 5)
});
}
return data;
})()
}]
});
});
});
/////////////////////////////////////////////////////////////////////////////////////////////////////////////