Bubbles are not displaying in bubble chart using canvas.js bubble chart

Question

I am using bubble chart from canvas.js liberary, I am fetching values from xml and passing its data points but the bubbles are not displaying.

check below code sample - HTML here -

 <div id="img2">
    <div id="chart1" style = "height: 281px; width: 500px;"></div>
 </div>

XML is here -

<totalCallsChart>
    <label>NI_02</label>
    <label>NI_03</label>
    <label>NI_07</label>
    <label>NI_08</label>
    <label>NI_11</label>

    <xText>16</xText>
    <xText>31</xText>
    <xText>31</xText>
    <xText>37</xText>
    <xText>70</xText>

    <yText>3200</yText>
    <yText>1500</yText>
    <yText>-1500</yText>
    <yText>4100</yText>
    <yText>1200</yText>

    <zText>200.90</zText>
    <zText>237.414</zText>
    <zText>306</zText>
    <zText>320.71</zText>
    <zText>161.81</zText>
</totalCallsChart>

My xmlParser function-

  function xmlParser(xml){
        pgXml = $.xmlToJSON(xml) ;
        for ( var i = 0; i<  pgXml.pageContent[0].totalCallsChart[0].xText.length ; i++){
            getChartXValues.push(pgXml.pageContent[0].totalCallsChart[0].xText[i].Text);
        }
        for ( var i = 0; i<  pgXml.pageContent[0].totalCallsChart[0].yText.length ; i++){
            getChartYValues.push(pgXml.pageContent[0].totalCallsChart[0].yText[i].Text);
        }
        for ( var i = 0; i<  pgXml.pageContent[0].totalCallsChart[0].zText.length ; i++){
            getChartZValues.push(pgXml.pageContent[0].totalCallsChart[0].zText[i].Text);
        }
        for ( var i = 0; i<  pgXml.pageContent[0].totalCallsChart[0].label.length ; i++){
            getChartLabelValues.push(pgXml.pageContent[0].totalCallsChart[0].label[i].Text);
        }
    }

Javascript is here -

   var dps = [{x: getChartXValues[0], y: getChartYValues[0], z: getChartZValues[0], label: getChartLabelValues[0]},{ x: getChartXValues[1], y: getChartYValues[1], z: getChartZValues[1], label: getChartLabelValues[1]},{ x: getChartXValues[2], y: getChartYValues[2], z: getChartZValues[2], label: getChartLabelValues[2]},{ x: getChartXValues[3], y: getChartYValues[3], z: getChartZValues[3], label: getChartLabelValues[3]},{ x: getChartXValues[4], y: getChartYValues[4], z: getChartZValues[4], label: getChartLabelValues[4]}];


        for(var i=0; i<dps.length;i++){
        console.log("dps: "  +dps[i].x + " " + dps[i].y +" "+ dps[i].z + " " +dps[i].label);
        var totalCallsChart = new CanvasJS.Chart("chart1", {
          theme: "theme2",
          height:281,
          title: {
            text: ""
        },
        axisX: {
            maximum: 90,
            minimum: 0,
            interval: 15,
            titleFontSize: 8,
            titleFontColor: "#83A7D0",
            title: "Total Calls MAT"
        },
        axisY: {
            maximum: 6000,
            minimum: -3000,
            interval: 1000,
            titleFontSize: 8,
            titleFontColor: "#83A7D0",
            title: "Absolute Market Growth"
        },
        legend:{
            verticalAlign: "bottom",
            horizontalAlign: "center",
            fontweight: "bold"
        },
        data: [
            {
                type: "bubble",
                showInLegend: true,
                legendText: getChartLabelValues[0],
                dataPoints: [
                    { x:dps[i].x, y: dps[i].y, z: dps[i].z, label: dps[i].length}
                ]
            }
    ]
    });

        totalCallsChart.render();
    }

Check above I am passing dynamic values in data points but its not accepting, its showing blank chart. Please help me out