ChandrakantThakkarDigiCorp/LICENSE.txt

## data.js
var data = [{
        "startDate": "05-Sep-17",
        "productASales": 0,
        "userBatchId": "S-BFE1182-B2",
        "productBSales": 14.167
    },
    {
        "startDate": "06-Sep-17",
        "productASales": 23.167,
        "userBatchId": "S-BFE1362-B3",
        "productBSales": 27.167
    },
    {
        "startDate": "07-Sep-17",
        "productASales": 23.333,
        "userBatchId": "S-BFE1362-B5",
        "productBSales": 28.167
    },
    {
        "startDate": "08-Sep-17",
        "productASales": 30.5,
        "userBatchId": "S-BFE1362-B7",
        "productBSales": 27.167
    },
    {
        "startDate": "09-Sep-17",
        "productASales": 168.667,
        "userBatchId": "S-BFE1144-B1",
        "productBSales": 56
    },
    {
        "startDate": "10-Sep-17",
        "productASales": 92.667,
        "userBatchId": "S-BFE1362-B9",
        "productBSales": 46
    },
    {
        "startDate": "11-Sep-17",
        "productASales": 6.5,
        "userBatchId": "S-BFE1049-B1",
        "productBSales": 9.167
    },
    {
        "startDate": "12-Sep-17",
        "productASales": 1.5,
        "userBatchId": "S-BFE1049-B2",
        "productBSales": 9.167
    },
    {
        "startDate": "14-Sep-17",
        "productASales": 0,
        "userBatchId": "S-BFE1049-B3",
        "productBSales": 9.167
    },
    {
        "startDate": "15-Sep-17",
        "productASales": 0,
        "userBatchId": "S-BFE1049-B5",
        "productBSales": 23
    },
    {
        "startDate": "16-Sep-17",
        "productASales": 0,
        "userBatchId": "O-BFE1182-B1",
        "productBSales": 53
    },
    {
        "startDate": "18-Sep-17",
        "productASales": 248.667,
        "userBatchId": "O-BFE1927-B1",
        "productBSales": 39
    },
    {
        "startDate": "20-Sep-17",
        "productASales": 264.667,
        "userBatchId": "O-BFE1927-B2",
        "productBSales": 18.167
    },
    {
        "startDate": "21-Sep-17",
        "productASales": 237,
        "userBatchId": "O-BFE1927-B3",
        "productBSales": 18.167
    },
    {
        "startDate": "22-Sep-17",
        "productASales": 0,
        "userBatchId": "O-BFE1183-B1",
        "productBSales": 14.167
    },
    {
        "startDate": "23-Sep-17",
        "productASales": 207.333,
        "userBatchId": "O-BFE1362-B7",
        "productBSales": 69
    },
    {
        "startDate": "25-Sep-17",
        "productASales": 0,
        "userBatchId": "O-BFE1182-B2",
        "productBSales": 30
    },
    {
        "startDate": "26-Sep-17",
        "productASales": 141.5,
        "userBatchId": "O-BFE1049-B1",
        "productBSales": 9.167
    },
    {
        "startDate": "27-Sep-17",
        "productASales": 0,
        "userBatchId": "O-BFE1183-B2",
        "productBSales": 32
    },
    {
        "startDate": "28-Sep-17",
        "productASales": 338.5,
        "userBatchId": "O-BFE1047-B1",
        "productBSales": 12.167
    },
    {
        "startDate": "29-Sep-17",
        "productASales": 180.667,
        "userBatchId": "O-BFE1049-B2",
        "productBSales": 22
    },
    {
        "startDate": "30-Sep-17",
        "productASales": 355.833,
        "userBatchId": "O-BFE1047-B2",
        "productBSales": 11.167
    }
];

## index.html
<html>

<body>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="multiSeriesLineChart1.js"></script>
    <script src="data.js"></script>
    <script>
        window.addEventListener('resize', function (event) {
            $("#chart").width(window.innerWidth * 0.9);
            $("#chart").height(window.innerHeight);
        });
    </script>

    <div id="chart" style="width: 800;height: 500px;">
    </div>
    <a href="https://stackoverflow.com/users/7430694/chandrakant-thakkar" style="position: absolute;top: 87%;left: 77%;" target="_blank">
        <img src="https://stackoverflow.com/users/flair/7430694.png" width="208" height="58" alt="profile for Chandrakant Thakkar at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for Chandrakant Thakkar at Stack Overflow, Q&amp;A for professional and enthusiast programmers">
        </a>
    <div id="tooltipDiv" style="display:none;background:green;color:white;position: absolute;padding: 3;">
        <div id="batch"></div>
        <div id="product"></div>
        <div id="a1"></div>
        <div id="a2"></div>
    </div>
    <script>
        $("#chart").empty();
        var columnsInfo = {
            "productASales": "Product A Sales",
            "productBSales": "Product B Sales"
        };
        var muliSeriesChartConfig = {
            mainDiv: "#chart",
            colorRange: ["#ff0000", "#008000"],
            data: data,
            columnsInfo: columnsInfo,
            xAxis: "startDate",
            yAxis: "productASales",
            label: {
                xAxis: "Date",
                yAxis: "Product A Sales (Lacks)"
            },
            requireCircle: false,
            requireLegend: true,
        };
        var muliSeriesChart = new multiSeriesLineChart(
            muliSeriesChartConfig);
    </script>
</body>

</html>

## LICENSE.txt
MIT License

Copyright (c) [2017] [Chandrakant Thakkar]

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

## multiSeriesLineChart1.js
function multiSeriesLineChart(config) {
  drawmultiSeriesLineChartCharts(config);
}

function createmultiSeriesLineChartLegend(mainDiv, columnsInfo, colorRange) {
  var z = d3.scaleOrdinal()
    .range(colorRange);
  var mainDivName = mainDiv.substr(1, mainDiv.length);
  $(mainDiv).before("<div id='Legend_" + mainDivName + "' class='pmd-card-body' style='margin-left:20px; margin-top:0; margin-bottom:0;'></div>");
  var keys = Object.keys(columnsInfo);
  keys.forEach(function (d) {
    var cloloCode = z(d);
    $("#Legend_" + mainDivName).append("<span class='team-graph team1' style='display: inline-block; margin-right:10px;'>\
                <span style='background:" + cloloCode + ";width: 10px;height: 10px;display: inline-block;vertical-align: middle;'>&nbsp;</span>\
                <span style='padding-top: 0;font-family:Source Sans Pro, sans-serif;font-size: 13px;display: inline;'>" + columnsInfo[d] + " </span>\
            </span>");
  });

}

