CODEWITHSUNDEEP
javascriptajaxjsonxmlhttprequesthtml5-canvas
user1386966
user1386966

Reputation: 3402

How to pass a parameter to CanvasJS returned from XMLHttpRequest?

I took an example code from : http://canvasjs.com/html5-javascript-bar-chart/ ("Cost of pancake.."). When running it, it works of course.

I created a small html that when entering a url, it returns me exactly the second parameter that should be passed to : var chart = new CanvasJS.Chart("chartContainer",my_parameter);

code :

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
    document.getElementById("myDiv").innerHTML=xmlhttp.response;
    alert(xmlhttp.responseText);
    var toSend = xmlhttp.response;
    var chart = new CanvasJS.Chart("chartContainer",toSend); // The problem is here
    chart.render();
}
  }
xmlhttp.open("GET","https://myURL",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>PRESS BUTTON!!!</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>

<script type="text/javascript" src="canvasjs-1.7.0-beta/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>


</html>

MyURL is returning this (exactly what is written in the canvasJS chart example) :

{
    title:{
        text:"Cost Of Pancake Ingredients, 2011"
    },
            animationEnabled: true,
    axisX:{
        interval: 1,
        labelFontSize: 10,
        lineThickness: 0
    },
    axisY2:{
        valueFormatString: "$ 0",
        lineThickness: 0                
    },
    toolTip: {
        shared: true
    },
    legend:{
        verticalAlign: "top",
        horizontalAlign: "center"
    },

    data: [
    {     
        type: "stackedBar",
        showInLegend: true,
        name: "Butter (500gms)",
        axisYType: "secondary",
        color: "#7E8F74",
        dataPoints: [
            {y: 3, label: "India"},
            {y: 5, label: "US" },
            {y: 3, label: "Germany"   },            
            {y: 6, label: "Brazil"  },          
            {y: 7, label: "China"  },
            {y: 5, label: "Australia"  },
            {y: 5, label: "France"  },
            {y: 7, label: "Italy"  },
            {y: 9, label: "Singapore"  },
            {y: 8, label: "Switzerland"  },
            {y: 12, label: "Japan"  }
        ]
    },
    {     
        type: "stackedBar",
        showInLegend: true,
        name: "Flour (1kg)",
        axisYType: "secondary",
        color: "#F0E6A7",
        dataPoints: [
            {y: .5, label: "India" },
            {y: 1.5, label: "US" },
            {y: 1, label: "Germany"   },            
            {y: 2, label: "Brazil"  },          
            {y: 2, label: "China"  },
            {y: 2.5, label: "Australia"  },
            {y: 1.5, label: "France"  },
            {y: 1, label: "Italy"  },
            {y: 2, label: "Singapore"  },
            {y: 2, label: "Switzerland"  },
            {y: 3, label: "Japan"  }
        ]
    },
    {     
        type: "stackedBar",
        showInLegend: true,
        name: "Milk (2l)",
        axisYType: "secondary",
        color: "#EBB88A",
        dataPoints: [
            {y: 2, label: "India" },
            {y: 3, label: "US" },
            {y: 3, label: "Germany"   },            
            {y: 3, label: "Brazil"  },          
            {y: 4, label: "China"  },
            {y: 3, label: "Australia"  },
            {y: 4.5, label: "France"  },
            {y: 4.5, label: "Italy"  },
            {y: 6, label: "Singapore"  },
            {y: 3, label: "Switzerland"  },
            {y: 6, label: "Japan"  }
        ]
    },
    {
        type: "stackedBar",
        showInLegend: true,
        name: "Eggs (20)",
        axisYType: "secondary",
        color:"#DB9079",
        indexLabel: "$#total",
        dataPoints: [
            {y: 2, label: "India" },
            {y: 3, label: "US" },
            {y: 6, label: "Germany"   },            
            {y: 4, label: "Brazil"  },          
            {y: 4, label: "China"  },
            {y: 8, label: "Australia"  },
            {y: 8, label: "France"  },
            {y: 8, label: "Italy"  },
            {y: 4, label: "Singapore"  },
            {y: 11, label: "Switzerland"  },
            {y: 6, label: "Japan"  }
        ]
    }
    ]
    }

I suspect that both xmlhttp.response and xmlhttp.responseText returning text..

If I remove the toSend parameter and enter hardcoded the long JSON it works fine.

Can anyone please help?

------- editing with solution :

var toSend= eval ('('+ xmlhttp.responseText +')');
var chart = new CanvasJS.Chart("chartContainer",toSend);
chart.render();

Upvotes: 0

Views: 307

Answers (1)

Miguel
Miguel

Reputation: 20633

Parse the JSON string to turn it into a JavaScript object.

var toSend;

try {
   toSend = JSON.parse(xmlhttp.responseText);
} catch(e) {
   toSend = xmlhttp.response;
}

var chart = new CanvasJS.Chart('chartContainer', toSend);

Upvotes: 1

Related Questions