how to find the x and y coordinates of the image points in javascript

Question

Im using google charts for my application, due to some issues in IE8 im using google image line charts in my jsp for IE8, but i need tooltip for every points marked in my charts. For that i've trying to find the coordinates of the points marked, but i dont have any idea to find the cordinates in line charts. Please help me to find the coordinates to get the tooltip in my image charts. Here is my generated image chart

enter image description here

Timothy Barmann · Accepted Answer

The approach I would take is to create an HTML image map based on the image created by Google's inline chart. Using your image, I created an image map using the site http://www.image-maps.com/ for each of the points on your graph.

I gave them an id of the year each point represents:

Associate the image map with the image. From there, you can use some jQuery and css to create a simple tool tip that will show the data when you mouseover the points.

Working example: http://jsfiddle.net/MVFw3/

The data is just made up.

Here's the code:

Edit: Yes, you can dynamically create an image map for the Google inline images. Google now provides a parameter that gives you the coordinates of the line graph it draws, based on your data. It returns the info in JSON format. You need to take the url you use to create the chart, and append "&chof=json".

Here are the docs that explain this: https://developers.google.com/chart/image/docs/json_format

For example, this url http://chart.apis.google.com/chart?cht=lc&chxs=0Nf0z,000000&chs=219x102&chtt=&chxr=0,0,166.7&chco=1423F7,15CC08,F9FF4D,7A7AFF&chf=c,lg,0,FFFFFF,1,FFFFFF,0|bg,s,FFFFFF&chd=t:36,24,90,42&chl=2009|2010|2011|2012&chof=json will return this JSON

{
   "chartshape":[
     {
     "name":"axis0_0",
     "type":"RECT",
     "coords":[
        1,
        88,
        26,
        96
     ]
     },
     {
     "name":"axis0_1",
     "type":"RECT",
     "coords":[
        65,
        88,
        90,
        96
     ]
     },
     {
     "name":"axis0_2",
     "type":"RECT",
     "coords":[
        129,
        88,
        154,
        96
     ]
     },
     {
     "name":"axis0_3",
     "type":"RECT",
     "coords":[
        193,
        88,
        218,
        96
     ]
     },
     {
     "name":"line0",
     "type":"POLY",
     "coords":[
        12,
        61,
        76,
        68,
        140,
        32,
        204,
        58,
        208,
        62,
        144,
        36,
        80,
        72,
        16,
        65
     ]
     }
   ]
}

The key information is contained in the poly type. These are the coordinates for the line in the line chart. The trick is to convert these coordinates into data points.

The coordinates are in the format x,y,x,y,x,y ... etc. The first half of the coordinates draw the line while the second half loop back to complete the line. We only need the first half of the coordinates.

We'll take those, which represent the center point of the data points. We can make an image map with this by using the shape type "circle" using the x,y coordinates for the center, and a radius of, say 5 pixels, to give it a little more area to mouse over.

jQuery's getJSON function can grab the coordinates. I had to guess what values you used to create the original image chart.

var src = "http://chart.apis.google.com/chart?cht=lc&chxs=0N*f0z*,000000&chs=219x102&chtt=&chxr=0,0,166.7&chco=1423F7,15CC08,F9FF4D,7A7AFF&chf=c,lg,0,FFFFFF,1,FFFFFF,0|bg,s,FFFFFF&chd=t:36,24,90,42&chl=2009|2010|2011|2012";
$('#chartImage').attr('src',src);

var JsonUrl = src + "&chof=json";

$.getJSON(JsonUrl,function(output){
    $.each(output.chartshape,function(){
        if (this.type==="POLY") {
        var outerThis = this;
        $.each(this.coords, function(index,value){
            if (isEven(index)&&index';
                $('map').attr('name','map').append(html);
            }

        });

    }

    });  // end each

That will create this HTML image map and insert it on the page:

The rest of the Javascript:

    $('area').on('mouseover', function(){
        mapOnMouseOver(this);
    });

    $('area').on('mouseout', function(){
        $('#tooltip').css({'display':'none'});
    });

}); // end getJSON


var data = [
        {year: 2009, value: 60},
        {year: 2010, value: 40},
        {year: 2011, value: 150},
        {year: 2012, value: 70}
        ]


function mapOnMouseOver(obj) {

    var id = obj.id
    var year = data[id].year;
    var value =  data[id].value;
    var html = year + ": " + value;
    var coordArray = obj.coords.split(",");
    var x = parseInt(coordArray[0]) + 15;
    var y = parseInt(coordArray[1]) + 15;


    $('#tooltip').html(html);
               $('#tooltip').css({'left':x,'top':y,'display':'inline'});
}

function isEven(n) {
  n = Number(n);
  return n === 0 || !!(n && !(n%2));
}

Here is a working demo: http://jsfiddle.net/MVFw3/2/

A big caveat: Google has depreciated its image chart tools. So it's likely they will stop working at some point. More info: http://googledevelopers.blogspot.com/2012/04/changes-to-deprecation-policies-and-api.html

Good luck! Timothy Barmann

how to find the x and y coordinates of the image points in javascript

Answers (1)

Related Questions