I'm trying to use AJAX XMLHttpRequest to pass JSON data to D3 to build graphs. My code is:
<script>
(function() {
var url = "{% url 'airline_year_financial_data' %}";
var httpRequest;
makeRequest();
// create and send an XHR request
function makeRequest() {
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = responseMethod;
httpRequest.open('GET', url)
httpRequest.send()
}
// Handle XHR Response
function responseMethod () {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
updateUISuccess(httpRequest.responseText)
} else {
// Do something
}
}
}
// Handle XHR Success
function updateUISuccess(responseText) {
var response = JSON.parse(responseText)
console.log(response) // Correctly logs json data in console.
console.log(typeof(response)) // Shows the type is 'object' in console.
// Build D3 Chart
d3.json(response, function (data) {
var width = 500;
var height = 300;
var padding = 20;
d3.select("body")
.append("svg")
.attr("class", "waterfall-container")
.attr("width", width)
.attr("height", height)
.attr("style", "outline: thin solid")
d3.select("svg")
.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x-axis", 200)
.attr("y-axis", 300)
.attr("width", 20)
.attr("height", 200)
.attr("fill", "blue")
});
}
})();
I get error that:
GET http://localhost:8000/[object%20Object] 404 (Not Found)
I assume by default D3 wants me to pass some URL to d3.json() and does not want to accept the object. Any idea how can I pass response (object) to D3 and use it as data to build grap?
