How to make multiple api calls to display a single data in a d3 chart

Question

I'm trying to display a data in a chart using d3, by making 2 separate api calls with same data but different dates.

1st api call:

 var data1 = {     'name'     : 'test',
                   'id'       : 7948237982937,
                   'startDate': startDate1,
                   'endDate':   endDate1,
                   'tz':        getTimezoneOffset() };


var data2: {        'name'     : 'test',
                   'id'       : 7948237982937,
                   'startDate': startDate2,
                   'endDate':   endDate2,
                   'tz':        getTimezoneOffset() };

I'm trying to make the calls and display the graph as follows:

Where the bold line represents one set of start and end dates (startDate1 and endDate1) and the dotted line represents the second set of start and ends dates(startDate2 and endDate2).

i tried this:

draw: function(){
   getData();
   getData2();
},
getData: function() {
    var self = this;
    self.showLoading();
    $.get('url', data1, function(response) {
       console.log("success" + response);
    });
},
 getData2: function() {
    var self = this;
    self.showLoading();
    $.get('url', data2, function(response) {
       console.log("success" + response);
    });
}

However this does not work for me at all...it just displays only one data info in the graph.

EDIT::::: This is what i tried with the given ex below: I have rest call that returns data in this format: all the data is similar except for the date..

data: //returns
  Object {sale: "202", year: "2000", date: "12"}


data2: //returns
 Object {sale: "202", year: "2000", date: "24"}

Now when i tried accessing the lineGen(data), it returns null.

http://jsfiddle.net/nv4x78t6/

and I see no data displayed...

Answer 1

You have two data sets and two lines. This means you want one path to be drawn using data1, and another path to be drawn using data2.

Here's an example. At the end, he just appends a second svg:path to the chart and draws data2 on it.

http://code.tutsplus.com/tutorials/building-a-multi-line-chart-using-d3js--cms-22935

In your case you probably want to pre-insert two paths, and add classes to them like "seriesOneLine" and "seriesTwoLine". Then always draw your "getData" response into "seriesOneLine", and always draw your "getData2" into "seriesTwoLine".

I can't really be more specific without seeing some of your rendering code.

Edit (after question update)

Your fiddle data is two series with one data point each. You are trying to draw a line chart with a single point. I changed your data to this:

                var data = [{
                    "sale": "202",
                    "year": "2000",
                },{
                    "sale": "200",
                    "year": "2001"
                }];
                var data2 = [{
                    "sale": "202",
                    "year": "2000",
                }, {
                    "sale": "140",
                    "year": "2001"
                }];

And two lines showed up.