FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Formatting th date for the datapoint

Formatting th date for the datapoint

Viewing 6 posts - 1 through 6 (of 6 total)
  • March 8, 2019 at 8:17 pm #24591

    viiartz

    Hi, could you please help me.

    I’m retrieving temperature and time from Thingspeak.com and I’m trying to plot the data points on the graph (see code below) but I don’t seem to be able to get the date formatted properly. in particular the date.

    My problem is generating the data_arr array in the getData() function, I’m I formatting the data point objects correctly?

    Any help would be appreciated.

    
<!DOCTYPE HTML>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous">
  </script>
  <script type="text/javascript">
    var data_arr = []; //global array

    window.onload = function() {
      function getData() {
        $.getJSON(
          'http://api.thingspeak.com/channels/312667/feeds.json?timezone=Australia/Brisbane&days=1&timescale=240',
          function(json_data) {
            console.log(json_data);
            json_data.feeds.forEach(function(data) {
            data_arr.push({
                x: new Date(data.created_at),
                y: parseFloat(data.field1)
              });
            });

            console.log("data_arr: ", data_arr);
          });
      };

      var chart = new CanvasJS.Chart("chartContainer", {
        title: {
          text: "Temperature"
        },
        axisX: {
          valueFormatString: "HH:mm TT",
          // labelAngle: -50
        },
        data: [{
            xValueType: "dateTime",
            type: "line",
            dataPoints: data_arr,
          }
        ]
      });

      getData();
      chart.render();
    }
  </script>
  <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>

<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">
  </div>
</body>

</html>
    March 11, 2019 at 11:21 pm #24607

    Shashi Ranjan

    @viiartz,

    jQuery.getJSON is asynchronous method due to which your chart gets rendered before the array arr_data gets populated. Hence by performing jQuery.getJSON() method inside jQuery.when() method and then calling chart.render() inside the .then() method will work fine in your case as shown in this JSFiddle.

    ____
    Shashi Ranjan
    Team CanvasJS

    March 12, 2019 at 3:37 am #24614

    viiartz

    Thank you for replying and the solution in JSFiddle makes sense now. However, CanvasJS does not seem to be automatically setting the maximum and minimum for the axisY on the graph and setting 0 – 40 instead. Would you be able to tell me why this is the case? When reading the documentation does it not say the max and Min are set automatically by the type of data. What are the criteria used to set the max Min automatically and why in this particular graph that is not happening. I just trying to figure things out.

    Kind regards.

    March 12, 2019 at 9:33 pm #24624

    Shashi Ranjan

    @viiartz,

    The minimum and maximum of Axis Y are auto-calculated based on the dataPoints provided. Can you please create a JSFiddle reproducing the issue you are facing so that we can look into the code, understand the scenario better and help you out.

    ____
    Shashi Ranjan
    Team CanvasJS

    March 13, 2019 at 1:42 am #24629

    viiartz

    Its the same code as in your previus reply https://jsfiddle.net/5tpgqnhr/ used to answer my first question.

    March 13, 2019 at 10:54 pm #24641

    Shashi Ranjan

    @viiartz,

    The minimum and maximum of the axisY are auto-calculated. When all the dataPoints provided are positive(greater than zero) the axisY minimum will be 0. However, you can override this behavior by setting the includeZero to false (which is true by default) as shown in this updated JSFiddle.

    ____
    Shashi Ranjan
    Team CanvasJS

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

You must be logged in to reply to this topic.