Skip to content

Instantly share code, notes, and snippets.

@MOAMIndustries

MOAMIndustries/AccelChart.html

Created October 24, 2018 14:28
Show Gist options
  • Save MOAMIndustries/340442db992b2e6bfa77a85d752f2d52 to your computer and use it in GitHub Desktop.
Save MOAMIndustries/340442db992b2e6bfa77a85d752f2d52 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
AccelChart.html
<html>
<head>
<script>
window.onload = function() {
console.log("LOADED");
//Configuration variables
var updateInterval = 20 //in ms
var numberElements = 200;
//Globals
var updateCount = 0;
// Chart Objects
var xAccelChart = $("#xAccelChart");
var yAccelChart = $("#yAccelChart");
var zAccelChart = $("#zAccelChart");
var rollChart = $("#rollChart");
var pitchChart = $("#pitchChart");
var yawChart = $("#yawChart");
//chart instances & configuration
var commonOptions = {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
millisecond: 'mm:ss:SSS'
}
}
}],
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
legend: {display: false},
tooltips:{
enabled: false
}
};
var xAccelChartInstance = new Chart(xAccelChart, {
type: 'line',
data: {
datasets: [{
label: "X Acceleration",
data: 0,
fill: false,
borderColor: '#343e9a',
borderWidth: 1
}]
},
options: Object.assign({}, commonOptions, {
title:{
display: true,
text: "Acceleration - X",
fontSize: 18
}
})
});
var yAccelChartInstance = new Chart(yAccelChart, {
type: 'line',
data: {
datasets: [{
label: "Y Acceleration",
data: 0,
fill: false,
borderColor: '#343e9a',
borderWidth: 1
}]
},
options: Object.assign({}, commonOptions, {
title:{
display: true,
text: "Acceleration - Y",
fontSize: 18
}
}) });
var zAccelChartInstance = new Chart(zAccelChart, {
type: 'line',
data: {
datasets: [{
label: "Z Acceleration",
data: 0,
fill: false,
borderColor: '#343e9a',
borderWidth: 1
}]
},
options: Object.assign({}, commonOptions, {
title:{
display: true,
text: "Acceleration - Z",
fontSize: 18
}
})
});
var rollChartInstance = new Chart(rollChart, {
type: 'line',
data: {
datasets: [{
label: "Roll",
data: 0,
fill: false,
borderColor: '#343e9a',
borderWidth: 1
}]
},
options: Object.assign({}, commonOptions, {
title:{
display: true,
text: "Roll",
fontSize: 18
}
})
});
var pitchChartInstance = new Chart(pitchChart, {
type: 'line',
data: {
datasets: [{
label: "Pitch",
data: 0,
fill: false,
borderColor: '#343e9a',
borderWidth: 1
}]
},
options: Object.assign({}, commonOptions, {
title:{
display: true,
text: "Pitch",
fontSize: 18
}
})
});
var yawChartInstance = new Chart(yawChart, {
type: 'line',
data: {
datasets: [{
label: "Yaw",
data: 0,
fill: false,
borderColor: '#343e9a',
borderWidth: 1
}]
},
options: Object.assign({}, commonOptions, {
title:{
display: true,
text: "Yaw",
fontSize: 18
}
})
});
function addData(data) {
if(data){
xAccelChartInstance.data.labels.push(new Date());
xAccelChartInstance.data.datasets.forEach((dataset) =>{dataset.data.push(data['xA'])});
yAccelChartInstance.data.labels.push(new Date());
yAccelChartInstance.data.datasets.forEach((dataset) =>{dataset.data.push(data['yA'])});
zAccelChartInstance.data.labels.push(new Date());
zAccelChartInstance.data.datasets.forEach((dataset) =>{dataset.data.push(data['zA'])});
rollChartInstance.data.labels.push(new Date());
rollChartInstance.data.datasets.forEach((dataset) =>{dataset.data.push(data['roll'])});
pitchChartInstance.data.labels.push(new Date());
pitchChartInstance.data.datasets.forEach((dataset) =>{dataset.data.push(data['pitch'])});
yawChartInstance.data.labels.push(new Date());
yawChartInstance.data.datasets.forEach((dataset) =>{dataset.data.push(data['yaw'])});
if(updateCount > numberElements){
xAccelChartInstance.data.labels.shift();
xAccelChartInstance.data.datasets[0].data.shift();
yAccelChartInstance.data.labels.shift();
yAccelChartInstance.data.datasets[0].data.shift();
zAccelChartInstance.data.labels.shift();
zAccelChartInstance.data.datasets[0].data.shift();
rollChartInstance.data.labels.shift();
rollChartInstance.data.datasets[0].data.shift();
pitchChartInstance.data.labels.shift();
pitchChartInstance.data.datasets[0].data.shift();
yawChartInstance.data.labels.shift();
yawChartInstance.data.datasets[0].data.shift();
}
else updateCount++;
xAccelChartInstance.update();
yAccelChartInstance.update();
zAccelChartInstance.update();
rollChartInstance.update();
pitchChartInstance.update();
yawChartInstance.update();
}
};
function updateData() {
console.log("Update Data");
$.getJSON("accelGenerator.php", addData);
setTimeout(updateData,updateInterval);
}
updateData();
}
</script>
<style>
.container{
display:flex;
}
.label{
flex:1;
vertical-align: middle;
text-align: center;
}
.x{
flex:3;
text-align: center;
background-color: rgba(235, 113, 101, 0.73);
margin: 10px;
}
.y{
flex:3;
text-align: center;
background-color: rgba(70, 163, 71, 0.64);
margin-top: 10px;
margin-bottom:10px;
}
.z{
flex:3;
text-align: center;
background-color:rgba(70, 140, 215, 0.74) ;
margin:10px;
}
h1{
text-align: center;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
</head>
<body>
<h1>Wave buoy real time stream</h1>
<div id="labelAccel" class="label">
<h2> Acceleration </h2>
</div>
<div id="accelContainer" class="container">
<div id="xAccel" class="x">
<canvas id="xAccelChart"></canvas>
</div><!--xAccel-->
<div id="yAccel" class="y">
<canvas id="yAccelChart"></canvas>
</div><!--yAccel-->
<div id="zAccel" class="z">
<canvas id="zAccelChart"></canvas>
</div><!--zAccel-->
</div><!--accelContainer-->
<div id="labelGyro" class="label">
<h2> Heading </h2>
</div>
<div id="orientationContainer" class="container">
<div id="Roll" class="x">
<canvas id="rollChart"></canvas>
</div><!--xgyro-->
<div id="Pitch" class="y">
<canvas id="pitchChart"></canvas>
</div><!--ygyro-->
<div id="Yaw" class="z">
<canvas id="yawChart"></canvas>
</div><!--zgyro-->
</div><!--gyroContainer-->
</body>
</html>
@mahabubsikder751975
Copy link

Hello Dear,

This is very helpful program, I was trying to display your sample by slightly changing in data loading part, but it is not working. Would you please take a look?
Here I am getting a json array data and passing those data to your addData function but nothing is displaying in the chart.
I have written a ASP.Net core application to display the charts.

function updateData() {
console.log("Update Data");
$.ajax({
url: '/Home/GetServerPerfData',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
success: function (icpdata) {
icpdata.forEach(obj => {
addData(obj);
})
}
});
setTimeout(updateData,updateInterval);
}
updateData();
Rest of the codes kept exactly the same as your one above...

@mahabubsikder751975
Copy link

This is my json data...

[
{"xA":-112, "yA":-185, "zA":181, "roll": -26, "pitch": -105, "yaw":81},
{"xA":-115, "yA":-185, "zA":181, "roll": -26, "pitch": -105, "yaw":81},
{"xA":-111, "yA":-185, "zA":181, "roll": -26, "pitch": -105, "yaw":81},
{"xA":-114, "yA":-185, "zA":181, "roll": -26, "pitch": -105, "yaw":81},
{"xA":-123, "yA":-185, "zA":181, "roll": -26, "pitch": -105, "yaw":81},
{"xA":-100, "yA":-185, "zA":181, "roll": -26, "pitch": -105, "yaw":81},
{"xA":-101, "yA":-185, "zA":181, "roll": -26, "pitch": -105, "yaw":81},
{"xA":-119, "yA":-185, "zA":181, "roll": -26, "pitch": -105, "yaw":81},
{"xA":-120, "yA":-185, "zA":181, "roll": -26, "pitch": -105, "yaw":81},
.....
]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment