You are correct in that you are not parsing the JSON correctly. You can read this answer on parsing JSON data to get a better understanding. And then work to get an understanding of how it works within D3 functions. Often console.log is your friend to see where in the nesting you are and adjust from there.
Multiple lines on chart
Take a look at this block builder
The key was mapping the data to a more accessible format for D3
var stocks = Object.keys(data).map(function(d){ ///map data to better fit our needs
return {
name: d,
values: data[d].point.map(function(d){
return {
date: timeFormat(d.date),
price: d.price
};
})
};
});
The next task is to bind the elements being drawn to the data:
var stock = chart.selectAll(".stocks") //This creates a <g> tag as I put circles on the lines. You don't need this if you just want the line
.data(stocks)
.enter().append("g")
.attr("class", "stocks");
var paths = stock.selectAll(".line") //Bind the paths to the data we mapped earlier
.data(stocks)
.enter()
.append("path")
.attr("class", "line")
.attr("d", function(d){return line(d.values)});
You can use the newly mapped data to set the .domain() for each axis. In this case I updated the x-axis domain:
x.domain(
[d3.min(stocks, function(s){
return d3.min(s.values, function(v){ return v.date; });
}), d3.max(stocks, function(s){
return d3.max(s.values, function(v){ return v.date; });
})]
);
Passing ticker as argument
I updated the pen to provide data as if you were entering the stock ticker rather than charting both on the same chart.
To make it dynamic you can have a user <input> field with a submit button. Then have a .on('click') function that pass that value and runs the d3.json call each time you submit
$('#submit').on('click', function(){
let stock = $('#stock-input').val().toUpperCase();
paths(stock);
})
Within the D3 call you can set a var to equal data.historical[stock]; for example:
var data = data.historical[stock] //This will now give access to KALE's or whatever other stock's data that was passed as an argument.
This way when you call a function that access that stocks data you can begin from that point, such as:
var line = d3.svg.line()
.x(function(d) { return x(timeFormat.parse(d.date)); }) // Notice we didn't have to use data.historical['stock'].date
.y(function(d) { return y(d.price); });
In addition, there's quite a bit missing from your code in the plnkr in order to 'draw' the chart. I'm not sure if you just haven't gotten there yet or are unsure, but that is outside the scope of the question.
Some useful links:
Initial Response
I don't think you're accessing the JSON properties correctly. For example, you have d3.values(historical), but it should be d3.values(data.historical).
Also, d.KALE and d.BRGR wouldn't return anything, you would need d.historical.point.KALE and d.historical.point.BRGR to access the date and price information for each item d.historical.point.BRGR.price.
you can do some 'pre-processing' and map the items and store them so you don't have to write d.historical.point.KALE... each time. Just some initial thoughts. I'll try and take a deeper look this weekend.
