You must be logged in to post your query.
Home › Forums › Chart Support › Dynamically Plot live data
Hello. Your help is greatly appreciated. I am trying to plot a dynamic graph representing real-time data collected from a sensor. This sensor collects all sorts of data but for the focus of this graph, I would like to only display the light intensity collected (variable name: data[i].d.optical. As you can see from the code, I am calling via ajax an external url that is providing me with the necessary data in a json format. Here’s a sample of the data: [ { “_id”: “553fae4c30111a1f004db478”, “d”: { “AmbTemp”: “23.6875”, “optical”: “152.36”, “time”: 1430236748208 } }, { “_id”: “553fae4d30111a1f004db479”, “d”: { “AmbTemp”: “23.6875”, “optical”: “152.32”, “time”: 1430236749182 } }, { “_id”: “553fae4e30111a1f004db47a”, “d”: { “AmbTemp”: “23.6875”, “optical”: “152.36”, “time”: 1430236750213 } }, { “_id”: “553fae4f30111a1f004db47b”, “d”: { “AmbTemp”: “23.6875”, “optical”: “152.36”, “time”: 1430236751211 } }, { “_id”: “553fae5030111a1f004db47c”, “d”: { “AmbTemp”: “23.6875”, “optical”: “153.96”, “time”: 1430236752177 } },
I am simply unable to dynamically plot the data (x is time, y is the Lux value). I included the console.log of these values. Here’s a sample of the console.log(): in the form of Lux time. Keep in mind the lux value can be zero (0) (dark no light).
“152.36 1430236748208” “152.32 1430236749182” “152.36 1430236750213” “152.36 1430236751211” “153.96 1430236752177” “152.68 1430236753264” “152.64 1430236754243” “152.04 1430236755300” “152.36 1430236756210” “153.64 1430236757258” “153.64 1430236758183” “153.64 1430236759290” “153.92 1430236760260” “153.92 1430236761238” “153.64 1430236762261” “153.96 1430236763259” “153.64 1430236764234” “153.64 1430236765260” “153.64 1430236766167” “153.92 1430236767261” “154.56 1430236773216” “155.52 1430236774263” “152.68 1430236775199” “153.64 1430236776268” “154.28 1430236777263″
I am at a loss. I tried several different ways to get it going and I was only successful in rendering the graph without the data.
P.S. when you do the dps.shift, is it emptying the dataset? I am afraid if I will be collecting data all day long, I will ran out of memory by keeping pushing the data into the dsp array.
Help please. Here’s the latest code: <!DOCTYPE html> <html> <head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script> <script type=”text/javascript” src=”https://cdn.canvasjs.com/canvasjs.min.js”></script> <script type=”text/javascript” src=”/assets/script/Moment.js”></script> <script type=”text/javascript”>
(function($) {
var updateInterval = 5000; var maximum = 25; // number of dataPoints visible at any point var chart; var dps = []; // dataPoints
window.onload = function () { chart = new CanvasJS.Chart(“chartContainer”,{ title :{ text: “Live Data” }, axisY:{ minimum: 0, maximum: 500, valueFormatString: “$ #,###,#0” //try properties here }, axisX:{ interval: 20, intervalType: “seconds”, xValueType: “dateTime”, valueFormatString: “DD-MMM” , labelAngle: -50 }, data: [{ type: “line”, dataPoints: dps }] }); };
function getPayLoadData() { var jqxhr = $.ajax({ dataType: “json”, url: “http://sensortag-samij.mybluemix.net/data”, type: ‘GET’, }) .done (function(data, textStatus, jqXHR) { // Ajax call was a success process the data updateChart(data); }) .fail (function(jqXHR, textStatus, errorThrown) { console.log(“Error”); }) .always(function(jqXHROrData, textStatus, jqXHROrErrorThrown) { console.log(“complete”); }) ; }// getPayLoadData
function updateChart(data) { var datalength = data.length; if (datalength != 0) { var totalsize = (datalength <= maximum) ? datalength : maximum;
for (var i = 0; i < totalsize; i++) {
console.log(data[i].d.optical + ” ” + data[i].d.time); //debug
dps.push({ x: moment(data[i].d.time).format(‘MM-DD-YY HH:mm’), y: data[i].d.optical }); };
if (dps.length > datalength) { dps.shift(); } chart.render(); } }
$(document).ready(function(){ getPayLoadData(); });
// update chart after specified time. // setInterval(function(){getPayLoadData()}, updateInterval);
})(jQuery); </script>
</head>
<body> <div id=”chartContainer” style=”height: 300px; width:100%;”></div> </body> </html>
szjoueid,
I just observed that the “optical” value that you are setting is a string instead of an Number. Please convert it to a number as shown below and it should work fine.
y: Number(data[i].d.optical)
— Sunil Urs
Thank you for your quick reply. I overlooked the fact the value was a string. I still have an issue with the time. The optical values are showing but the x Axis is showing a a long grey area. Do you mind showing me the following:
1- what I should enter as parameters for the axisX:{ interval: ?, intervalType: “?”, xValueType: “?”, valueFormatString: “?” , labelAngle: -50
2- how should I format the time value to be pushed into dsp?
dps.push({ x: <time format, y: Numeric(data[i].d.optical)
3- Do I need to clear / empty dps every so often or does your dps.shift clear the registry? I will be collecting data all day long and just displaying it in real time.
Thanks again for your help.
If you can create a jsfiddle with your code it would be a lot more easier for us to figure out the issue and fix the same.
You must be logged in to reply to this topic. Login/Register