Created
October 24, 2018 14:28
-
-
Save MOAMIndustries/340442db992b2e6bfa77a85d752f2d52 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
xAccelChartInstance.data.datasets.forEach(function(dataset) {
dataset.data.push(data['xA']
});
this should work.
learn more here
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...
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
I have an issue in that portion of the code, I'm getting Syntex error in "=>" that operator in my .jsp file I don't know why and also I'm using json data.
Please can you give me the another way to right that portion of code without write "=>"
That symbol. Thank in advance!!!
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'])});