function drawmultiSeriesLineChartCharts(config) {
  var data = config.data;
  var columnsInfo = config.columnsInfo;
  var xAxis = config.xAxis;
  var yAxis = config.yAxis;
  var colorRange = config.colorRange;
  var mainDiv = config.mainDiv;
  var mainDivName = mainDiv.substr(1, mainDiv.length);
  var label = config.label;
  var requireCircle = config.requireCircle || false;
  var requireLegend = config.requireLegend;
  var imageData = config.imageData;
  d3.select(mainDiv).append("svg").attr("width", $(mainDiv).width()).attr("height", $(mainDiv).height() * 0.9);
  var svg = d3.select(mainDiv + " svg"),
    margin = {
      top: 40,
      right: 20,
      bottom: 80,
      left: 50
    },
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom;
  var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  var middleLineg = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");


  if (requireLegend != null && requireLegend != undefined && requireLegend != false) {
    $("#Legend_" + mainDivName).remove();
    createmultiSeriesLineChartLegend(mainDiv, columnsInfo, colorRange);
  }
  var parseTime = d3.timeParse("%d-%b-%y");
  data.forEach(function (d) {
    d.startDate = parseTime(d.startDate);
  });

  var x = d3.scaleTime().range([0, width]),
    y = d3.scaleLinear().range([height, 0]),
    yBatch = d3.scaleLinear().range([height, 0]),
    z = d3.scaleOrdinal()
    .range(colorRange);
  var line = d3.line()
    .x(function (d) {
      return x(d[xAxis]);
    })
    .y(function (d) {
      return y(d[yAxis]);
    });

  var lineBatch = d3.line()
    .x(function (d) {
      return x(d[xAxis]);
    })
    .y(function (d) {
      return yBatch(d["productBSales"]);
    });
  var columns = Object.keys(columnsInfo);
  var groupData = columns.map(function (id) {
    return {
      id: id,
      values: data.filter(function (d, i) {
        //CBT:remove last blank or value is 0 data to show only that much of line
        if ((d["startDate"] != 0 && d["startDate"] != null && d["startDate"] != undefined)) return d;
      }).map(function (d, i) {
        var tempObj = {};
        tempObj[xAxis] = d[xAxis];
        tempObj[yAxis] = d[id];
        tempObj["productBSales"] = d["productBSales"];
        tempObj["data"] = d;
        return tempObj;
      })
    };
  });


  x.domain(d3.extent(data, function (d) {
    return d[xAxis];
  }));

  y.domain([
    d3.min(groupData, function (c) {
      return d3.min(c.values, function (d) {
        return d[yAxis];
      });
    }),
    d3.max(groupData, function (c) {
      return d3.max(c.values, function (d) {
        return d[yAxis];
      });
    })
  ]);
  yBatch.domain([
    d3.min(groupData, function (c) {
      return d3.min(c.values, function (d) {
        return d["productBSales"];
      });
    }),
    d3.max(groupData, function (c) {
      return d3.max(c.values, function (d) {
        return d["productBSales"];
      });
    })
  ]);
  z.domain(groupData.map(function (c) {
    return c.id;
  }));

  var middleLine = middleLineg.append("path")
    .attr("class", "mouse-line")
    .style("stroke-width", "3px")
    .style("opacity", function () {
      return 0;
    })
    .style("stroke", "black");
  var ele = g.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).tickFormat(d3.timeFormat("%d-%b")).ticks(31));

  ele.selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-65)");

  ele.append("text")
    .attr("x", width / 2)
    .attr("y", margin.bottom * 0.9)
    .attr("dx", "0.32em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .attr("text-anchor", "start")
    .text(label.xAxis);


  g.append("g")
    .attr("class", "axis axis--y")
    .call(d3.axisLeft(y))
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .text(label.yAxis);

  g.append("g")
    .attr("class", "axis axis--y")
    .attr("transform", "translate(" + width + ",0)")
    .call(d3.axisLeft(yBatch))
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", "0.71em")
    .attr("fill", "#000")
    .attr("font-weight", "bold")
    .text("Product B Sales (Lacks)");


  var city = g.selectAll(".city")
    .data(groupData)
    .enter().append("g")
    .attr("class", "city");

  city.append("path")
    .attr("class", "line")
    .style("stroke", function (d) {
      return 'solid';
    })
    .attr("d", function (d) {
      if (d.id == "productASales") {
        return line(d.values);
      } else {
        return lineBatch(d.values);
      }
    })
    .style("stroke", function (d) {
      return z(d.id);
    }).style("fill", "none").style("stroke-width", "3px");


  var lines = document.getElementsByClassName("line");
  var mousePerLine = middleLineg.selectAll(".mousePerLine")
    .data(groupData)
    .enter().append("g")
    .attr("class", "mousePerLine");

  var circleRadius = 4;
  var keys = Object.keys(columnsInfo);

  var circles = mousePerLine.append("circle")
    .attr("class", "mousePerLineCircle")
    .attr("r", circleRadius)
    .attr("fill", function (d) {
      if (d.id == "productASales") {
        return "red";
      } else {
        return "green";
      }
    })
    .attr("fill-opacity", function (d) {
      return 1;
    });


  var element = g.append("g")
    .selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function (d) {
      return "translate(" + x(d[xAxis]) + ",0)";
    });

  var circlesAll = element.selectAll("circle")
    .data(function (d) {
      return keys.map(function (key) {
        return {
          key: key,
          value: d[key]
        };
      });
    })
    .enter().append("circle")
    .attr("cx", function (d) {
      return 0;
    })
    .attr("cy", function (d) {
      if (d.key == "productASales") {
        return y(d.value);
      } else {
        return yBatch(d.value);
      }

    })
    .attr("r", circleRadius)
    .attr("fill", function (d) {
      if (d.key == "productASales") {
        return "red";
      } else {
        return "green";
      }
    })
    .attr("fill-opacity", function (d) {
      return 1;
    })


  var prevSelectedDateMultiSeries = "";
  var toolTipDate = "";
  middleLineg.append("svg:rect")
    .attr("width", width)
    .attr("height", height)
    .attr("fill", "none")
    .attr("pointer-events", "all")
    .on("mouseout", function () {

      d3.selectAll(".mousePerLineCircle")
        .style("opacity", "0");

      d3.select("#circletooltip_" + mainDivName)
        .transition()
        .style("opacity", function () {
          return 0;
        });

      d3.select("#circletooltipbottom_" + mainDivName)
        .transition()
        .style("opacity", function () {
          return 0;
        });
    })
    .on("mouseover", function () {
      d3.select(".mouse-line")
        .style("opacity", "1");

      d3.selectAll(".mousePerLineCircle")
        .style("opacity", "1");
      var fadeInSpeed = 120;
      d3.select("#circletooltipdate_" + mainDivName)
        .transition()
        .duration(fadeInSpeed)
        .style("opacity", function () {
          return 1;
        });

      d3.select("#circletooltip_" + mainDivName)
        .transition()
        .duration(fadeInSpeed)
        .style("opacity", function () {
          return 1;
        });
      d3.select("#circletooltipbottom_" + mainDivName)
        .transition()
        .duration(fadeInSpeed)
        .style("opacity", function () {
          return 1;
        });
    })
    .on("mousemove", function () {
      var mouse = d3.mouse(this);
      d3.select(".mouse-line")
        .attr("d", function () {
          var d = "M" + mouse[0] + "," + height + " " + mouse[0] + "," + 0;
          return d;
        });

      d3.selectAll(".mousePerLine")
        .attr("transform", function (d, i) {

          var xData = x.invert(mouse[0]);
          if (i == 0) {
            if (prevSelectedDateMultiSeries != d3.timeFormat("%Y-%m-%d")(xData)) {
              prevSelectedDateMultiSeries = d3.timeFormat("%Y-%m-%d")(xData);
              toolTipDate = d3.timeFormat("%d-%b-%Y")(xData);
              //CBT:show tips
            }
          }
          var bisect = d3.bisector(function (d) {
            return d.startDate;
          }).right;

          var idx = bisect(d.values, xData);
          var beginning = 0;
          var end = lines[i].getTotalLength();
          var target = null;

          while (true) {
            target = Math.floor((beginning + end) / 2);
            pos = lines[i].getPointAtLength(target);
            if ((target == end || target == beginning) && pos.x != mouse[0]) {
              break;
            }
            if (pos.x > mouse[0]) {
              end = target;
            } else if (pos.x < mouse[0]) {
              beginning = target;
            } else {
              break;
            }
            d3.select("#circletooltipdate_" + mainDivName).attr("transform", function (d) {
              var mouseCoords = mouse;
              var xCo = 0;
              if (mouseCoords[0] + 10 >= width * 0.80) {
                xCo = mouseCoords[0] - (parseFloat(d3.selectAll("#circletooltipRectdate_" + mainDivName)
                  .attr("width")) + 10);
              } else {
                xCo = mouseCoords[0] + 10;
              }
              var x = xCo;
              var yCo = 0;
              if (mouseCoords[0] + 10 >= width * 0.80) {
                yCo = mouseCoords[1] + 10;
              } else {
                yCo = mouseCoords[1];
              }
              var x = xCo;
              var y = yCo;
              return "translate(" + x + "," + -30 + ")";
            });

            d3.select("#circletooltip_" + mainDivName).attr("transform", function (d) {
              var mouseCoords = mouse;
              var xCo = 0;
              if (mouseCoords[0] + 10 >= width * 0.80) {
                xCo = mouseCoords[0] - (parseFloat(d3.selectAll("#circletooltipRect_" + mainDivName)
                  .attr("width")) + 10);
              } else {
                xCo = mouseCoords[0] + 10;
              }
              var x = xCo;
              var yCo = 0;
              if (mouseCoords[0] + 10 >= width * 0.80) {
                yCo = mouseCoords[1] + 10;
              } else {
                yCo = mouseCoords[1];
              }
              var x = xCo;
              var y = yCo;
              return "translate(" + x + "," + y + ")";
            });

            d3.select("#circletooltipbottom_" + mainDivName).attr("transform", function (d) {
              var mouseCoords = mouse;
              var xCo = 0;
              if (mouseCoords[0] + 10 >= width * 0.80) {
                xCo = mouseCoords[0] - (parseFloat(d3.selectAll("#circletooltipRectbottom_" + mainDivName)
                  .attr("width")) + 10);
              } else {
                xCo = mouseCoords[0] + 10;
              }
              var x = xCo;
              var yCo = 0;
              if (mouseCoords[0] + 10 >= width * 0.80) {
                yCo = mouseCoords[1] + 70;
              } else {
                yCo = mouseCoords[1] + 60;
              }
              var x = xCo;
              var y = yCo;
              return "translate(" + x + "," + y + ")";
            });
          }


          var fadeInSpeed = 120;
          var yPos = 0;
          var fontSize = "12px";
          d3.selectAll("#circletooltipTextdate_" + mainDivName).text("");
          d3.selectAll("#circletooltipTextdate_" + mainDivName).append("tspan").attr("x", 0).attr("y", 2).attr("dy", "1.9em").text(toolTipDate)
            .attr("font-size", fontSize);
          var dims = helpers.getDimensions("circletooltipTextdate_" + mainDivName);
          d3.selectAll("#circletooltipTextdate_" + mainDivName + " tspan")
            .attr("x", dims.w + 4);

          d3.selectAll("#circletooltipRectdate_" + mainDivName)
            .attr("width", dims.w + 10)
            .attr("height", dims.h + 20);

          var columns = Object.keys(columnsInfo);
          var tooltipsText = yBatch.invert(pos.y);

          if (columns[0] != d["id"]) {
            var tooltipRecords = d.values.filter(function (d1) {
              var startDateD = new Date(d3.timeFormat("%Y-%b-%d 00:00:00")(new Date(d1.startDate)));
              var endDateD = new Date(d3.timeFormat("%Y-%b-%d 23:59:59")(new Date(d1.startDate)));
              var selectedDated = new Date(d3.timeFormat("%Y-%b-%d 00:00:00")(new Date(xData)));
              if (selectedDated.getTime() >= startDateD.getTime() && selectedDated.getTime() <= endDateD.getTime()) {
                return d1.data
              }
            });
            if (tooltipRecords.length != 0) {
              d3.selectAll("#circletooltipText_" + mainDivName).text("");
              d3.selectAll("#circletooltipText_" + mainDivName).append("tspan").attr("x", 0).attr("y", 2).attr("dy", "1.9em").text((tooltipRecords[0].data.productBSales))
                .attr("font-size", fontSize);
              var dims = helpers.getDimensions("circletooltipText_" + mainDivName);
              d3.selectAll("#circletooltipText_" + mainDivName + " tspan")
                .attr("x", dims.w + 4);

              d3.selectAll("#circletooltipRect_" + mainDivName)
                .attr("width", dims.w + 10)
                .attr("height", dims.h + 20);
            }


          } else {
            var tooltipRecords = d.values.filter(function (d1) {
              var startDateD = new Date(d3.timeFormat("%Y-%b-%d 00:00:00")(new Date(d1.startDate)));
              var endDateD = new Date(d3.timeFormat("%Y-%b-%d 23:59:59")(new Date(d1.startDate)));
              var selectedDated = new Date(d3.timeFormat("%Y-%b-%d 00:00:00")(new Date(xData)));
              if (selectedDated.getTime() >= startDateD.getTime() && selectedDated.getTime() <= endDateD.getTime()) {
                return d1.data
              }
            });
            if (tooltipRecords.length != 0) {
              d3.selectAll("#circletooltipTextbottom_" + mainDivName).text("");
              d3.selectAll("#circletooltipTextbottom_" + mainDivName).append("tspan").attr("x", 0).attr("y", 2).attr("dy", "1.9em").text((tooltipRecords[0].data.productASales))
                .attr("font-size", fontSize);
              var dims = helpers.getDimensions("circletooltipTextbottom_" + mainDivName);
              d3.selectAll("#circletooltipTextbottom_" + mainDivName + " tspan")
                .attr("x", dims.w + 4);

              d3.selectAll("#circletooltipRectbottom_" + mainDivName)
                .attr("width", dims.w + 10)
                .attr("height", dims.h + 20);
            }
          }
          return "translate(" + mouse[0] + "," + pos.y + ")";
        });
    });


  var circleTooltipg = g.append("g")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .attr("text-anchor", "end")
    .attr("id", "circletooltip_" + mainDivName)
    .attr("style", "opacity:0")
    .attr("transform", "translate(-500,-500)");

  circleTooltipg.append("rect")
    .attr("id", "circletooltipRect_" + mainDivName)
    .attr("x", 0)
    .attr("width", 0)
    .attr("height", 0)
    .attr("opacity", 0.71)
    .style("fill", "green");

  circleTooltipg
    .append("text")
    .attr("id", "circletooltipText_" + mainDivName)
    .attr("x", 30)
    .attr("y", 15)
    .attr("fill", function () {
      return "#fff"
    })
    .style("font-size", function (d) {
      return 10;
    })
    .style("font-family", function (d) {
      return "arial";
    })
    .text(function (d, i) {
      return "";
    });

  var circleTooltipBottomg = g.append("g")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .attr("text-anchor", "end")
    .attr("id", "circletooltipbottom_" + mainDivName)
    .attr("style", "opacity:0")
    .attr("transform", "translate(-500,-500)");

  circleTooltipBottomg.append("rect")
    .attr("id", "circletooltipRectbottom_" + mainDivName)
    .attr("x", 0)
    .attr("width", 0)
    .attr("height", 0)
    .attr("opacity", 0.71)
    .style("fill", "red");

  circleTooltipBottomg
    .append("text")
    .attr("id", "circletooltipTextbottom_" + mainDivName)
    .attr("x", 30)
    .attr("y", 15)
    .attr("fill", function () {
      return "#fff"
    })
    .style("font-size", function (d) {
      return 10;
    })
    .style("font-family", function (d) {
      return "arial";
    })
    .text(function (d, i) {
      return "";
    });

  var circleTooltipDateg = g.append("g")
    .attr("font-family", "sans-serif")
    .attr("font-size", 10)
    .attr("text-anchor", "end")
    .attr("id", "circletooltipdate_" + mainDivName)
    .attr("style", "opacity:0")
    .attr("transform", "translate(-500,-500)");

  circleTooltipDateg.append("rect")
    .attr("id", "circletooltipRectdate_" + mainDivName)
    .attr("x", 0)
    .attr("width", 120)
    .attr("height", 80)
    .attr("opacity", 0.71)
    .style("fill", "#000000");

  circleTooltipDateg
    .append("text")
    .attr("id", "circletooltipTextdate_" + mainDivName)
    .attr("x", 30)
    .attr("y", 15)
    .attr("fill", function () {
      return "#fff"
    })
    .style("font-size", function (d) {
      return 10;
    })
    .style("font-family", function (d) {
      return "arial";
    })
    .text(function (d, i) {
      return "Hello";
    });
}


