Svg line not displayed on google charts?

Question

I am trying to add one line on top of google line chart.

I am using svg for transforming line. If i dont use google.load('visualization', '1', {packages: ['corechart'], callback: drawChart}); to draw line then a moving vertical line is working but if i draw chart then vertical line is not displayed.

Following is my code of drawing moving vertical line on google line chart.

 <!DOCTYPE html>
 <html>
<head>
    <script type="text/javascript" src="http://www.google.com/jsapi?.js"></script>  
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
    <script type="text/javascript" src="underscore.js"></script>
    <style>
        .selection_line
        {
            stroke: rgba(0, 0, 0, 0.6);
            shape-rendering: crispEdges;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            // Handler for .ready() called.
            var graph = d3.select('#graph')
                    .append('svg')
                    .attr('width', '100%')
                    .attr('height', 600);


            var line = graph.append('line')
                    .attr('transform', 'translate(0, 50)')
                    .attr({'x1': 0, 'y1': 0, 'x2': 0, 'y2': 300})
                    .attr('class', 'selection_line');

            var x = 0;

            graph.on('mousemove', function() {
                x = d3.mouse(this)[0];
            });

            var draw = function() {
                line
                        .transition()
                        .duration(18)
                        .attrTween('transform', d3.tween('translate(' + x + ', 50)', d3.interpolateString))
                        .each('end', draw);
            };


            draw();
            google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

        });

        function drawChart() {
            // Create and populate the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('number', 'x');
            // add an "annotation" role column to the domain column
            data.addColumn({type: 'string', role: 'annotation'});
            data.addColumn('number', 'y');

            // add 100 rows of pseudorandom data
            var y = 50;
            for (var i = 0; i < 100; i++) {
                y += Math.floor(Math.random() * 5) * Math.pow(-1, Math.floor(Math.random() * 2));
                data.addRow([i, null, y]);
            }
            // add a blank row to the end of the DataTable to hold the annotations
            data.addRow([null, null, null]);
            // get the index of the row used for the annotations
            var annotationRowIndex = data.getNumberOfRows() - 1;

            var options = {
                height: 400,
                width: 600
            };

            // create the chart
            var chart = new google.visualization.LineChart(document.getElementById('graph'));


            // draw the chart
            chart.draw(data, options);

        }

    </script>
</head>
<body>
    <div id="graph"></div>
</body>

What are you trying to do? Animate the drawing of the line? http://stackoverflow.com/questions/13893127/how-to-draw-a-path-smoothly-from-start-point-to-end-point-in-d3-js/13893296#13893296 — Lars Kotthoff, Dec 05 '13 at 11:56
I am trying to plot svg line which will move with mouse on google line chart — Priya, Dec 05 '13 at 11:59
Thanks but what i want is vertical line move with mouse i have updated fiddle now it is showing straight vertical line but it is not moving with mouse http://jsfiddle.net/uT7Hc/ can you please help me on this? — Priya, Dec 05 '13 at 12:36
I'm still not entirely sure what you mean. [This](http://jsfiddle.net/U4FN6/2/)? — Lars Kotthoff, Dec 05 '13 at 13:00

score 2 · Accepted Answer · answered Dec 06 '13 at 11:31

2

To achieve this, you have to append a line to the SVG that is generated by the Google chart and move it according to the position of the mouse pointer, ignoring the x component:

var line = graph.append('line')
                .attr('transform', 'translate(100, 50)')
                .attr({'x1': 0, 'y1': 0, 'x2': 400, 'y2': 0})
                .attr('class', 'selection_line');

graph.on('mousemove', function() {
            line.attr("y1", d3.event.y - 50);
            line.attr("y2", d3.event.y - 50);
        });

Complete example here.

answered Dec 06 '13 at 11:31

Lars Kotthoff

107,425
16
204
204

1

You may have to use `d3.event.clientY` there. Unfortunately, this differs across browsers. – Lars Kotthoff Dec 06 '13 at 11:34
any idea on how to find point(coordinates) of graph at which line cuts graph? – Priya Dec 09 '13 at 09:38
The [intersection library](http://www.kevlindev.com/geometry/2D/intersections/index.htm) may help here. – Lars Kotthoff Dec 09 '13 at 09:40
will it be possible to find intersection point of line with google charts using this library? – Priya Dec 09 '13 at 09:43
I don't know. I haven't used that library myself. – Lars Kotthoff Dec 09 '13 at 09:55
http://jsfiddle.net/nc6uf/ the line which is drawn is not intersecting another graph on the same page. Any idea on this? – Priya Dec 09 '13 at 10:05
in jsfiddle.net/nc6uf i want to create svg element which will cover both the graphs so line will intersect both of them. but right now svg element is only covering 1st graph's div. – Priya Dec 09 '13 at 12:45
It seems to me that you would be better off doing it all in D3 so that you can control the lines better. – Lars Kotthoff Dec 09 '13 at 13:35

Svg line not displayed on google charts?

1 Answers1

Linked