Home forums Using CanvasJS Formatting th date for the datapoint

This topic contains 5 replies, has 2 voices, and was last updated by  Shashi Ranjan 2 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #24591

    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://canvasjs.com/assets/script/canvasjs.min.js"></script>
    </head>
    
    <body>
      <div id="chartContainer" style="height: 300px; width: 100%;">
      </div>
    </body>
    
    </html>
    
    
    #24607

    @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

    #24614

    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.

    #24624

    @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

    #24629

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

    #24641

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