var helpers = {
  getDimensions: function (id) {
    var el = document.getElementById(id);
    var w = 0,
      h = 0;
    if (el) {
      var dimensions = el.getBBox();
      w = dimensions.width;
      h = dimensions.height;
    } else {
      console.log("error: getDimensions() " + id + " not found.");
    }
    return {
      w: w,
      h: h
    };
  }
};

## thumbnail.png

      
    Raw
  

              thumbnail.png
	var data = [{
	"startDate": "05-Sep-17",
	"productASales": 0,
	"userBatchId": "S-BFE1182-B2",
	"productBSales": 14.167
	},
	{
	"startDate": "06-Sep-17",
	"productASales": 23.167,
	"userBatchId": "S-BFE1362-B3",
	"productBSales": 27.167
	},
	{
	"startDate": "07-Sep-17",
	"productASales": 23.333,
	"userBatchId": "S-BFE1362-B5",
	"productBSales": 28.167
	},
	{
	"startDate": "08-Sep-17",
	"productASales": 30.5,
	"userBatchId": "S-BFE1362-B7",
	"productBSales": 27.167
	},
	{
	"startDate": "09-Sep-17",
	"productASales": 168.667,
	"userBatchId": "S-BFE1144-B1",
	"productBSales": 56
	},
	{
	"startDate": "10-Sep-17",
	"productASales": 92.667,
	"userBatchId": "S-BFE1362-B9",
	"productBSales": 46
	},
	{
	"startDate": "11-Sep-17",
	"productASales": 6.5,
	"userBatchId": "S-BFE1049-B1",
	"productBSales": 9.167
	},
	{
	"startDate": "12-Sep-17",
	"productASales": 1.5,
	"userBatchId": "S-BFE1049-B2",
	"productBSales": 9.167
	},
	{
	"startDate": "14-Sep-17",
	"productASales": 0,
	"userBatchId": "S-BFE1049-B3",
	"productBSales": 9.167
	},
	{
	"startDate": "15-Sep-17",
	"productASales": 0,
	"userBatchId": "S-BFE1049-B5",
	"productBSales": 23
	},
	{
	"startDate": "16-Sep-17",
	"productASales": 0,
	"userBatchId": "O-BFE1182-B1",
	"productBSales": 53
	},
	{
	"startDate": "18-Sep-17",
	"productASales": 248.667,
	"userBatchId": "O-BFE1927-B1",
	"productBSales": 39
	},
	{
	"startDate": "20-Sep-17",
	"productASales": 264.667,
	"userBatchId": "O-BFE1927-B2",
	"productBSales": 18.167
	},
	{
	"startDate": "21-Sep-17",
	"productASales": 237,
	"userBatchId": "O-BFE1927-B3",
	"productBSales": 18.167
	},
	{
	"startDate": "22-Sep-17",
	"productASales": 0,
	"userBatchId": "O-BFE1183-B1",
	"productBSales": 14.167
	},
	{
	"startDate": "23-Sep-17",
	"productASales": 207.333,
	"userBatchId": "O-BFE1362-B7",
	"productBSales": 69
	},
	{
	"startDate": "25-Sep-17",
	"productASales": 0,
	"userBatchId": "O-BFE1182-B2",
	"productBSales": 30
	},
	{
	"startDate": "26-Sep-17",
	"productASales": 141.5,
	"userBatchId": "O-BFE1049-B1",
	"productBSales": 9.167
	},
	{
	"startDate": "27-Sep-17",
	"productASales": 0,
	"userBatchId": "O-BFE1183-B2",
	"productBSales": 32
	},
	{
	"startDate": "28-Sep-17",
	"productASales": 338.5,
	"userBatchId": "O-BFE1047-B1",
	"productBSales": 12.167
	},
	{
	"startDate": "29-Sep-17",
	"productASales": 180.667,
	"userBatchId": "O-BFE1049-B2",
	"productBSales": 22
	},
	{
	"startDate": "30-Sep-17",
	"productASales": 355.833,
	"userBatchId": "O-BFE1047-B2",
	"productBSales": 11.167
	}
	];
	<html>

	<body>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="multiSeriesLineChart1.js"></script>
	<script src="data.js"></script>
	<script>
	window.addEventListener('resize', function (event) {
	$("#chart").width(window.innerWidth * 0.9);
	$("#chart").height(window.innerHeight);
	});
	</script>

	<div id="chart" style="width: 800;height: 500px;">
	</div>
	<a href="https://stackoverflow.com/users/7430694/chandrakant-thakkar" style="position: absolute;top: 87%;left: 77%;" target="_blank">
	<img src="https://stackoverflow.com/users/flair/7430694.png" width="208" height="58" alt="profile for Chandrakant Thakkar at Stack Overflow, Q&A for professional and enthusiast programmers" title="profile for Chandrakant Thakkar at Stack Overflow, Q&A for professional and enthusiast programmers">
	</a>
	<div id="tooltipDiv" style="display:none;background:green;color:white;position: absolute;padding: 3;">
	<div id="batch"></div>
	<div id="product"></div>
	<div id="a1"></div>
	<div id="a2"></div>
	</div>
	<script>
	$("#chart").empty();
	var columnsInfo = {
	"productASales": "Product A Sales",
	"productBSales": "Product B Sales"
	};
	var muliSeriesChartConfig = {
	mainDiv: "#chart",
	colorRange: ["#ff0000", "#008000"],
	data: data,
	columnsInfo: columnsInfo,
	xAxis: "startDate",
	yAxis: "productASales",
	label: {
	xAxis: "Date",
	yAxis: "Product A Sales (Lacks)"
	},
	requireCircle: false,
	requireLegend: true,
	};
	var muliSeriesChart = new multiSeriesLineChart(
	muliSeriesChartConfig);
	</script>
	</body>

	</html>
	MIT License

	Copyright (c) [2017] [Chandrakant Thakkar]

	Permission is hereby granted, free of charge, to any person obtaining a copy
	of this software and associated documentation files (the "Software"), to deal
	in the Software without restriction, including without limitation the rights
	to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
	copies of the Software, and to permit persons to whom the Software is
	furnished to do so, subject to the following conditions:

	The above copyright notice and this permission notice shall be included in all
	copies or substantial portions of the Software.

	THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
	IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
	FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
	AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
	LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
	OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
	SOFTWARE.
	function multiSeriesLineChart(config) {
	drawmultiSeriesLineChartCharts(config);
	}

	function createmultiSeriesLineChartLegend(mainDiv, columnsInfo, colorRange) {
	var z = d3.scaleOrdinal()
	.range(colorRange);
	var mainDivName = mainDiv.substr(1, mainDiv.length);
	$(mainDiv).before("<div id='Legend_" + mainDivName + "' class='pmd-card-body' style='margin-left:20px; margin-top:0; margin-bottom:0;'></div>");
	var keys = Object.keys(columnsInfo);
	keys.forEach(function (d) {
	var cloloCode = z(d);
	$("#Legend_" + mainDivName).append("<span class='team-graph team1' style='display: inline-block; margin-right:10px;'>\
	<span style='background:" + cloloCode + ";width: 10px;height: 10px;display: inline-block;vertical-align: middle;'> </span>\
	<span style='padding-top: 0;font-family:Source Sans Pro, sans-serif;font-size: 13px;display: inline;'>" + columnsInfo[d] + " </span>\
	</span>");
	});

	}

	function drawmultiSeriesLineChartCharts(config) {
	var data = config.data;
	var columnsInfo = config.columnsInfo;
	var xAxis = config.xAxis;
	var yAxis = config.yAxis;
	var colorRange = config.colorRange;
	var mainDiv = config.mainDiv;
	var mainDivName = mainDiv.substr(1, mainDiv.length);
	var label = config.label;
	var requireCircle = config.requireCircle \|\| false;
	var requireLegend = config.requireLegend;
	var imageData = config.imageData;
	d3.select(mainDiv).append("svg").attr("width", $(mainDiv).width()).attr("height", $(mainDiv).height() * 0.9);
	var svg = d3.select(mainDiv + " svg"),
	margin = {
	top: 40,
	right: 20,
	bottom: 80,
	left: 50
	},
	width = svg.attr("width") - margin.left - margin.right,
	height = svg.attr("height") - margin.top - margin.bottom;
	var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
	var middleLineg = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");


	if (requireLegend != null && requireLegend != undefined && requireLegend != false) {
	$("#Legend_" + mainDivName).remove();
	createmultiSeriesLineChartLegend(mainDiv, columnsInfo, colorRange);
	}
	var parseTime = d3.timeParse("%d-%b-%y");
	data.forEach(function (d) {
	d.startDate = parseTime(d.startDate);
	});

	var x = d3.scaleTime().range([0, width]),
	y = d3.scaleLinear().range([height, 0]),
	yBatch = d3.scaleLinear().range([height, 0]),
	z = d3.scaleOrdinal()
	.range(colorRange);
	var line = d3.line()
	.x(function (d) {
	return x(d[xAxis]);
	})
	.y(function (d) {
	return y(d[yAxis]);
	});

	var lineBatch = d3.line()
	.x(function (d) {
	return x(d[xAxis]);
	})
	.y(function (d) {
	return yBatch(d["productBSales"]);
	});
	var columns = Object.keys(columnsInfo);
	var groupData = columns.map(function (id) {
	return {
	id: id,
	values: data.filter(function (d, i) {
	//CBT:remove last blank or value is 0 data to show only that much of line
	if ((d["startDate"] != 0 && d["startDate"] != null && d["startDate"] != undefined)) return d;
	}).map(function (d, i) {
	var tempObj = {};
	tempObj[xAxis] = d[xAxis];
	tempObj[yAxis] = d[id];
	tempObj["productBSales"] = d["productBSales"];
	tempObj["data"] = d;
	return tempObj;
	})
	};
	});


	x.domain(d3.extent(data, function (d) {
	return d[xAxis];
	}));

	y.domain([
	d3.min(groupData, function (c) {
	return d3.min(c.values, function (d) {
	return d[yAxis];
	});
	}),
	d3.max(groupData, function (c) {
	return d3.max(c.values, function (d) {
	return d[yAxis];
	});
	})
	]);
	yBatch.domain([
	d3.min(groupData, function (c) {
	return d3.min(c.values, function (d) {
	return d["productBSales"];
	});
	}),
	d3.max(groupData, function (c) {
	return d3.max(c.values, function (d) {
	return d["productBSales"];
	});
	})
	]);
	z.domain(groupData.map(function (c) {
	return c.id;
	}));

	var middleLine = middleLineg.append("path")
	.attr("class", "mouse-line")
	.style("stroke-width", "3px")
	.style("opacity", function () {
	return 0;
	})
	.style("stroke", "black");
	var ele = g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x).tickFormat(d3.timeFormat("%d-%b")).ticks(31));

	ele.selectAll("text")
	.style("text-anchor", "end")
	.attr("dx", "-.8em")
	.attr("dy", ".15em")
	.attr("transform", "rotate(-65)");

	ele.append("text")
	.attr("x", width / 2)
	.attr("y", margin.bottom * 0.9)
	.attr("dx", "0.32em")
	.attr("fill", "#000")
	.attr("font-weight", "bold")
	.attr("text-anchor", "start")
	.text(label.xAxis);



	g.append("g")
	.attr("class", "axis axis--y")
	.call(d3.axisLeft(y))
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("fill", "#000")
	.attr("font-weight", "bold")
	.text(label.yAxis);

	g.append("g")
	.attr("class", "axis axis--y")
	.attr("transform", "translate(" + width + ",0)")
	.call(d3.axisLeft(yBatch))
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", "0.71em")
	.attr("fill", "#000")
	.attr("font-weight", "bold")
	.text("Product B Sales (Lacks)");


	var city = g.selectAll(".city")
	.data(groupData)
	.enter().append("g")
	.attr("class", "city");

	city.append("path")
	.attr("class", "line")
	.style("stroke", function (d) {
	return 'solid';
	})
	.attr("d", function (d) {
	if (d.id == "productASales") {
	return line(d.values);
	} else {
	return lineBatch(d.values);
	}
	})
	.style("stroke", function (d) {
	return z(d.id);
	}).style("fill", "none").style("stroke-width", "3px");


	var lines = document.getElementsByClassName("line");
	var mousePerLine = middleLineg.selectAll(".mousePerLine")
	.data(groupData)
	.enter().append("g")
	.attr("class", "mousePerLine");

	var circleRadius = 4;
	var keys = Object.keys(columnsInfo);

	var circles = mousePerLine.append("circle")
	.attr("class", "mousePerLineCircle")
	.attr("r", circleRadius)
	.attr("fill", function (d) {
	if (d.id == "productASales") {
	return "red";
	} else {
	return "green";
	}
	})
	.attr("fill-opacity", function (d) {
	return 1;
	});


	var element = g.append("g")
	.selectAll("g")
	.data(data)
	.enter().append("g")
	.attr("transform", function (d) {
	return "translate(" + x(d[xAxis]) + ",0)";
	});

	var circlesAll = element.selectAll("circle")
	.data(function (d) {
	return keys.map(function (key) {
	return {
	key: key,
	value: d[key]
	};
	});
	})
	.enter().append("circle")
	.attr("cx", function (d) {
	return 0;
	})
	.attr("cy", function (d) {
	if (d.key == "productASales") {
	return y(d.value);
	} else {
	return yBatch(d.value);
	}

	})
	.attr("r", circleRadius)
	.attr("fill", function (d) {
	if (d.key == "productASales") {
	return "red";
	} else {
	return "green";
	}
	})
	.attr("fill-opacity", function (d) {
	return 1;
	})


	var prevSelectedDateMultiSeries = "";
	var toolTipDate = "";
	middleLineg.append("svg:rect")
	.attr("width", width)
	.attr("height", height)
	.attr("fill", "none")
	.attr("pointer-events", "all")
	.on("mouseout", function () {

	d3.selectAll(".mousePerLineCircle")
	.style("opacity", "0");

	d3.select("#circletooltip_" + mainDivName)
	.transition()
	.style("opacity", function () {
	return 0;
	});

	d3.select("#circletooltipbottom_" + mainDivName)
	.transition()
	.style("opacity", function () {
	return 0;
	});
	})
	.on("mouseover", function () {
	d3.select(".mouse-line")
	.style("opacity", "1");

	d3.selectAll(".mousePerLineCircle")
	.style("opacity", "1");
	var fadeInSpeed = 120;
	d3.select("#circletooltipdate_" + mainDivName)
	.transition()
	.duration(fadeInSpeed)
	.style("opacity", function () {
	return 1;
	});

	d3.select("#circletooltip_" + mainDivName)
	.transition()
	.duration(fadeInSpeed)
	.style("opacity", function () {
	return 1;
	});
	d3.select("#circletooltipbottom_" + mainDivName)
	.transition()
	.duration(fadeInSpeed)
	.style("opacity", function () {
	return 1;
	});
	})
	.on("mousemove", function () {
	var mouse = d3.mouse(this);
	d3.select(".mouse-line")
	.attr("d", function () {
	var d = "M" + mouse[0] + "," + height + " " + mouse[0] + "," + 0;
	return d;
	});

	d3.selectAll(".mousePerLine")
	.attr("transform", function (d, i) {

	var xData = x.invert(mouse[0]);
	if (i == 0) {
	if (prevSelectedDateMultiSeries != d3.timeFormat("%Y-%m-%d")(xData)) {
	prevSelectedDateMultiSeries = d3.timeFormat("%Y-%m-%d")(xData);
	toolTipDate = d3.timeFormat("%d-%b-%Y")(xData);
	//CBT:show tips
	}
	}
	var bisect = d3.bisector(function (d) {
	return d.startDate;
	}).right;

	var idx = bisect(d.values, xData);
	var beginning = 0;
	var end = lines[i].getTotalLength();
	var target = null;

	while (true) {
	target = Math.floor((beginning + end) / 2);
	pos = lines[i].getPointAtLength(target);
	if ((target == end \|\| target == beginning) && pos.x != mouse[0]) {
	break;
	}
	if (pos.x > mouse[0]) {
	end = target;
	} else if (pos.x < mouse[0]) {
	beginning = target;
	} else {
	break;
	}
	d3.select("#circletooltipdate_" + mainDivName).attr("transform", function (d) {
	var mouseCoords = mouse;
	var xCo = 0;
	if (mouseCoords[0] + 10 >= width * 0.80) {
	xCo = mouseCoords[0] - (parseFloat(d3.selectAll("#circletooltipRectdate_" + mainDivName)
	.attr("width")) + 10);
	} else {
	xCo = mouseCoords[0] + 10;
	}
	var x = xCo;
	var yCo = 0;
	if (mouseCoords[0] + 10 >= width * 0.80) {
	yCo = mouseCoords[1] + 10;
	} else {
	yCo = mouseCoords[1];
	}
	var x = xCo;
	var y = yCo;
	return "translate(" + x + "," + -30 + ")";
	});

	d3.select("#circletooltip_" + mainDivName).attr("transform", function (d) {
	var mouseCoords = mouse;
	var xCo = 0;
	if (mouseCoords[0] + 10 >= width * 0.80) {
	xCo = mouseCoords[0] - (parseFloat(d3.selectAll("#circletooltipRect_" + mainDivName)
	.attr("width")) + 10);
	} else {
	xCo = mouseCoords[0] + 10;
	}
	var x = xCo;
	var yCo = 0;
	if (mouseCoords[0] + 10 >= width * 0.80) {
	yCo = mouseCoords[1] + 10;
	} else {
	yCo = mouseCoords[1];
	}
	var x = xCo;
	var y = yCo;
	return "translate(" + x + "," + y + ")";
	});

	d3.select("#circletooltipbottom_" + mainDivName).attr("transform", function (d) {
	var mouseCoords = mouse;
	var xCo = 0;
	if (mouseCoords[0] + 10 >= width * 0.80) {
	xCo = mouseCoords[0] - (parseFloat(d3.selectAll("#circletooltipRectbottom_" + mainDivName)
	.attr("width")) + 10);
	} else {
	xCo = mouseCoords[0] + 10;
	}
	var x = xCo;
	var yCo = 0;
	if (mouseCoords[0] + 10 >= width * 0.80) {
	yCo = mouseCoords[1] + 70;
	} else {
	yCo = mouseCoords[1] + 60;
	}
	var x = xCo;
	var y = yCo;
	return "translate(" + x + "," + y + ")";
	});
	}


	var fadeInSpeed = 120;
	var yPos = 0;
	var fontSize = "12px";
	d3.selectAll("#circletooltipTextdate_" + mainDivName).text("");
	d3.selectAll("#circletooltipTextdate_" + mainDivName).append("tspan").attr("x", 0).attr("y", 2).attr("dy", "1.9em").text(toolTipDate)
	.attr("font-size", fontSize);
	var dims = helpers.getDimensions("circletooltipTextdate_" + mainDivName);
	d3.selectAll("#circletooltipTextdate_" + mainDivName + " tspan")
	.attr("x", dims.w + 4);

	d3.selectAll("#circletooltipRectdate_" + mainDivName)
	.attr("width", dims.w + 10)
	.attr("height", dims.h + 20);

	var columns = Object.keys(columnsInfo);
	var tooltipsText = yBatch.invert(pos.y);

	if (columns[0] != d["id"]) {
	var tooltipRecords = d.values.filter(function (d1) {
	var startDateD = new Date(d3.timeFormat("%Y-%b-%d 00:00:00")(new Date(d1.startDate)));
	var endDateD = new Date(d3.timeFormat("%Y-%b-%d 23:59:59")(new Date(d1.startDate)));
	var selectedDated = new Date(d3.timeFormat("%Y-%b-%d 00:00:00")(new Date(xData)));
	if (selectedDated.getTime() >= startDateD.getTime() && selectedDated.getTime() <= endDateD.getTime()) {
	return d1.data
	}
	});
	if (tooltipRecords.length != 0) {
	d3.selectAll("#circletooltipText_" + mainDivName).text("");
	d3.selectAll("#circletooltipText_" + mainDivName).append("tspan").attr("x", 0).attr("y", 2).attr("dy", "1.9em").text((tooltipRecords[0].data.productBSales))
	.attr("font-size", fontSize);
	var dims = helpers.getDimensions("circletooltipText_" + mainDivName);
	d3.selectAll("#circletooltipText_" + mainDivName + " tspan")
	.attr("x", dims.w + 4);

	d3.selectAll("#circletooltipRect_" + mainDivName)
	.attr("width", dims.w + 10)
	.attr("height", dims.h + 20);
	}


	} else {
	var tooltipRecords = d.values.filter(function (d1) {
	var startDateD = new Date(d3.timeFormat("%Y-%b-%d 00:00:00")(new Date(d1.startDate)));
	var endDateD = new Date(d3.timeFormat("%Y-%b-%d 23:59:59")(new Date(d1.startDate)));
	var selectedDated = new Date(d3.timeFormat("%Y-%b-%d 00:00:00")(new Date(xData)));
	if (selectedDated.getTime() >= startDateD.getTime() && selectedDated.getTime() <= endDateD.getTime()) {
	return d1.data
	}
	});
	if (tooltipRecords.length != 0) {
	d3.selectAll("#circletooltipTextbottom_" + mainDivName).text("");
	d3.selectAll("#circletooltipTextbottom_" + mainDivName).append("tspan").attr("x", 0).attr("y", 2).attr("dy", "1.9em").text((tooltipRecords[0].data.productASales))
	.attr("font-size", fontSize);
	var dims = helpers.getDimensions("circletooltipTextbottom_" + mainDivName);
	d3.selectAll("#circletooltipTextbottom_" + mainDivName + " tspan")
	.attr("x", dims.w + 4);

	d3.selectAll("#circletooltipRectbottom_" + mainDivName)
	.attr("width", dims.w + 10)
	.attr("height", dims.h + 20);
	}
	}
	return "translate(" + mouse[0] + "," + pos.y + ")";
	});
	});



	var circleTooltipg = g.append("g")
	.attr("font-family", "sans-serif")
	.attr("font-size", 10)
	.attr("text-anchor", "end")
	.attr("id", "circletooltip_" + mainDivName)
	.attr("style", "opacity:0")
	.attr("transform", "translate(-500,-500)");

	circleTooltipg.append("rect")
	.attr("id", "circletooltipRect_" + mainDivName)
	.attr("x", 0)
	.attr("width", 0)
	.attr("height", 0)
	.attr("opacity", 0.71)
	.style("fill", "green");

	circleTooltipg
	.append("text")
	.attr("id", "circletooltipText_" + mainDivName)
	.attr("x", 30)
	.attr("y", 15)
	.attr("fill", function () {
	return "#fff"
	})
	.style("font-size", function (d) {
	return 10;
	})
	.style("font-family", function (d) {
	return "arial";
	})
	.text(function (d, i) {
	return "";
	});

	var circleTooltipBottomg = g.append("g")
	.attr("font-family", "sans-serif")
	.attr("font-size", 10)
	.attr("text-anchor", "end")
	.attr("id", "circletooltipbottom_" + mainDivName)
	.attr("style", "opacity:0")
	.attr("transform", "translate(-500,-500)");

	circleTooltipBottomg.append("rect")
	.attr("id", "circletooltipRectbottom_" + mainDivName)
	.attr("x", 0)
	.attr("width", 0)
	.attr("height", 0)
	.attr("opacity", 0.71)
	.style("fill", "red");

	circleTooltipBottomg
	.append("text")
	.attr("id", "circletooltipTextbottom_" + mainDivName)
	.attr("x", 30)
	.attr("y", 15)
	.attr("fill", function () {
	return "#fff"
	})
	.style("font-size", function (d) {
	return 10;
	})
	.style("font-family", function (d) {
	return "arial";
	})
	.text(function (d, i) {
	return "";
	});

	var circleTooltipDateg = g.append("g")
	.attr("font-family", "sans-serif")
	.attr("font-size", 10)
	.attr("text-anchor", "end")
	.attr("id", "circletooltipdate_" + mainDivName)
	.attr("style", "opacity:0")
	.attr("transform", "translate(-500,-500)");

	circleTooltipDateg.append("rect")
	.attr("id", "circletooltipRectdate_" + mainDivName)
	.attr("x", 0)
	.attr("width", 120)
	.attr("height", 80)
	.attr("opacity", 0.71)
	.style("fill", "#000000");

	circleTooltipDateg
	.append("text")
	.attr("id", "circletooltipTextdate_" + mainDivName)
	.attr("x", 30)
	.attr("y", 15)
	.attr("fill", function () {
	return "#fff"
	})
	.style("font-size", function (d) {
	return 10;
	})
	.style("font-family", function (d) {
	return "arial";
	})
	.text(function (d, i) {
	return "Hello";
	});
	}





	var helpers = {
	getDimensions: function (id) {
	var el = document.getElementById(id);
	var w = 0,
	h = 0;
	if (el) {
	var dimensions = el.getBBox();
	w = dimensions.width;
	h = dimensions.height;
	} else {
	console.log("error: getDimensions() " + id + " not found.");
	}
	return {
	w: w,
	h: h
	};
	}
	};