I am trying to send data from my arduino to Highcharts via ethernet following this two tutorials:
1.http://startingelectronics.com/tutorials/arduino/ethernet-shield-web-server-tutorial/SD-card-gauge/
2.Highcharts live data
As I am very new to javascript could someone explain to me what this code does:
var series = chart.series[0] //(what is series[0]??? What is the "[0]" for?)
Here I am sending also my modified index file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Arduino SD Card Web Page using Ajax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<script>
var chart;
function GetArduinoInputs()
{
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseText != null) {
var analog = this.responseText;
var d = new Date();
var date = d.getTime();
var point = [date, analog];
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);
}
}
}
}
request.open("GET", "ajax_inputs" + nocache, true);
request.send(null);
setTimeout('GetArduinoInputs()', 1000);
}
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: GetArduinoInputs
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'Random data',
data: []
}]
});
});
</script>
</head>
<body onload="GetArduinoInputs()">
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
<div style="width: 800px; margin: 0 auto"></div>
</body>
</html>
My arduino is sending just a value e.g 22.
The result is that Highcharts behave erratically with no values displayed on it . (although the chart is rolling with time passing by on x-axis).
What could be wrong on this code?
Any help would be much appreciated!
Thank you in advance!
Most probably you have in console some information from Highcharts, and this looks like you are passing strings to data, while only numbers are expected. Try this:
var analog = parseFloat(this.responseText); //or parseInt(this.responseText, 10) for integers
First off -- you call the GetArduinoInputs on loads TWICE. Notice, you have an onload in the body tag as well as a load event in highcharts. Choose one or the other (the highcharts load event is preferable. just remove the onload from your body tag). This might just fix your problem.
If not......
Have you verified the arduino is actually responding with a value?
Add console.log(analog)
After
if (this.responseText != null) {
var analog = this.responseText;
Then open your browsers console (f12 on most browsers) and watch the console. You should get the value from the arduino spit out every second.
Related
So my problem is that when I'm cyclically updating canvas element in my HTML with line chart created by Chart.js library I'm getting bunch of detached HTMLCanvasElements. I noticed this when I was fixing some memory leaks in my code which earlier lead my webpage to crash(chrome gave "aw snap" error page).
I was able to fix most of the memory leaks but this one is still bothering me and I am helpless because of not knowing why this is happening..
I have canvas elements in my HTML code like this:
<div class="kuvaaja"><canvas id="etaisyyskuvaaja"></canvas></div>
<div class="kuvaaja"><canvas id="etaisyyskuvaaja2"></canvas></div>
<div class="kuvaaja"><canvas id="etaisyyskuvaaja3"></canvas></div>
<div class="kuvaaja"><canvas id="etaisyyskuvaaja4"></canvas></div>
And this is how I fetch those elements in my JavaScript (in window.onload function):
pohjacanvas = document.getElementById("etaisyyskuvaaja");
pohjacanvas2 = document.getElementById("etaisyyskuvaaja2");
pohjacanvas3 = document.getElementById("etaisyyskuvaaja3");
pohjacanvas4 = document.getElementById("etaisyyskuvaaja4");
Then I start cyclic updating of those canvases with(also inside window.onload):
paivitysvali = setInterval(haeetaisyysmittaukset, 1000);
painepaivitys = setInterval(haepainemittaukset, 1000);
And in these functions I first fetch data from database like this (haepainemittaukset() is similar to this one just different data is fetched):
function haeetaisyysmittaukset() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
etaisyys = [];
ajat = [];
var mittaukset = JSON.parse(xmlhttp.response);
for (var i = 0; i < mittaukset.length; i++) {
etaisyys.push(mittaukset[i]["etaisyys"]);
ajat.push(mittaukset[i]["timestamp"]);
}
if (paivitysbitti == 1) {
etaisyys.reverse();
ajat.reverse();
luokuvaaja2(pohjacanvas, etaisyys, ajat);
luokuvaaja2(pohjacanvas4, etaisyys, ajat);
}
}
}
xmlhttp.open("POST", "haeetaisyysmittaukset.php", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send("limit=" + mittausmaara);
}
After data is fetched in global arrays (etaisyys[] and ajat[]) I call luokuvaaja2() function with the canvas I want to update and these data arrays. And this is the phase where problem starts at least I think so.. Here is how I am trying to implement this update of canvas:
function luokuvaaja2(pohja, data, ajat) {
pohja.height = 400;
pohja.width = 700;
myChart = new Chart(pohja, {
type: 'line',
data: {
labels: ajat,
datasets: [{
data: data,
label: "Etaisyys",
borderColor: "blue",
fill: false
}
]
},
options: {
animation: {
duration: 0, // general animation time
},
hover: {
animationDuration: 0, // duration of animations when hovering an item
},
title: {
display: true,
text: 'Etaisyysmittaus'
},
scales: {
yAxes: [{
ticks: {
min: 0,
max: 6000
}
}]
}
}
});
}
So what I think that I'm doing here is setting canvas height and width, after that I create new chart in the same canvas where old one was(or am I?). However it looks like that there is something wrong and my current code is creating bunch of detached canvas elements but I can't understand why and where this is exactly happening? So now memory footprint of my page is slowly increasing after every cycle (canvas update).
Here is also snapshot of memory distribution:
memory distribution
In this memory distribution there are many detached canvas elements all pointing to those canvases(pohjacanvas, pohjacanvas2, pohjacanvas3, pohjacanvas4).
You should keep track (in an array, for example) of your charts previously created, then when the new data is fetched from the server, you need to retrieve the chart to update, update its data and/or options, and then call
chart.update();
to refresh the chart. In this case you won't create new charts at each update.
You may find more details in the Chart.js docs.
I am using a dygraph to monitor a CSV file and use the dynamic update function. When I hover over the graph to show the values of the curves in the legend, they disappear as soon as the graph is updated, which is a bit annoying.
<html>
<head>
<script type="text/javascript" src="/static/dygraph-combined.js"></script></head>
<body>
<div id="psu"></div>
<script type="text/javascript">
g = new Dygraph(document.getElementById("psu"), "/data/psu",
{
legend: 'always',
hideOverlayOnMouseOut: false,
ylabel: 'current (A)',
height: 480,
width: 640,
sigFigs: 2,
title: 'power interface monitor',
xValueFormatter: Dygraph.dateString_,
xAxisLabelFormatter: Dygraph.dateString_,
xTicker: Dygraph.dateTicker
} );
window.intervalId = setInterval(function(){g.updateOptions( { 'file': "/data/psu" } ); }, 1000);
</script>
</html>
So the graph is all displaying correctly and the data is updated, only the legend values disappear after the graph is refreshed with g.updateOptions(). I was thinking maybe I can re-trigger some kind of "mouseover" event after g.updateOptions() so the values come back, but there might be a cleaner way of doing it.
Thanks.
I found a solution to my problem, but I am not sure how well it is implemented. I share it here so others might find it:
$(document).ready(function() {
var data = [];
var t = new Date();
for (var i = 10; i >= 0; i--) {
var x = new Date(t.getTime() - i * 1000);
data.push([x, Math.random()]);
}
var last_mousemove_evt = null;
var on_graph = false;
var g = new Dygraph(document.getElementById("div_g"), data, {
legend: 'always',
drawPoints: true,
showRoller: true,
valueRange: [0.0, 1.2],
labels: ['Time', 'Random'],
highlightCallback: function(e, x, pts, row) {
last_mousemove_evt = e;
on_graph = true
},
unhighlightCallback: function(e) {
on_graph = false;
}
});
// It sucks that these things aren't objects, and we need to store state in window.
window.intervalId = setInterval(function() {
var x = new Date(); // current time
var y = Math.random();
data.push([x, y]);
g.updateOptions({
'file': data
});
if (on_graph) {
g.mouseMove_(last_mousemove_evt);
}
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="div_g" style="width:600px; height:300px;"></div>
So I end up using the highlightCallback and unhighlightCallback options so I can figure out the mouse position and after a dynamic update call then the dygraph.mouseMove_() function to redraw the legend values. Seems to work.
Please let me know if there is a nicer solution around. Might be good to include this functionality in the dygraph.updateOptions() by default, as it seems weird that the legend values disappear after an update.
I have been trying to simply rotate my hAxis on the following graph for long now. Tried several solutions explained below! Cant believe something that simple seems that hard to do. Source code below:
<html>
<title>VM Allocation Performance</title>
<meta http-equiv="refresh" content="30">
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['09/12/2015 10:00:00',3.52],['09/12/2015 10:30:00',7.56],['09/12/2015 11:00:00',8.99],['09/12/2015 11:30:00',4.93],['09/12/2015 12:00:00',10.26],['09/12/2015 12:30:00',9.82],['09/12/2015 13:00:00',12.62],['09/12/2015 13:30:00',9.07],['09/12/2015 14:00:00',4.94],['09/12/2015 14:30:00',8.98],['09/12/2015 15:00:00',7.85],['09/12/2015 15:30:00',3.59],['09/12/2015 16:00:00',5.64]],true);
var options = {
chart: {
title: 'VM Allocation',
subtitle: 'Since Shift Start',
}
//I tried with slantedText: true here but while my graph was rendering, labels were not rotated!
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id='chart_div' style='width: 450px; height: 400px;'></div>
</body>
</html>
Here is what I tried so far:
I read the Google documentation, changed my code accordingly (because it is a "material" graph etc...) and still nothing.
I tried using the same hAxis block from this jsfiddle I found, no luck.
I went into a bit more details and saw on the Google doc that the option "slantedText" would work only on discrete axis, so I thought I had to change my hAxis type from Date/Time to String, I tried and did not succeed.
I kept on and tried using this solution from SO and while I can still render the graph, my date/time labels are still not showing entirely (which is why I want to rotate them).
Can anybody please help on this?
Change to a columnchart and not a bar.
See http://jsfiddle.net/Swtv3/51/
function drawChart() {
var data = google.visualization.arrayToDataTable([
['09/12/2015 10:00:00',3.52],['09/12/2015 10:30:00',7.56],['09/12/2015 11:00:00',8.99],['09/12/2015 11:30:00',4.93],['09/12/2015 12:00:00',10.26],['09/12/2015 12:30:00',9.82],['09/12/2015 13:00:00',12.62],['09/12/2015 13:30:00',9.07],['09/12/2015 14:00:00',4.94],['09/12/2015 14:30:00',8.98],['09/12/2015 15:00:00',7.85],['09/12/2015 15:30:00',3.59],['09/12/2015 16:00:00',5.64]],true);
var options = {
chart: {
title: 'VM Allocation',
subtitle: 'Since Shift Start',
},
chartArea: {
top: 28,
height: '40%'
},
hAxis: {
title: 'Sources',
slantedText: true
}
//I tried with slantedText: true here but while my graph was rendering, labels were not rotated!
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
Hi here I set the data to the bar chart:
setDatosBarra: function(data){ //
var self = this;
var horaEstim = 0;
var horaReal = 0;
var horaTotal = 0;
if(data[0].horas_estim != '-'){
horaEstim = data[0].horas_estim;
}
if(data[0].horas_real != '-'){
horaReal = data[0].horas_real;
}
if(data[0].total_horas != '-'){
horaTotal = data[0].total_horas;
}
var datosBarra =[{data: [[0,horaEstim]], color: "#691717"}, {data: [[1,horaReal]], color: "#173D69"},{data: [[2,horaTotal]], color: "#176469"}];
self.flotLinea(datosBarra);
},
When all is ready I send the data to self.flotBar;
This is the flotBar function:
flotBar: function(datos){
var self = this;
if(datos == 0){
var data = [["SIN REGISTROS",0]];
}else{
var data = datos;
}
function getTooltip(label, x, y) {
return "<strong style='font-size:18px;'> " + y + " </strong> horas";
}
var plot = $.plot("#placeholder",data, {
series: {
bars: {
show: true,
barWidth: 0.3,
align: "center",
lineWidth: 0,
fill:.75
}
},
xaxis: {
ticks: [[0,"Horas estimadas"],[1,"Horas reales"],[2,"Total horas"]],
mode: "categories",
tickLength: 0
},
grid: {
hoverable: true,
clickable: true
},
tooltip: true,
tooltipOpts : {
content : getTooltip,
defaultTheme : false
},
});
},
Ok , and this is my problem, example:
I select a option in an dropDown:
And the bar chart looks like this:
If I select other option in the dropDown:
The bar chart looks like this:
And if I select again the first option "Correcion de errores", the bar chart looks like this:
So.. always the first time that I show the bar chart looks like in the first image , with the numbers in the line, but If I select other option looks good.
I need see good the bar chart always and no just when I select other option.
I'm using flot javascript library.
How can I fix this? sorry by my english
The main issue with the question as stated is that we do not have all the code. In essence, you should either provide all the code, or shrink down the problem to something that shows the issue and then, well, provide all the code. As far as I can guess, you have some other code somewhere else that is drawing the initial chart. The second and subsequent times? Drawn properly. To support my assertion, notice that in your initial image the captions for the x-axis tick markers (ditto the bars themselves) are right aligned not centered.
For fun, I wrote a quick jsFiddle that showed how to switch datasets using a button (much as you want to do with the drop-down) and redraw the chart:
drawChart = function(index) {
var chartData = getDataForChart(rawData[index]);
if (chart) {
chart.setData(chartData);
chart.draw();
}
else {
chart = $.plot("#barchart", chartData, chartOptions);
}
},
switchDataset = function() {
datasetIndex = (datasetIndex + 1) % datasetCount;
drawChart(datasetIndex);
};
$("#switchButton").on("click", switchDataset);
Because I decided to load new data into the chart rather than redraw it all from scratch (to be honest I saw no real difference either way), it meant that I had to pre-calculate the maximum value for the y-axis:
calcValueMax = function() {
var max = 0;
rawData.forEach(function(values) {
values.forEach(function(value) {
if (value > max) {
max = value;
}
});
});
return max;
},
// other code
chartOptions.yaxis.max = calcValueMax();
Hope that helps.
I am learning JavaScript and have some programming knowledge and can generally work things out eventually, but I am stuck on a problem with highcharts.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Betting Performance'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Yield (%)'
}
},
series: []
};
/*
Load the data from the CSV file. This is the contents of the file:
Apples,Pears,Oranges,Bananas,Plums
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15
*/
$.get('data.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line containes categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
if (itemNo > 0)
options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function(itemNo, item) {
if (itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
options.series.push(series);
}
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 1200px; height: 800px; margin: 0 auto"></div>
</body>
</html>
Now, I have managed to get this working and attached a screenshot below.
But as you can see at the bottom there is a Series called 'Series 3'
Next is my CSV file as plaintext
,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42
Miles,-100,-100,-100,-58.75,-31,-9.17,9.63,18.3,29.08,38.5,41.19,43.56,46.79,39.45,32.81,26.77,28.64,18.71,24.52,28.53,29.04,24.87,20.96,17.28,20.02,18.27,20.52,17.16,19.26,16.2,13.29,10.52,13.25,14.04,11.44,12.97,21.4,18.81,16.33,13.95,11.67,9.48
Miles 2,-100,-100,-100,-58.75,-22,-9.17,9.63,18.3,29.08,38.5,41.19,43.56,46.79,39.45,32.81,26.77,48.64,18.71,24.52,28.53,29.04,24.87,20.96,17.28,20.02,18.27,20.52,17.16,19.26,16.2,13.29,10.52,13.25,14.04,11.44,12.97,21.4,18.81,16.33,13.95,11.67,9.48
This plots out fine to the chart as you can see in the image. I made two sets of data to highlight that multiple series' work and that having one series wasn't the issue. All the data points were plotted from number 1-42 with appropriate y value.
I have no idea where the extra series came from and why. I have followed the highcharts demo as much as I could but I am now lost.
As posted in the comments by jack R Abbit, excel adds whitespace at the end of a CSV. god knows why. deleting that whitespace fixed the problem, hunky dory! thanks again for those who helped and hopefully someone else will come across this and get helped out too.
regards
miles