Home forums Using CanvasJS Real Time X Axis

This topic contains 1 reply, has 1 voice, and was last updated by  ccscotsat 2 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #6113

    ccscotsat
    Participant

    Hi,
    I call an ajax script which gives the y values of the graph.
    I want to set the x values as real current date and time values but I am only getting them as milliseconds.
    Output

    <div id=”chartContainer” style=”height: 400px; width:100%;”></div>

    <script type=”text/javascript”>
    $( document ).ready(function () {

    var dps = []; // dataPoints

    var chart = new CanvasJS.Chart(“chartContainer”,{
    zoomEnabled: true,
    panEnabled: true,
    title :{
    text: “Signal Strength”
    },
    axisX:{
    labelAngle: -50,
    tickColor: “black”,
    tickLength: 10,
    tickThickness: 5
    },
    axisY:{
    tickColor: “black”,
    tickLength: 10,
    tickThickness: 5
    },
    data: [{
    xValueType: “dateTime”,
    type: “line”,
    color: “#4ca64c”,
    dataPoints: dps
    }]
    });

    var yVal = 0;
    var updateInterval = 10;
    var dataLength = 1000000000; // number of dataPoints visible at any point

    var time = new XDate();
    var xVal = time;
    alert(xVal);

    var updateChart = function () {
    $.ajax({
    url: “signalValue.php”,
    success: function(data){
    document.getElementById(“signalStrength”).innerHTML = data;
    var response = data.split(“,”);
    var newVal = parseFloat(response[0]);

    yVal = newVal;
    dps.push({
    x: xVal,
    y: yVal
    });
    xVal++;

    if (dps.length > dataLength)
    {
    dps.shift();
    }

    chart.render();
    }
    });
    };

    // generates first set of dataPoints
    updateChart();

    // update chart after specified time.
    setInterval(function(){updateChart()}, updateInterval);
    });
    </script>

    #6114

    ccscotsat
    Participant

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

You must be logged in to reply to this topic.