Q:

What is the proper way of visualizing data?

I am trying to plot chart using canvas.js!
As I want the data dynamically from my API, I created an array and is then passing it into the json object.
so I did the following:
    <!DOCTYPE HTML>
    <html>
    <head>  
    <script>

    var xhr = new XMLHttpRequest(),
    method = "GET",
    url = "url";
    xhr.open(method, url, true);

    var data_array = [];
    xhr.send();

    window.onload = function () {

        xhr.onreadystatechange = function () {

            if (xhr.readyState === 4 && xhr.status === 200) {
                var api_data = xhr.responseText;
                var api_json = JSON.parse(api_data); 
                var data = api_json["data"];

                for(var i=0; i<data.length; i++) {

                    dp_data = data[i];
                    dp_median = dp_data["dp_median_price"];
                    dp_date = dp_data["date"];

                    var datearray = dp_date.split("-");
                    var newdate = datearray[0] + ', ' + datearray[1] + ', ' + datearray[2];

                    data_array.push({x:newdate, y:Number(dp_median)});
                }

                var chart = new CanvasJS.Chart("chartContainer", {
                    title: {
                        text: "title"
                    },
                    axisX: {
                        valueFormatString: "YYYY MM DD"
                    },
                    axisY2: {
                        title: "Median Price",
                        prefix: "₹",
                        suffix: ""
                },
                toolTip: {
                    shared: true
                },
                legend: {
                    cursor: "pointer",
                    verticalAlign: "top",
                    horizontalAlign: "center",
                    dockInsidePlotArea: true,
                    itemclick: toogleDataSeries
                },
                data:[
                    {
                        type:"line",
                        axisYType: "secondary",
                        name: "name1",
                        showInLegend: true,
                        markerSize: 1,
                        yValueFormatString: "₹#,###",
                        dataPoints: [
                            { x: new Date(2015, 08, 01), y: 648 },
                            { x: new Date(2015, 09, 01), y: 649 },
                            { x: new Date(2015, 10, 01), y: 649 },
                            { x: new Date(2017, 03, 01), y: 400 },
                            { x: new Date(2017, 04, 01), y: 749 },
                            { x: new Date(2017, 05, 01), y: 740 }]
                    },
                    {
                        type:"line",
                        axisYType: "secondary",
                        name: "name2",
                        showInLegend: true,
                        markerSize: 1,
                        yValueFormatString: "₹#,###",
                        dataPoints: data_array
                    }
                ]
            });

            chart.render();

            function toogleDataSeries(e){
                if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else{
                    e.dataSeries.visible = true;
                }
                chart.render();
            }
        }   
    }   
};

</script>

</head>

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

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Here, I cant read the data_array. How do I pass it in the chart data?
Above way is not working!
But when I pass data in a static way it works!
My array is in exact format as shown example of static information!
output of console.log(data_array) = 
    0:
      x: "2019, 08, 29"
      y: 1935
    __proto__: Object

A:

The problem is in how you try to track your ajax request.
The onredystatechange event fires multiple times during the executon of the xhr request.

0 - UNSENT    Client has been created. open() not called yet.
1 - OPENED    open() has been called.
2 - HEADERS_RECEIVED  send() has been called, and headers and status are available.
3 - LOADING   Downloading responseText holds partial data.
4 -   DONE    The operation is complete.

It is only when the state is 4 that you should start processing your data.
xhr.onreadystatechange = function () {

   if (xhr.readyState ==0 4 and xhr.status === 200) {

       //Process your data

