I wan to make my google charts clickable.
I am using chof=json in my Google chart URL to get coordinates in JSON Format:
{"chartshape":[{"name":"data0_0","type":"POLY","coords":[126,51,192,51,191,53,191,55,191,57,191,60,190,62,190,64,190,66,189,69,188,71,188,73,187,75,186,77,185,79,184,81,183,84,181,85,180,87,179,89,178,91,176,93,175,95,173,96,171,98,170,100,168,101,166,103,164,104,162,105,160,106,158,108,156,109,154,110,152,111,150,112,148,113,146,113,144,114,141,115,139,115,137,115,135,116,132,116,130,116,128,116,125,117,123,116,121,116,119,116,116,116,114,115,112,115,110,115,107,114,105,113,103,113,101,112,99,111,97,110,95,109,92,108,91,106,89,105,87,104,85,103,83,101,81,100,80,98,78,96,76,95,75,93,73,91,72,89,71,87,70,85,68,83,67,81,66,79,65,77,64,75,63,73,63,71,62,69,61,66,61,64,61,62,60,60,60,57,60,55,60,53,60,50,60,48,60,46,60,44,60,41,61,39,61,37,61,35,62,32,63,30,63,28,64,26,65,24,66,22,67,20,68,17,70,16,71,14,72,12]},{"name":"data0_1","type":"POLY","coords":[126,51,72,12,73,10,75,8,76,6,78,5,80,3,81,1,83,0,85,-2,87,-3,89,-4,91,-5,92,-7,95,-8,97,-9,99,-10,101,-11,103,-12,105,-12,107,-13,110,-14,112,-14,114,-14,116,-15,119,-15,121,-15,123,-15,125,-16,128,-15,130,-15,132,-15,135,-15,137,-14,139,-14,141,-14,144,-13,146,-12,148,-12,150,-11,152,-10,154,-9,156,-8,158,-7,160,-5,162,-4,164,-3,166,-2,168,0,170,1,171,3,173,5,175,6,176,8,178,10,179,12,180,14,181,16,183,17,184,20,185,22,186,24,187,26,188,28,188,30,189,32,190,35,190,37,190,39,191,41,191,44,191,46,191,48,192,50]},{"name":"label1","type":"RECT","coords":[207,13,235,21]},{"name":"label0","type":"RECT","coords":[19,81,45,89]}]}
Now I used the tool on this page to create HTML version of above json code to place in my HTML Page:
<map name='ID_HERE'>
<area name='data0_0' shape='POLY' coords='126,51,192,51,191,53,191,55,191,57,191,60,190,62,190,64,190,66,189,69,188,71,188,73,187,75,186,77,185,79,184,81,183,84,181,85,180,87,179,89,178,91,176,93,175,95,173,96,171,98,170,100,168,101,166,103,164,104,162,105,160,106,158,108,156,109,154,110,152,111,150,112,148,113,146,113,144,114,141,115,139,115,137,115,135,116,132,116,130,116,128,116,125,117,123,116,121,116,119,116,116,116,114,115,112,115,110,115,107,114,105,113,103,113,101,112,99,111,97,110,95,109,92,108,91,106,89,105,87,104,85,103,83,101,81,100,80,98,78,96,76,95,75,93,73,91,72,89,71,87,70,85,68,83,67,81,66,79,65,77,64,75,63,73,63,71,62,69,61,66,61,64,61,62,60,60,60,57,60,55,60,53,60,50,60,48,60,46,60,44,60,41,61,39,61,37,61,35,62,32,63,30,63,28,64,26,65,24,66,22,67,20,68,17,70,16,71,14,72,12' href='#' title=''>
<area name='data0_1' shape='POLY' coords='126,51,72,12,73,10,75,8,76,6,78,5,80,3,81,1,83,0,85,-2,87,-3,89,-4,91,-5,92,-7,95,-8,97,-9,99,-10,101,-11,103,-12,105,-12,107,-13,110,-14,112,-14,114,-14,116,-15,119,-15,121,-15,123,-15,125,-16,128,-15,130,-15,132,-15,135,-15,137,-14,139,-14,141,-14,144,-13,146,-12,148,-12,150,-11,152,-10,154,-9,156,-8,158,-7,160,-5,162,-4,164,-3,166,-2,168,0,170,1,171,3,173,5,175,6,176,8,178,10,179,12,180,14,181,16,183,17,184,20,185,22,186,24,187,26,188,28,188,30,189,32,190,35,190,37,190,39,191,41,191,44,191,46,191,48,192,50' href='#' title=''>
<area name='label1' shape='RECT' coords='207,13,235,21' href='#' title=''>
<area name='label0' shape='RECT' coords='19,81,45,89' href='#' title=''>
</map>
How can I get this JSON format and then convert it into HTML on fly/runtime. I want my script to create Google Chart URL and then get coordinates in JSON format itself and then convert it into HTML itself and place in My Webpage itself.
Use their code. Check the page source code for the javascript function makeMap() and modify it as necessary to generate the imagemap code for your page.
Specifically, you'll need to construct one URL to produce the graphic and a second URL that includes the '&chof=json' attribute to produce the JSON then feed the returned JSON to the makeMap() function to produce the imagemap code.
I've added an example of a PHP version of their javascript code:
// Assumes $url contains the URL you built for your chart
// You must replace LESS_THAN with the "less than" open tag symbol
// (It gets stripped out by this site)
// You must supply MAP_NAME, YOUR_HREF and YOUR_TITLE
// Get the JSON
$fh = fopen($url . '&chof=json','r');
while (!feof($fh)) {
$json .= fread($fh,1048576);
}
fclose($fh);
$json_decoded = json_decode($json);
// Build the map element
$map_string = 'LESS_THANmap name="YOUR_MAP_NAME" id="YOUR_MAP_NAME">' . "\n";
foreach ($json_decoded->chartshape as $index => $element) {
$map_string .= 'LESS_THANarea '
. 'name="' . $element->name . '" '
. 'id="' . $element->name . '" '
. 'shape="' . $element->type . '" '
. 'coords="' . implode(',', $element->coords) . '" '
. 'href="' . YOUR_HREF . '" '
. 'title="' . YOUR_TITLE . '" '
. '>';
}
$map_string .= 'LESS_THAN/map>';
// Add the map element to the output
print $map_string;