CanvasJS - Render timeline Chart from User Input

Question

I am trying to modify an example of Rendering a Chart from User Input for CanvasJS. I want the x-axis to be a timeline. I feel I am on the right track but now stuck in setting the correct time input. The code is:

var dps = []; //dataPoints. 

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "DataPoints from User Input"
    },
    axisX: {
        valueFormatString: "HH:mm",
        labelAngle: -50
    },
    axisY: {
        valueFormatString: "###"
    },
    color: "#F08080",
    data: [{
        type: "line",
        xValueFormatString: "HH:mm",
        dataPoints: dps
    }]
});

function addDataPointsAndRender() {
    xValue = Number(document.getElementById("xValue").value);
    yValue = Number(document.getElementById("yValue").value);
    dps.push({
        x: new Date(xValue),
        y: yValue
    });
    chart.render();
}

var renderButton = document.getElementById("renderButton");
renderButton.addEventListener("click", addDataPointsAndRender);

I know it is a problem in using new Date() but not sure what.

Here is a codepen

Any help would be appreciated!

score 0 · Answer 1 · edited Jan 28 '20 at 05:32

If you want x-axis to show time of adding data,Leave Date function without any argument.

x: new Date(),

if you want the user select time:

HTML

<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<title>Document</title>
</head>
<body>
     X Value:
     <div class='input-group date' id='xValue'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
               <span class="glyphicon glyphicon-calendar"></span>
          </span>
     </div>
     <input id="yValue" type="number" step="any" placeholder="Enter Y-Value">
     <button id="renderButton">Add DataPoint & Render</button>
     <div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;">
     </div>
</body>
</html>

JS

 $(document).ready(function(){
      $('#xValue').datetimepicker();
 })
 var dps = []; //dataPoints. 

 var chart = new CanvasJS.Chart("chartContainer", {
      title: {
         text: "DataPoints from User Input"
      },
 axisX:{      
      valueFormatString: "HH:mm" ,
      labelAngle: -50
 },
 axisY: {
     valueFormatString: "###"
 },
 color: "#F08080",
 data: [{
     type: "line",
     xValueFormatString: "HH:mm",
     dataPoints: dps
 }]
});

function addDataPointsAndRender() {
    var date = $('#xValue').data("DateTimePicker").date();
    yValue = Number(document.getElementById("yValue").value);
    dps.push({
       x: new Date(date.unix()*1000),
       y: yValue
    });
chart.render();
}

var renderButton = document.getElementById("renderButton");
renderButton.addEventListener("click", addDataPointsAndRender);

I want the user to be able to add any time the want, not just the time now — Macsupport, Jan 27 '20 at 07:05
Get an error `TypeError: undefined is not an object (evaluating '$('#xValue').data("DateTimePicker").date');` — Macsupport, Jan 27 '20 at 16:20

CanvasJS - Render timeline Chart from User Input

1 Answers1