Real Time X Axis

• March 19, 2014 at 10:40 pm #6113
  
  ccscotsat

  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.
  
  
  <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>

  March 19, 2014 at 10:40 pm #6114
  
  ccscotsat

  Output