Draw a line between two points using Google Visualization API

in scatter chart i want to draw line between two point can u help me any one

I think that you may strike you is to generate a serie of DIV of 1px per 1px to draw the line.
A simple example that i found into web is the folllow.

var bla = ""
var lineLength = Math.sqrt( (Ax-Bx)*(Ax-Bx)+(Ay-By)*(Ay-By) );
for( var i=0; i<lineLength; i++ )
    bla += "<div style='position:absolute;left:"+ Math.round( Ax+(Bx-Ax)*i/lineLength  ) +"px;top:"+ Math.round( Ay+(By-Ay)*i/lineLength  ) +"px;width:1px;height:1px;background:#000'></div>";
document.body.innerHTML += bla;

hi tnks for ur logic

but i have a scatter chart in that i need to draw a line between any two points so i am asking logic how to implemt in that will u ple help me sir

Are you familiar with the Pythagorean theorem?
Have you tried using it? That’s the logic you’ll want.

no sir could u ple help me in this part

Get the two dimension of your chart in pixels.Then make a simple example in your chart with your points.Logically the points into the charts have height and width referring at pixels.

shall i send the code what i am written for u

sir this mine code what i am written for to display a chart now i need to draw aline from one point to another point ple help me in this one sir it will be great thanks full for me

<script type="text/javascript">
  google.load("visualization", "1", {packages:["scatterchart"]});
  function drawChart() 
    var data = google.visualization.arrayToDataTable([
      ['Age', 'Weight'],
      [ 8,      12],
      [ 4,      5.5],
      [ 11,     14],
      [ 4,      5],
      [ 3,      3.5],
      [ 6.5,    7]

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240});

<div id="chart_div"></div>


Try this

var c = document.getElementById("chart_div");
var ctx = c.getContext("2d");
ctx.moveTo(50, 16);
ctx.lineTo(100, 36);

no sir it not coming
ple help me sir

sir will u ple tell me

If I am correct, you are not wanting the logic, but how to do this using the Google Visualization API.

I have never used the API nor do I have the time right now to explore it in depth to see its possibilities and limitations.

I did briefly look at the documentation

and it “feels” like there should be some way to achieve what you’re after, but I don’t what that way would be.

Hopefully someone here with more experience using the API will help, but until then maybe looking around the API’s support forum will provide your answer?


hi sir,
sir i did not get the so;ution for mine problem…
will you please tell me the logic for that …
Thanking you

You are using the Google Chart API? Yes?

To the best of our knowledge, that API does not let you draw custom lines from one point to another.

Hi Sir,
i need a logic for this one
I have a web app where I would like the user to draw a line in the following way: When he clicks on Point1 and he moves the mouse, draw the line from Point1 to the current mouse position and, when clicks to Point2 draw the final line from Point1 to Point2.

Here’s some documentation on the lineTo method.

Here’s a simple experiment where you can draw points, freehand, and lines.

And I added some offsets so that it works better when being run as an embedded piece too.

Hi thanks for the Logic
i need to store selected data points values in to another variable can you help me in that
thanking you

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.