AJAX在单个Highcharts图表中显示来自两个不同函数的值，而不是两个不同的函数 [英] AJAX displaying values from two different functions in a single Highcharts chart instead of two different ones
问题描述
我已经使用HighCharts，Flask和Python成功绘制了实时图。一个 javascript 文件（highcharts.js）从Python中的函数的（路由）获取值，并继续使用AJAX从其中获取更新的数据。然后，该图形将以HTML形式呈现在容器 div 中。这可以很好地处理页面上的单个图形。
问题是，当我试图制作第二张图来绘制另一个python函数的值时（其他值）使用第二个JavaScript文件来绘制图形并将图形呈现在另一个容器 div 中，这两个值第一个函数（第一个图）和第二个函数被绘制在第二个图中，第一个图是空白的。
在我的python文件中有两个函数它获得两个不同的值集（ live_data（）函数用于第一个图，而 temp_data（）用于第二个图）：
@ app.route（'/ live-data'）
def live_data（）：
lux = readLight（）＃光线传感器的值
＃创建一个PHP数组并将其作为JSON回显
data1 = [time（）* 1000，lux]
response1 = make_response（json.dumps（data1））
response1.content_type ='appl （）/
返回响应1
@ app.route（'/ liveTempData'）
def temp_data（）：
湿度，温度= Adafruit_DHT.read_retry（11 ，4）
print（'Temp = {0：0.1f} * C'.format（temperature））
data2 = [time（）* 1000，temperature]
response2 = make_response（ json.dumps（data2））
response2.content_type ='application / json'
return response2
highcharts.js（这是从 / live-data 路由这是第一个函数的值）：
var chart1;
$ b $ / **
*从服务器请求数据，将其添加到图形中并设置超时
*以再次请求
* /
函数requestLightData（）{
$ .ajax（{
url：'/ live-data'，
success：function（point）{
var series = chart.series [0] ，
shift = series.data.length> 20; //如果系列为
// //长于20
//添加点
图表.series [0] .addPoint（point，true，shift）;
//在一秒后再次调用
setTimeout（requestLightData，1000）;
}，
cache：false
}）;
$ b $（document）.ready（function（）{
chart1 = new Highcharts.Chart（{
chart：{
// render在HTML中分隔数据容器
renderTo：'data-container'，
defaultSeriesType：'spline'，
events：{
load：requestLightData
}
$ b标题：{
text：'亮度值'
}，
xAxis：{
类型：'datetime'，
tickPixelInterval： 150，
maxZoom：20 * 1000
}，
yAxis：{
minPadding：0.2，
maxPadding：0.2，
title：{
文本：'值'，
保证金：80
}
}，
信用：{
启用：false
}，
系列：[{
名称：'Light'，
data：[]
}]
}）;
}）;
源代码片段 highchartsTemp.js （this从第二个函数 / liveTempData route）获取值：
var chart;
$ b $ / **
*从服务器请求数据，将其添加到图形中并设置超时
*以再次请求
* /
函数requestData（）{
$ .ajax（{
url：'/ liveTempData'，
success：function（point）{
var series = chart.series [0]，
shift = series.data.length> 20; //如果系列为
// //长于20
//添加点
chart.series [0] .addPoint（point，true，shift）;
//在一秒后再次调用
setTimeout（requestData，1000）;
}，
cache：false
}）;
$ b $（document）.ready（function（）{
chart = new Highcharts.Chart（{
chart：{
// render在HTML
格式中div data-container2 renderTo：'data-container2'，
defaultSeriesType：'spline'，
events：{
load：requestData
}
$，
我只为highchartsTemp.js添加了一段代码，因为它几乎相同作为highcharts.js，除了图的一些标签属性之外，只有函数名，url和图表变量已被更改。
代码片段，其中图表正在呈现：
< div class =row>
<！ - 第一个图 - >
< div class = container-fluidid =data-container>< / div>
< / div>
< div class =row>
<！ - 第一个图 - >
< div class =container-fluid id =data-container2>< / div>
< / div>
以下是显示内容：
以下是我在运行python脚本时在终端上显示的内容：
192.168.100.4 - - [03 / Apr / 2018 21:25:35]GET / live HTTP / 1.1200 -
192.168.100.4 - [03 / Apr / 2018 21:25:35]GET /static/js/highcharts.js HTTP / 1.1200 -
192.168.100.4 - - [03 / Apr / 2018 21： 25:35]GET /static/js/highchartsTemp.js HTTP / 1.1200 -
192.168.100.4 - - [03 / Apr / 2018 21:25:40]GET / live HTTP / 1.1200 -
192.168.100.4 - - [03 / Apr / 2018 21:25:41]GET / live-data？= 1522790899360 HTTP / 1.1200 -
Temp = 27.0 * C
192.168.100.4 - [03 / Apr / 2018 21:25:42]GET / liveTempData？_ = 1522790899379 HTTP / 1.1200 -
192.168.100.4 - - [03 / Apr / 2018 21:25 ：42]GET / live-data？_ = 1522790900414 HTTP / 1.1200 -
Temp = 26.0 * C
192.168.100.4 - - [03 / Apr / 2018 21:25:43]GET / liveTempData？_ = 1522790900967 HTTP / 1.1200 -
192.168。 100.4 - - [03 / Apr / 2018 21:25:43]GET / live-data？_ = 1522790901451 HTTP / 1.1200 -
Temp = 26.0 * C
192.168.100.4 - - [ 03 / Apr / 2018 21:25:45]GET / liveTempData？_ = 1522790902535 HTTP / 1.1200 -
192.168.100.4 - - [03 / Apr / 2018 21:25:45]GET / live -data？_ = 1522790902547 HTTP / 1.1200 -
Temp = 26.0 * C
192.168.100.4 - - [03 / Apr / 2018 21:25:46]GET / liveTempData？_ = 1522790904108 HTTP / 1.1200 -
192.168.100.4 - - [03 / Apr / 2018 21:25:46]GET / live-data？= 1522790904120 HTTP / 1.1200 -
Temp = 26.0 * C
终端上的输出显示来自 / liveTempData 和 / live-data 正在接收。但是这些路由中的数据正在呈现给同一个图表。
我已经能够解决它。其实我没有正确使用我的变量 chart1 用于下面的函数。它不会被改变为：
var chart1;
$ b $ / **
*从服务器请求数据，将其添加到图形中并设置超时
*以再次请求
* /
函数requestLightData（）{
$ .ajax（{
url：'/ live-data'，
success：function（point）{
var series = chart1.series [0] ，
shift = series.data.length> 20; //如果系列是
// //长于20
// //添加点
chart1 .series [0] .addPoint（point，true，shift）;
//在一秒后再次调用
setTimeout（requestLightData，1000）;
}，
cache：false
}）;
}
我也合并了两个 js 脚本，即我将 highchartsTemp.js 中的所有内容添加到 highcharts.js 中，并删除了脚本 highchartsTemp.js 来自我的HTML档案。
I have successfully plotted a real-time graph using HighCharts, Flask and Python. A javascript file(highcharts.js) takes values from a (route of a) function in python and continues to fetch updated data from it using AJAX. Then the graph is rendered in a container div in HTML. This worked well with a single graph on the page.
The problem is that when I tried to make a second graph to plot values from another python function(which has other values) using a second javascript file to plot the graph and rendering the graph in another container div, both the values of the first function(for the first graph) and the second function are being plotted in the second graph and the first graph is blank.
There are the two functions in my python file which get two different value sets(the live_data() function is for the first graph and the temp_data() is for the second graph):
@app.route('/live-data')
def live_data():
lux=readLight() #gets value of light sensor
# Create a PHP array and echo it as JSON
data1 = [time() * 1000,lux]
response1 = make_response(json.dumps(data1))
response1.content_type = 'application/json'
return response1
@app.route('/liveTempData')
def temp_data():
humidity,temperature = Adafruit_DHT.read_retry(11, 4)
print('Temp={0:0.1f}*C'.format(temperature))
data2 = [time() * 1000,temperature]
response2 = make_response(json.dumps(data2))
response2.content_type = 'application/json'
return response2
highcharts.js(this gets the values from the /live-data route which is the first function) :
var chart1;
/**
* Request data from the server, add it to the graph and set a timeout
* to request again
*/
function requestLightData() {
$.ajax({
url: '/live-data',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestLightData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart1 = new Highcharts.Chart({
chart: {
//render to div data-container in HTML
renderTo: 'data-container',
defaultSeriesType: 'spline',
events: {
load: requestLightData
}
},
title: {
text: 'Luminosity Values'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Values',
margin: 80
}
},
credits: {
enabled: false
},
series: [{
name: 'Light',
data: []
}]
});
});
Code snippet from highchartsTemp.js(this gets the values from the /liveTempData route which is the second function) :
var chart;
/**
* Request data from the server, add it to the graph and set a timeout
* to request again
*/
function requestData() {
$.ajax({
url: '/liveTempData',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
//render to div data-container2 in HTML
renderTo: 'data-container2',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
I have added only a code snippet for highchartsTemp.js because it is almost the same as the highcharts.js, only the function name, url, chart variable have been changed besides some labeling attributes of the graph. Code snippet of html where the charts are being rendered:
<div class="row">
<!-- first graph -->
<div class="container-fluid" id="data-container"></div>
</div>
<div class="row">
<!-- first graph -->
<div class="container-fluid" id="data-container2"></div>
</div>
Here is what being being displayed:
And here is what is being shown on the terminal when I run the python script:
192.168.100.4 - - [03/Apr/2018 21:25:35] "GET /live HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:35] "GET /static/js/highcharts.js HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:35] "GET /static/js/highchartsTemp.js HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:40] "GET /live HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:41] "GET /live-data?_=1522790899360 HTTP/1.1" 200 -
Temp=27.0*C
192.168.100.4 - - [03/Apr/2018 21:25:42] "GET /liveTempData?_=1522790899379 HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:42] "GET /live-data?_=1522790900414 HTTP/1.1" 200 -
Temp=26.0*C
192.168.100.4 - - [03/Apr/2018 21:25:43] "GET /liveTempData?_=1522790900967 HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:43] "GET /live-data?_=1522790901451 HTTP/1.1" 200 -
Temp=26.0*C
192.168.100.4 - - [03/Apr/2018 21:25:45] "GET /liveTempData?_=1522790902535 HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:45] "GET /live-data?_=1522790902547 HTTP/1.1" 200 -
Temp=26.0*C
192.168.100.4 - - [03/Apr/2018 21:25:46] "GET /liveTempData?_=1522790904108 HTTP/1.1" 200 -
192.168.100.4 - - [03/Apr/2018 21:25:46] "GET /live-data?_=1522790904120 HTTP/1.1" 200 -
Temp=26.0*C
The output on the terminal shows that data from both the routes /liveTempData and /live-data are being received. But data from those routes are being rendered to the same chart.
I have been able to solve it. Actually I didn't use my variable chart1 correctly for the function below. It has t be changed as such:
var chart1;
/**
* Request data from the server, add it to the graph and set a timeout
* to request again
*/
function requestLightData() {
$.ajax({
url: '/live-data',
success: function(point) {
var series = chart1.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart1.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestLightData, 1000);
},
cache: false
});
}
I also merged the two js scripts into, ie I added all that was in highchartsTemp.js into highcharts.js and removed the script highchartsTemp.js from my HTML file.
这篇关于AJAX在单个Highcharts图表中显示来自两个不同函数的值，而不是两个不同的函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
