Reload D3 Graph When A 'dropdown Menu Value Changes

I am trying to get my d3.js line chart reloading when the user chooses an item in a dropdown menu, with the data corresponding to this item. My menu is a list of stock market valu

Solution 1:

You can actually use d3 to bind events to the dropdown menu and then call a function when an on change event occurs. The function would go off and, in your case, grab the stock values from Yahoo. The only real trick is getting the data out of this. I ended up console logging this and digging through until I found __data__. Using d3 means you don't need knockout for this and can remove that code from your example.

Anyway, to set this up you'll need a div to append the dropdown menu and a set of stock names. You can use this list of stock names to create the dropdown menu as shown below.

var names = ["AAPL", "YHOO", "FB", "MSFT"];

d3.select("#dropDown")
    .append("select")
    .on("change", function() {
        change(this.options[this.selectedIndex].__data__);
    })
    .selectAll("option")
    .data(names).enter()
    .append("option")
    .text(function(d) {
        return d;
    });

Of course you need to setup the change function, which needs to wrap up all the variables required to do the call to Yahoo. Obviously, you'll need to pass in the stock parameter and once you've received the json back from Yahoo you'll need to call your draw function. So borrowing from your code something like this should work:

functionchange(stock) {

    var url = 'http://query.yahooapis.com/v1/public/yql';
    var startDate = '2013-09-06';
    var endDate = '2014-03-06';
    // NB the inclusion of the stock parametervar req = encodeURIComponent('select * from yahoo.finance.historicaldata where symbol in ("' + stock + '") and startDate = "' + startDate + '" and endDate = "' + endDate + '"');

    var data = $.getJSON(url, 'q=' + req + "&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json", draw);

}

You'd have to call the draw function on load otherwise you'll end up with a blank screen and also sort out transitioning from one data set to the next.