javascript - How to create a separate chart for every column in csv -

i have csv, , want separate chart every brand + date.

 date,apple,google,amazon,microsoft,ibm,facebook     2015-08-11,113.489998,690.299988,527.460022,46.41,155.509995,93.620003     2015-08-10,119.720001,663.140015,524,47.330002,156.75,94.150002     2015-08-07,115.519997,664.390015,522.619995,46.740002,155.119995,94.300003     2015-08-06,115.129997,670.150024,529.460022,46.619999,156.320007,95.120003     2015-08-05,115.400002,673.289978,537.01001,47.580002,157.899994,96.440002 

for can create code every brand, , 6 separate charts. think there must simple solution this.

// adds svg canvas var chart1 = d3.select("body")     .append("svg")         .attr("width", width + margin.left + margin.right)         .attr("height", height + margin.top + margin.bottom)     .append("g")         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");  // data d3.csv("data1.php", function(error, data) {      data.foreach(function(d) {         d.date = parsedate(d.date);         d.m_data = +d.mrr;     });      // scale range of data     x.domain(d3.extent(data, function(d) { return d.date; }));     y.domain([d3.min(data, function(d) { return d.mrr; }), d3.max(data, function(d) { return d.mrr; })]);      // add valueline path.     chart1.append("path")         .attr("class", "line")         .attr("d", valueline(data));      // add x axis     chart1.append("g")         .attr("class", "x axis")         .attr("transform", "translate(0," + height + ")")         .call(xaxis);      // add y axis     chart1.append("g")         .attr("class", "y axis")         .call(yaxis);      chart1.append("text")         .attr("x", width / 2 )         .attr("y", 0)         .style("text-anchor", "middle")         .text("mrr");  }); 

for put in function

add_chart("chart1",'mrr'); add_chart("chart2",'arr');   function add_chart(id,field_name){           console.log(id+', ' + field_name );     var my_object = {};       // adds svg canvas     my_object[id] = d3.select("body")         .append("svg")             .attr("width", width + margin.left + margin.right)             .attr("height", height + margin.top + margin.bottom)         .append("g")             .attr("transform", "translate(" + margin.left + "," + margin.top + ")");      // data     d3.csv("data1.php", function(error, data) {          data.foreach(function(d) {             d.date = parsedate(d.date);             d.m_data = +d[field_name];         });          // scale range of data         x.domain(d3.extent(data, function(d) { return d.date; }));         y.domain([d3.min(data, function(d) { return d[field_name]; }), d3.max(data, function(d) { return d[field_name]; })]);          // add valueline path.         my_object[id].append("path")             .attr("class", "line")             .attr("d", valueline(data));          // add x axis         my_object[id].append("g")             .attr("class", "x axis")             .attr("transform", "translate(0," + height + ")")             .call(xaxis);          // add y axis         my_object[id].append("g")             .attr("class", "y axis")             .call(yaxis);          my_object[id].append("text")             .attr("x", width / 2 )             .attr("y", 0)             .style("text-anchor", "middle")             .text(field_name);      }); }