Using with MQTT

[ispybadguys]

I ama little embarrassed to ask a question here because I am such a newbie to both java and canvasJS but I am trying to generate a chart from a JSON supplied by MQTT.

I don’t want to burden everyone with all the code so I just show what I think is significant. I have this:
window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer”, {
animationEnabled: true,
zoomEnabled: true,
theme: “dark2”,
title: {
text: “Growth in Internet Users Globally”
},
axisX: {
title: “Year”,
valueFormatString: “####”,
interval: 2
},
axisY: {
logarithmic: true,
title: “Internet Users (Log)”,
titleFontColor: “#6D78AD”,
lineColor: “#6D78AD”,
gridThickness: 0,
lineThickness: 1,
labelFormatter: addSymbols
},
axisY2: {
title: “Internet Users”,
titleFontColor: “#51CDA0”,
logarithmic: false,
lineColor: “#51CDA0”,
gridThickness: 0,
lineThickness: 1,
labelFormatter: addSymbols
},
legend: {
verticalAlign: “top”,
fontSize: 16,
dockInsidePlotArea: true
},
data: [{
type: “line”,
xValueFormatString: “####”,
showInLegend: true,
name: “Log Scale”,
dataPoints: []
},
{
type: “line”,
xValueFormatString: “####”,
axisYType: “secondary”,
showInLegend: true,
name: “Linear Scale”,
dataPoints: []
}]
});
chart.render();

and then I get he result from the topic with this:
// MQTT message callback
function onMessageArrived(message) {
var dataPoints = JSON.parse(message.payloadString);
updateChart(dataPoints);
}

// Update the chart with new data
function updateChart(dataPoints) {
chart.options.data[0].dataPoints = dataPoints;
chart.render();
}

The problem I have is that first I am not sure of what the format of the JSON should be so I tried this from the example:
{
animationEnabled: true,
zoomEnabled: true,
theme: “dark2”,
title: {
text: “Growth in Internet Users Globally”
},
axisX: {
title: “Year”,
valueFormatString: “####”,
interval: 2
},
axisY: {
logarithmic: true, //change it to false
title: “Internet Users (Log)”,
titleFontColor: “#6D78AD”,
lineColor: “#6D78AD”,
gridThickness: 0,
lineThickness: 1,
labelFormatter: addSymbols
},
axisY2: {
title: “Internet Users”,
titleFontColor: “#51CDA0”,
logarithmic: false, //change it to true
lineColor: “#51CDA0”,
gridThickness: 0,
lineThickness: 1,
labelFormatter: addSymbols
},
legend: {
verticalAlign: “top”,
fontSize: 16,
dockInsidePlotArea: true
},
data: [{
type: “line”,
xValueFormatString: “####”,
showInLegend: true,
name: “Log Scale”,
dataPoints: [
{ x: 1994, y: 25437639 },
{ x: 1995, y: 44866595 },
{ x: 1996, y: 77583866 },
{ x: 1997, y: 120992212 },
{ x: 1998, y: 188507628 },
{ x: 1999, y: 281537652 },
{ x: 2000, y: 414794957 },
{ x: 2001, y: 502292245 },
{ x: 2002, y: 665065014 },
{ x: 2003, y: 781435983 },
{ x: 2004, y: 913327771 },
{ x: 2005, y: 1030101289 },
{ x: 2006, y: 1162916818 },
{ x: 2007, y: 1373226988 },
{ x: 2008, y: 1575067520 },
{ x: 2009, y: 1766403814 },
{ x: 2010, y: 2023202974 },
{ x: 2011, y: 2231957359 },
{ x: 2012, y: 2494736248 },
{ x: 2013, y: 2728428107 },
{ x: 2014, y: 2956385569 },
{ x: 2015, y: 3185996155 },
{ x: 2016, y: 3424971237 }
]
}

But I get this error:
Connection lost: AMQJS0005E Internal error. Error Message: JSON.parse: expected property name or ‘}’ at line 2 column 2 of the JSON data, Stack trace: onMessageArrived@file:///Z:/Arduino%202022/ChartExample.html:88:27

Any help is appreciated. I’m thinking it is simple.

Thanks
Kurt

[Adithya Menon]

Kurt,

Can you kindly create JSFiddle with sample JSON data, so that we can understand your scenario better and help you out with a suitable solution?

—
Adithya Menon
Team CanvasJS

[Xliff]

@ispybadguys: You will need to surround your JSON keys with double quotes. Some JSON parsers make this optional, but it’s a best practice to this for those that do not.

OOB and FYI:

@adithya: I tried posting this suggestion earlier, and your site blocked me, a LEGITIMATE user, for using your site in a proscribed way. In the future, you may want to consider slightly increasing your Cloudflare login access attempts before banning someone, even temporarily. I had ONE ATTEMPT left before I decided to click “Forgot Password” and was banned after changing my password. At best, that is bad form.

[Adithya Menon]

@xliff,

Sorry for the inconvenience caused. I have forwarded this use-case to the backend team so that they can look into it.

Thanks for your feedback.

—
Adithya Menon
Team CanvasJS