title: Image Map for dynamic Google Charts
body: <p>I am using <a href="http://code.google.com/apis/chart/docs/making_charts.html" rel="nofollow">Google Charts</a>. Now I want to make different parts of these charts clickable. For this I am using <a href="http://code.google.com/apis/chart/docs/json_format.html" rel="nofollow">these instructions</a>. But problem is that I have to hard code my image map code that is created by using tool on <a href="http://code.google.com/apis/chart/docs/json_format.html" rel="nofollow">this page</a> but my charts are created dynamically based on input data. </p>
  
  <p>How can I make Image Map code dynamic for All charts based on input data.</p>
  
  <p><strong>Map code generated by Tool online using json data:</strong></p>
  
  <pre><code>&lt;map name='MapName'&gt;
  
       &lt;area name='legend0' shape='RECT' coords='26,0,38,12' href='#'  title='Low'&gt;
       &lt;area name='legend1' shape='RECT' coords='96,0,108,12' href='#'  title='Expired'&gt;
       &lt;area name='legend2' shape='RECT' coords='176,0,188,12' href='#'  title='Expiring'&gt;
  
       &lt;area name='data0_0' shape='POLY' coords='136,65,196,65,195,67,195,69,195,71,195,73,195,75,194,77,194,79,193,81,193,83,192,85,191,87,190,89,189,91,189,93,188,94,186,96,185,98,184,100,183,101,182,103,180,105,179,106,177,108,176,109,174,110,173,112,171,113,169,114,167,115,166,116,164,117,162,118,160,119,158,120,156,121,154,122,152,122,150,123,148,123,146,124,144,124,142,124,140,124,138,124,136,124,134,124,132,124,129,124,127,124,125,124,123,123,121,123,119,122,117,122,115,121,113,120,111,119,109,119,108,118,106,117,104,116,102,114,101,113,99,112,97,111,96,109,94,108,93,106,91,105,90,103,88,102,87,100,86,98,85,97,84,95,83,93,82,91,81,89,80,87,79,85,79,83,78,81,77,79,77,77,76,75,76,73,76,71,76,69,76,67,76,65,76,63,76,61,76,59,76,57,76,55,77,53,77,51,78,48,78,46,79,45,80,43,80,41,81,39,82,37,83,35,84,33,85,31,87,30,88,28,89,26,90,25,92,23,93,22,95,20,96,19,98,18,100,16,101,15,103,14,105,13,107,12,109,11,110,10,112,9,114,8,116,8,118,7,120,6' href='#'  title=''&gt;
       &lt;area name='data0_1' shape='POLY' coords='136,65,120,6,122,6,124,6,126,5,128,5,130,5,133,5,135,5,137,5,139,5,141,5,143,5,145,5,147,6,149,6,151,7,153,7,155,8,157,8,159,9,161,10,163,11,164,12,166,13,168,14,170,15,171,16,173,18,175,19,176,20,178,22,179,23,180,25,182,26,183,28,184,30,185,31,187,33,188,35,189,37,190,39,190,40,191,42,192,44,193,46,193,48,194,50,194,52,195,54,195,56,195,58,195,60,195,62,196,64' href='#'  title=''&gt;
  
       &lt;area name='label1' shape='RECT' coords='211,35,248,43' href='#'  title='Expired'&gt;
       &lt;area name='label2' shape='RECT' coords='211,61,250,69' href='#'  title='Expiring'&gt;
       &lt;area name='label0' shape='RECT' coords='40,87,61,95' href='#'  title='Low'&gt;
  
  &lt;/map&gt;
  </code></pre>
  
  <p>Thanks</p>