Multi Line graph tooltip in d3 giving error

[Vaibhav Kumar]

I have a multi line graph and i want to have a tool tip on it so that as i hover my mouse over the line it shows the point on x and y axis.

I have my data somewhere in the below form and i'm refrencing the mouse event part from somewhere here

I have my data in the below format and i'm passing it as object in angular between component

{storeid: "", peoplesum: 137.14285714285714, date: "2018-06-02"}
{storeid: "", peoplesum: 139.28571428571428, date: "2018-06-03"}
{storeid: "", peoplesum: 123, date: "2018-06-04"}
{storeid: "", peoplesum: 144, date: "2018-06-05"}
{storeid: "", peoplesum: 150, date: "2018-06-06"}
{storeid: "", peoplesum: 154.28571428571428, date: "2018-06-07"}
{storeid: "", peoplesum: 159.85714285714286, date: "2018-06-08"}
{storeid: "", peoplesum: 145.71428571428572, date: "2018-06-09"}
{storeid: "", peoplesum: 129.42857142857142, date: "2018-06-10"}
{storeid: "", peoplesum: 147, date: "2018-06-11"}
{storeid: "", peoplesum: 123, date: "2018-06-12"}

Code

import { Component, OnInit, Input } from '@angular/core';

import * as d3 from "d3"
import * as d3Scale from 'd3-scale';
import * as d3Shape from 'd3-shape';
import * as d3Array from 'd3-array';
import * as d3Axis from 'd3-axis';

import {timeParse} from "d3-time-format";


@Component({
  selector: 'app-d3graph',
  template: `
    <h2>{{subtitle}}</h2>
  `
})
export class D3graphComponent implements OnInit {
  @Input()  storeIntraffic: string;
  @Input() dateForD3: string;
  @Input() peopleInSumStr: string;

  title: string = 'D3.js with Angular 2!';
  subtitle: string = 'Line Chart';
  peopleInSumArr: any[];
  private margin = {top: 20, right: 20, bottom: 30, left: 50};
  private width: number;
  private height: number;
  private x: any;
  private y: any;
  private svg: any;
  private priceline: any;
  private line: d3Shape.Line<[number, number]>;
  d3Data: any;
  dashboard_date: any;
  myArray: any[];
  groupName: string;
  data: any;
  constructor() {
    this.margin = { top: 30, right: 20, bottom: 70, left: 50 },
    this.width = 1300 - this.margin.left - this.margin.right,
    this.height = 800 - this.margin.top - this.margin.bottom;
  }

  ngOnInit() { }
  ngAfterViewChecked() {
    if (this.storeIntraffic !== undefined && typeof this.storeIntraffic === 'string') {

        this.data = JSON.parse(this.peopleInSumStr);
        this.peopleInSumArr = JSON.parse(this.peopleInSumStr);
        this.dashboard_date = this.dateForD3;
    //   this.dashboard_date = this.dateForD3;
    //   console.log('d3 this.peopleInSumArr', this.peopleInSumStr);
    //   this.peopleInSumArr = JSON.parse(this.peopleInSumStr);
    //   console.log('d3 this.peopleInSumArr jajdjhdhjd', this.peopleInSumArr);
    //   console.log('this.dateForD3', this.dateForD3);
    //   this.storeIntraffic_plot();
        this.initSvg();
        this.initAxis();
        this.drawAxis();
        this.drawLine();


    }
  }
  private initSvg() {
    d3.select("svg").remove();
    this.svg = d3.select("#svgcontainer")
    .append("svg")
        .attr("width", this.width + this.margin.left + this.margin.right)
        .attr("height", this.height + this.margin.top + this.margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + this.margin.left + "," + this.margin.top + ")")
     .attr("stroke-width", 2);
  }
  p

I'm not sure what pricelineVar(d.values) is doing here and The error i'm getting is :

**core.js:1598 ERROR TypeError: Cannot read property 'peoplesum' of undefined
    at SVGPathElement.<anonymous> (d3graph.component.ts:140)*

[Jagruthi Prabhudev]

you can add a tool-tip element to your chart and load data from your json file.

.on("mousemove", function(d,i){    //display tooltip

                tooltip

                  .style("left", d3.event.pageX  + "px")

                  .style("top", d3.event.pageY + "px")

                  .style("display", "inline-block")

                  .html(" x:"+X-Axis data + ": y: "+ Y-Axis data+);  

            })

Thanks,

Jagruthi.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.