Home › Forums › Chart Support › Dynamically Plot live data

Dynamically Plot live data

Viewing 4 posts - 1 through 4 (of 4 total)
  • May 2, 2015 at 10:35 pm #8686

    szjoueid

    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&gt;
    <script type=”text/javascript” src=”https://cdn.canvasjs.com/canvasjs.min.js”></script&gt;
    <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&#8221;,
    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>

    May 4, 2015 at 4:15 pm #8690

    Sunil Urs

    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

    May 4, 2015 at 10:24 pm #8694

    szjoueid

    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.

    May 5, 2015 at 3:29 pm #8697

    Sunil Urs

    szjoueid,

    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.

    —
    Sunil Urs

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.