score:2

Accepted answer

Month later, I figured it out and will answer my own question. Edited the question to be the working script.

Instead of trying to use d3.json and accessing a URL I could alternatively use call the function of the d3 graph directly within my AJAX success:

AJAX

$.ajax({
    url: url,
    type: "POST",
    dataType: 'json',
    data: { selected_variable : selected_var },

    success: function(data){
        console.log(data);
        var post_data = data;
        drawLineChart(post_data);
    })}

Then instead of using d3.json as I orginally wanted to use, I use the data directly to create the graph:

d3 graph

function drawLineChart(post_data){

    post_data.forEach(function (d) {
        d.timeindex = +d.timeindex;
        d.value = +d.value;

    //ETC
    )}
}

Result

enter image description here

If anyone sees anything that could be more efficient or better, please let me know.


Related Query