jquery undefined error for simple ajax request

Question

I have included jquery, then all ui js files as few thread suggested that this error is due to dependency. Using canvasjs to draw graph when users upload photos.

  Uncaught TypeError: Cannot read property 'getTime' of undefined

Bootstrap html with all required dependencies. I think some loop issue or variable is not getting passed correctly, but console.log shows valid json as per required data points of canvasjs.if those points are directly embedded in that data points graph is generated without any error or issue.

I tried to update function of canvasjs also but does not work and I think that is not required as these data are passed with success so blank data is not being passed. I have doubt that for loop is the culprit, but don't know how and why

$(document).ready(function() {
    (function() {

        $('#upload-form2').ajaxForm({
            dataType: 'json',
            success: function(data) {
               var sthtml;              
                var html = '',
                    downlo;
                for (var i = 0; i < data.length; i++) {
                    z = i + 1;
                    downlo = data[i];
                    html += '<tr id="' + i + '"><td>' + z + '</td></tr>';
                sthtml += downlo.stchart;

                }

// canvas graph starts here

        var chart = new CanvasJS.Chart("chartContainer",
    {     
      theme:"theme2",
      title:{
        text: "Game of Thrones, Viewers of the first airing on HBO"
      },
      data: [
      {        
        type: "spline",        
       dataPoints: [sthtml]
// this is the culprit dont know why but console.log shows correct canvasjs.min.js:103 Uncaught TypeError: Cannot read property 'getTime' of undefined
    //         dataPoints: [{ x: 3, y: 150 },{ x: 2, y: 14}]     
 //gives no error however my console.log output is exactly same in last line of this script 
 },
      {        
        type: "spline", 
       dataPoints: [{ x: 1, y: 450 },{ x: 2, y: 414}] 
      } 
      ],
    });
chart.render();

// canvas graph ends here

//console.log(sthtml);
            }
        })
    })();
});

Answer 1

your sthtml should be array type. you have used concatenation operation for sthtml that will convert sthtml to string. you need to use array push operation to push.

$(document).ready(function() {
    (function() {

        $('#upload-form2').ajaxForm({
            dataType: 'json',
            success: function(data) {
               var sthtml=[];// sthhtml is array              
                var html = '',
                    downlo;
                for (var i = 0; i < data.length; i++) {
                    z = i + 1;
                    downlo = data[i];
                    html += '<tr id="' + i + '"><td>' + z + '</td></tr>';
                sthtml.push(downlo.stchart); // use push to push objects

                }

// canvas graph starts here

        var chart = new CanvasJS.Chart("chartContainer",
    {     
      theme:"theme2",
      title:{
        text: "Game of Thrones, Viewers of the first airing on HBO"
      },
      data: [
      {        
        type: "spline",        
       dataPoints: sthtml
// this is the culprit dont know why but console.log shows correct canvasjs.min.js:103 Uncaught TypeError: Cannot read property 'getTime' of undefined
    //         dataPoints: [{ x: 3, y: 150 },{ x: 2, y: 14}]     
 //gives no error however my console.log output is exactly same in last line of this script 
 },
      {        
        type: "spline", 
       dataPoints: [{ x: 1, y: 450 },{ x: 2, y: 414}] 
      } 
      ],
    });
chart.render();

// canvas graph ends here

//console.log(sthtml);
            }
        })
    })();
});