You must be logged in to post your query.
Home › Forums › Chart Support › Real Time X Axis
Tagged: AJAX, dynamic, graph, real, time, x-axis
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>
Output
You must be logged in to reply to this topic. Login/Register