CODEWITHSUNDEEP
angularjsd3.jssvgtooltiplinechart
Vinit Desai
Vinit Desai

Reputation: 520

Adding tooltip and x axis, y axis title to D3.js chart

I want to add tooltip with information of value on Y axis and time to the circle, X-axis and Y-axis title. I tried to put the code in svg.selectAll, but failed to get the graph display itself. Kindly help me with this

var app = angular.module('myApp', []);
app.controller('myController', ['$scope', function ($scope) {
    //setting the data in the scope
    $scope.data = [{
        "date": "2012-04-30T18:30:00.000Z",
            "close": 58.13,
            "ews" : 3,
    }, {
        "date": "2012-04-29T18:30:00.000Z",
            "close": 53.98,
            "ews" : 3
    }, {
        "date": "2012-04-26T18:30:00.000Z",
            "close": 67,
            "ews" : 3
    },  {
        "date": "2012-04-24T18:30:00.000Z",
            "close": 99,
            "ews" : 2
    }, {
        "date": "2012-04-23T18:30:00.000Z",
            "close": 80,
            "ews" : 3
    }, {
        "date": "2012-04-22T18:30:00.000Z",
            "close": 167,
            "ews" : 0
    }, {
        "date": "2012-04-19T18:30:00.000Z",
            "close": 234,
            "ews" : 3
    }, {
        "date": "2012-04-18T18:30:00.000Z",
            "close": 101,
            "ews" : 1
    }, {
        "date": "2012-04-17T18:30:00.000Z",
            "close": 92,
            "ews" : 2
    }, {
        "date": "2012-04-16T18:30:00.000Z",
            "close": 96,
            "ews" : 2 
    }, {
        "date": "2012-04-15T18:30:00.000Z",
            "close": 58,
            "ews" : 3
    }, {
        "date": "2012-04-12T18:30:00.000Z",
            "close": 105,
            "ews" : 1
    }, {
        "date": "2012-04-11T18:30:00.000Z",
            "close": 238,
            "ews" : 3
    }, {
        "date": "2012-03-29T18:30:00.000Z",
            "close": 108,
            "ews" : 1
    }, {
        "date": "2012-03-28T18:30:00.000Z",
            "close": 96,
            "ews" : 2
    }, {
        "date": "2012-03-27T18:30:00.000Z",
            "close": 198,
            "ews" : 0
    }];

}]);
app.directive('linearChart', function () {
    return {
        restrict: 'EA',

        link: function (scope, elem, attrs) {
            var data = scope.data;
            // Set the dimensions of the canvas / graph
            var margin = {
                top: 30,
                right: 20,
                bottom: 30,
                left: 50
            },
            width = 600 - margin.left - margin.right,
                height = 270 - margin.top - margin.bottom;

            // Parse the date / time
            var parseDate = d3.time.format("%d-%b-%y").parse;

            // Set the ranges
            var x = d3.time.scale().range([0, width]);
            var y = d3.scale.linear().range([height, 0]);

            // Define the axes
            var xAxis = d3.svg.axis().scale(x)
                .orient("bottom").ticks(5);

            var yAxis = d3.svg.axis().scale(y)
                .orient("left").ticks(5);

            // Define the line
            var valueline = d3.svg.line()
                .x(function (d) {
                return x(new Date(d.date));
            })
                .y(function (d) {
                return y(d.close);
            });

            // Adds the svg canvas
            var svg = d3.select("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")");
            // Scale the range of the data
            x.domain(d3.extent(data, function (d) {
                return new Date(d.date);
            }));
            y.domain([0, d3.max(data, function (d) {
                return d.close;
            })]);

            // Add the valueline path.
            svg.append("path")
                .attr("class", "line")
                .attr("d", valueline(data));

            // Add the scatterplot
            svg.selectAll("dot")
                .data(data)
                .enter().append("circle")
                .attr("r", 3.5)
                .style("fill", function (d) {
                if (d.ews==0) return "green";
                if (d.ews==1) return "yellow";
                if (d.ews==2) return "orange";
                if (d.ews==3) return "red";
            })
                .attr("cx", function (d) {
                return x(new Date(d.date));
            })
                .attr("cy", function (d) {
                return y(d.close);
            });
                

            // Add the X Axis
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

            // Add the Y Axis
            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);

        }
    };
});
h1 {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 16px;
}
body {
    font: 12px Arial;
}
path {
    stroke: #35cc99;
    stroke-width: 2;
    fill: none;
}
.axis path, .axis line {
    fill: none;
    stroke: gray;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>Line chart</title>

    <link href="style.css" rel="stylesheet">

	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
   <script src="controller.js"></script>
  </head>
  <body ng-controller="myController">
     <h1>My Chart</h1>
    <svg linear-chart></svg>
</body>
</html>

Upvotes: 1

Views: 3158

Answers (1)

Cyril Cherian
Cyril Cherian

Reputation: 32327

For label on x axis / y axis do:

    //text label for y axis
    svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x", 0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Value");
    // text label for the x axis
    svg.append("text")      
            .attr("x", width/2 )
            .attr("y", height +35)
            .style("text-anchor", "middle")
            .text("Date");

I have added a div for showing tooltip like below

<div id="mytooltip" style="position: absolute; z-index: 10; visibility: hidden; top: 82px; left: 81px;">
    <div id="ttclose"></div>
    <div id="ttdate"></div>
</div>

Then on move event you can show and set values as below:

.on("mouseover", function () {
                return d3.select("#mytooltip").style("visibility", "visible"); //making the tooltip visible
            })
                .on("mousemove", function (d) {
                console.log()
                d3.select("#mytooltip").style("top", (d3.mouse(this)[1] + 10) + "px").style("left", (d3.mouse(this)[0] + 10) + "px");
                d3.select("#mytooltip").select("#ttdate").text(function () {
                    return d.date; //setting the date values to tooltip
                });
                d3.select("#mytooltip").select("#ttclose").text(function () {
                    return d.close; //setting the date values to tooltip
                });
                return;
            })
                .on("mouseout", function () {
                return d3.select("#mytooltip").style("visibility", "hidden"); //hidding the tooltip
            });

working code here

Hope this helps!

Upvotes: 1

Related Questions