score:1

Accepted answer

The main problem in the code (missing lines and points and incomplete legend) is that your data needs some structuring.

You dataset some times has cities which may or may not be present.

So The first task will be to make a proper data set

From this:

var maindata = [{
  "date": "21-APR-16 04:19 AM",
  "Delhi": 30,
  "Mumbai": 28
}, {
  "date": "21-APR-16 05:19 AM",
  "Delhi": 32,
  "Mumbai": 30
}, {
  "date": "21-APR-16 06:19 AM",
  "Delhi": 34,
  "Mumbai": 34
}, {
  "date": "21-APR-16 10:19 AM",
  "Kolkata": 34
}, {
  "date": "21-APR-16 11:19 AM",
  "Delhi": 48,
  "Chennai": 40,
  "Kolkata": 36
}];

To this:

[
   {
      "name":"Delhi",
      "values":[
         {
            "date":"2016-04-20T22:49:00.000Z",
            "value":30
         },
         {
            "date":"2016-04-20T23:49:00.000Z",
            "value":32
         },
         {
            "date":"2016-04-21T00:49:00.000Z",
            "value":34
         },
         {
            "date":"2016-04-21T05:49:00.000Z",
            "value":48
         }
      ]
   },
   {
      "name":"Mumbai",
      "values":[
         {
            "date":"2016-04-20T22:49:00.000Z",
            "value":28
         },
         {
            "date":"2016-04-20T23:49:00.000Z",
            "value":30
         },
         {
            "date":"2016-04-21T00:49:00.000Z",
            "value":34
         }
      ]
   },
   {
      "name":"Kolkata",
      "values":[
         {
            "date":"2016-04-21T04:49:00.000Z",
            "value":34
         },
         {
            "date":"2016-04-21T05:49:00.000Z",
            "value":36
         }
      ]
   },
   {
      "name":"Chennai",
      "values":[
         {
            "date":"2016-04-21T05:49:00.000Z",
            "value":40
         }
      ]
   }
]

So now all cities have their respective data. Number of cities x so number of lines will be x.

To make the dataset do this:

var cities = []
var parseDate = d3.time.format("%d-%b-%y %H:%M %p").parse;
maindata.forEach(function(d) {
  cities.push(d3.keys(d).filter(function(key) {
      return key !== "date" && key !== "maxLength";
    }));
  });
cities = d3.set(d3.merge(cities)).values();//get all  cites and make it unique
console.log(cities)
var myData = [];
var allValues = [];
var allDates =[];
//generate cities and its values as shown in my dataset above.
cities.forEach(function(city){
    var cityData = {};
    cityData.name = city;
    cityData.values = [];
    maindata.forEach(function(md){
        if (md[city]){
          allValues.push(md[city])
            allDates.push(parseDate(md.date))
            cityData.values.push({date: parseDate(md.date), value: md[city]})
        }
    })
    myData.push(cityData)
});

Next make lines like this:

  var wsf = svg.selectAll(".wsf")
    .data(myData)
    .enter().append("g")
    .attr("class", "wsf");

  wsf.append("path")
    .attr("class", "line")
    .attr("d", function(d) {
      return line(d.values);
    })
    .style("stroke", function(d) {
      return color(d.name);
    });

And Legends like this:

  var legend = svg.selectAll(".legend")
    .data(cities)
    .enter().append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) {
      return "translate(0," + i * 20 + ")";
    });

  legend.append("rect")
    .attr("x", width - 18)
    .attr("width", 18)
    .attr("height", 4)
    .style("fill", function(d) {
      return color(d);
    });

  legend.append("text")
    .attr("x", width - 24)
    .attr("y", 6)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) {
      return d;
    });
}

working code here

score:1

Here is the updated fiddle

some keys(i.e. Kolkata)aren't included in binding data

Original code:

          color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date" && key !== "maxLength"; }));

          data.forEach(function(d) {
            d.date = parseDate(d.date);
          });

          var wsfs = color.domain().map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {date: d.date, tonneValue: +d[name]};
              })
            };
          });

To(you need change ['Delhi', 'Mumbai', 'Kolkata', 'Chennai'] to code more formally):

          var wsfs = ['Delhi', 'Mumbai', 'Kolkata', 'Chennai'].map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {date: d.date, tonneValue: +d[name]};
              }).filter(function(d) {
            return !isNaN(d.tonneValue)
        })
            };
          });

Filter data
Original code:

          var wsfs = color.domain().map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {date: d.date, tonneValue: +d[name]};
              })
            };
          });

To:

          var wsfs = ['Delhi', 'Mumbai', 'Kolkata', 'Chennai'].map(function(name) {
            return {
              name: name,
              values: data.map(function(d) {
                return {date: d.date, tonneValue: +d[name]};
              }).filter(function(d) {
                return !isNaN(d.tonneValue)
            })};
          });

Related Query

More Query from same tag