Javascript 将MQTT主题和数据添加到chartjs_Javascript_Html_Chart.js_Mqtt

Javascript 将MQTT主题和数据添加到chartjs

javascript html chart.js mqtt

Javascript 将MQTT主题和数据添加到chartjs,javascript,html,chart.js,mqtt,Javascript,Html,Chart.js,Mqtt,我一直在四处寻找解决问题的方法，但到目前为止，我所找到的还不足以让我解决问题我已经创建了到MQTT代理的连接，并且能够订阅主题、读取和显示数据。我的问题是在收到主题和消息时将数据绘制到图表中我已经创建了一个数组来存储传入的主题如果我能得到一些关于我可能做错了什么的反馈，或者如果我使用了错误的函数，我将不胜感激！在加载HTML文件时，我收到以下错误消息：未能创建图表：无法从给定项获取上下文每当我收到来自代理的消息时，我就会丢失连接，并且此消息： *AMQJS0005E内部错误。错误消息

我一直在四处寻找解决问题的方法，但到目前为止，我所找到的还不足以让我解决问题

我已经创建了到MQTT代理的连接，并且能够订阅主题、读取和显示数据。我的问题是在收到主题和消息时将数据绘制到图表中

我已经创建了一个数组来存储传入的主题

如果我能得到一些关于我可能做错了什么的反馈，或者如果我使用了错误的函数，我将不胜感激！在加载HTML文件时，我收到以下错误消息：

未能创建图表：无法从给定项获取上下文

每当我收到来自代理的消息时，我就会丢失连接，并且此消息：

*AMQJS0005E内部错误。错误消息：无法读取未定义的属性“x-axis-0”，堆栈跟踪：TypeError:无法读取未定义的属性“x-axis-0”

var代理='m23.cloudmqtt.com'；//mqtt代理
变量端口=35779；//websocket端口
变量topic='lubcos/#'；//要订阅的主题，#用于通配符。
var-myChart；
var topicArray=新数组（）；
//创建新的Paho MQTT客户端，使用代理、端口和客户端id连接
var client=new Paho.MQTT.client（代理，端口，“client_ID”）；
client.onMessageArrived=onMessageArrived；
client.onConnectionLost=onConnectionLost；
// ************************************************************************ //
//连接到代理的选项
变量连接选项={
超时时间：3，
是的，
用户名：“”，
密码：“”，
onSuccess:onConnect，
onfail:doFail
};
// ************************************************************************ //
//在连接时，打印它连接到的代理以及订阅的主题
函数onConnect（）{
log（“成功连接到：+代理”）；
subscribe（主题，{qos:0}）；
console.log（“订阅：+主题”）；
}
// ************************************************************************ //
//如果连接失败，打印错误消息
函数doFail（消息）{
日志（“连接失败：+message.errorMessage”）；
}
// ************************************************************************ //
//当与代理的连接丢失时，打印错误消息
//如果连接丢失，请尝试重新连接
函数onConnectionLost（响应对象）{
日志（“连接丢失：+responseObject.errorMessage”）；
//setTimeout（location.reload（），5000）；
};
// ************************************************************************ //
//消息到达时，应将主题和消息打印到控制台
//如果主题的索引小于0，则应将主题推送到名为
//mqttTopics。
函数onMessageArrived（消息）{
//将主题和数据打印到控制台
log（“主题：“+message.destinationName，”|“，“数据：“+message.payloadString”）；
//检查它是否是新主题，如果不是，则添加到数组
if（topicArray.indexOf（message.destinationName）<0）{
//向数组添加新主题
topicArray.push（message.destinationName）；
//获取索引号
var y=topicArray.indexOf（message.destinationName）；
log（“主题数组：“+topicArray+”|“+”索引号：“+y”）；
//为图表创建新的数据系列
var newdata={
id:y，
名称：message.destinationName，
数据：[]
};
//向图表中添加数据
myChart.update（新数据）；
}
};
// ************************************************************************ //
//检查数字是否真的是数字
函数isNumber（n）{
return！isNaN（parseFloat（n））和&isFinite（n）；
};
// ************************************************************************ //
//使用选项变量中的信息连接到客户端
函数init（）{
client.connect（连接选项）；
};
// ************************************************************************ //
功能图（点，图表编号）{
控制台日志（点）；
var series=myChart.newData[0]，
shift=newData.data.length>200；
myChart.update[chartno].addPoint（point，true，shift）；
};
// ************************************************************************ //
变量图形选项={
回答：是的，
标题：{
显示：对，
位置：“顶部”，
文本：“LubCos H20plus II”，
尺码：18，
fontColor:#111“
},
图例：{
显示：对，
位置：“底部”，
标签：{
fontColor:#333“，
字体大小：16
}
},
比例：{
xAxis：[{
键入：“实时”//x轴将从右向左滚动
文本：“时间”，
差额：30
}],
亚克斯：[{
最小填充：0.2，
最大填充：0.2，
标题：{
文字：“温度/湿度%”，
差额：80
}
}]
}
};
// ************************************************************************ //
var图表数据={
标签：[“主题”]，
数据集：[{
标签：“主题”，
数据：[“数据”]，
填充：假，
线张力：0，
半径：2
}]
}
// ************************************************************************ //
$（文档）.ready（函数（）{
var ctx=$（“#线图画布”）；
myChart=新图表（ctx{
键入：“行”，
数据：图表数据，
选项：图形选项
});
});

index.html

<!DOCTYPE html>
<html>
<head>
<title>Sensor Values MQTT</title>

<link href="css/style.css" rel="stylesheet">

<!-- Include JavaScript classes after which order they are used in -->
<script src="js/jquery.min.js"></script>
<script src="js/chart.min.js"></script>
<!-- Eclipse Paho library for MQTT -->
<script src="js/mqttws31.js"></script>

<script src="js/browserMqtt.js"></script>
<script src="js/mqttGraph.js"></script>

</head>

<body>
<!-- Start connection to the MQTT broker by running init function -->
<body onload="init();">

<!-- Include the chart container and insert the line graph -->
<div class="chart-container">
<canvas>Chart goes here</canvas>
</div>


</body>
</html>


传感器值MQTT
图表在这里

您正在定义

var图表在第7行
但是您正在函数中使用变量myChart
$(document).ready(function () {
       var myChart = new Chart(...)
}

因此，使用函数chart.addSeries（…）
永远无法工作

编辑：（根据哈迪勒的评论）

编辑2：
第一个错误可能与var ctx=$（“#line chartcanvas”）有关零件。

在HTML中，您需要给画布一个与Java中相同名称的ID
$(document).ready(function () {
       var myChart = new Chart(...)
}

var myChart;

function onMessageArrived(message){
   ...

    myChart.addSeries(newseries);
}

$(document).ready(function() {
    ...

   //leave the var
    myChart = new Chart(ctx, {...});
});  

<!-- Include the chart container and insert the line graph -->
<div class="chart-container">
    <canvas id=line-chartcanvas>Chart goes here</canvas>
</div>

function onMessageArrived(message) {
  // print out topic and data to console
  console.log("Topic: " + message.destinationName, ' | ', "Data: " + message.payloadString);

  // check if it is a new topic, if not, add to array
  if (topicArray.indexOf(message.destinationName) < 0){
    // add new topic to array
    topicArray.push(message.destinationName);
    // get the index number
    var y = topicArray.indexOf(message.destinationName);
    console.log("Topic Array: " + topicArray + " | " + "Index number: " + y);

    // create new dadta series for the chart
    var newdata = {
      id: y,
      name: message.destinationName,
      data: []
    };
    // add data to chart
    myChart.update(newdata);
  }
};