Image Map on ZingChart Image

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <style>
  </style>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style></style>
</head>

<body>
  <div id='myChart2'><span id="myQtip">Hover to show tooltip.</span></div>
  <img src="http://i.imgur.com/8dR1lCP.png" usemap=#example border=0>
  <map id='imgMap' name=example>
    <area id="node0" shape=Rect Coords=54,228,109,335>
    <area id="node1" shape=Rect Coords=116,206,171,335>
    <area id="node2" shape=Rect Coords=179,130,234,335>
    <area id="node3" shape=Rect Coords=241,63,296,335>
    <area id="node4" shape=Rect Coords=304,258,359,335>
    <area id="node5" shape=Rect Coords=366,231,421,335>
    <area id="node6" shape=Rect Coords=429,130,484,335>
    <area id="node7" shape=Rect Coords=491,75,546,335>
    <!--<area shape=Rect Coords=30,30,59,59>-->
  </map>


  <!-- qTip2  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css">
  <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/jquery.qtip.js"></script>
  <script nonce="undefined">
  </script>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    var myConfig = {
      type: "bar",
      series: [{
        values: [35, 42, 67, 89, 25, 34, 67, 85]
      }]
    };

    zingchart.render({
      id: 'myChart',
      data: myConfig,
      height: 400,
      width: 600
    });

    $('#node0').qtip({ // Grab some elements to apply the tooltip to
      content: {
        text: 'Node[0]: 35'
      },
      position: {
        target: 'mouse'
      }
    });
    $('#node1').qtip({ // Grab some elements to apply the tooltip to
      content: {
        text: 'Node[1]: 42'
      },
      position: {
        target: 'mouse'
      }
    });
    $('#node2').qtip({ // Grab some elements to apply the tooltip to
      content: {
        text: 'Node[2]: 67'
      },
      position: {
        target: 'mouse'
      }
    });
    $('#node3').qtip({ // Grab some elements to apply the tooltip to
      content: {
        text: 'Node[3]: 89'
      },
      position: {
        target: 'mouse'
      }
    });
    $('#node4').qtip({ // Grab some elements to apply the tooltip to
      content: {
        text: 'Node[4]: 25'
      },
      position: {
        target: 'mouse'
      }
    });
    $('#node5').qtip({ // Grab some elements to apply the tooltip to
      content: {
        text: 'Node[5]: 34'
      },
      position: {
        target: 'mouse'
      }
    });
    $('#node6').qtip({ // Grab some elements to apply the tooltip to
      content: {
        text: 'Node[6]: 67'
      },
      position: {
        target: 'mouse'
      }
    });
    $('#node7').qtip({ // Grab some elements to apply the tooltip to
      content: {
        text: 'Node[7]: 85'
      },
      position: {
        target: 'mouse'
      }
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <style>
  </style>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <div id='myChart2'><span id="myQtip">Hover to show tooltip.</span></div>
  <img src="http://i.imgur.com/8dR1lCP.png" usemap=#example border=0>
  <map id='imgMap' name=example>
    <area id="node0" shape=Rect Coords=54,228,109,335>
    <area id="node1" shape=Rect Coords=116,206,171,335>
    <area id="node2" shape=Rect Coords=179,130,234,335>
    <area id="node3" shape=Rect Coords=241,63,296,335>
    <area id="node4" shape=Rect Coords=304,258,359,335>
    <area id="node5" shape=Rect Coords=366,231,421,335>
    <area id="node6" shape=Rect Coords=429,130,484,335>
    <area id="node7" shape=Rect Coords=491,75,546,335>
    <!--<area shape=Rect Coords=30,30,59,59>-->
  </map>


  <!-- qTip2  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/basic/jquery.qtip.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.1/jquery.qtip.js"></script>
  <script>
  </script>
</body>

</html>

var myConfig = {
  type: "bar",
  series: [{
    values: [35, 42, 67, 89, 25, 34, 67, 85]
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: 600
});

$('#node0').qtip({ // Grab some elements to apply the tooltip to
  content: {
    text: 'Node[0]: 35'
  },
  position: {
    target: 'mouse'
  }
});
$('#node1').qtip({ // Grab some elements to apply the tooltip to
  content: {
    text: 'Node[1]: 42'
  },
  position: {
    target: 'mouse'
  }
});
$('#node2').qtip({ // Grab some elements to apply the tooltip to
  content: {
    text: 'Node[2]: 67'
  },
  position: {
    target: 'mouse'
  }
});
$('#node3').qtip({ // Grab some elements to apply the tooltip to
  content: {
    text: 'Node[3]: 89'
  },
  position: {
    target: 'mouse'
  }
});
$('#node4').qtip({ // Grab some elements to apply the tooltip to
  content: {
    text: 'Node[4]: 25'
  },
  position: {
    target: 'mouse'
  }
});
$('#node5').qtip({ // Grab some elements to apply the tooltip to
  content: {
    text: 'Node[5]: 34'
  },
  position: {
    target: 'mouse'
  }
});
$('#node6').qtip({ // Grab some elements to apply the tooltip to
  content: {
    text: 'Node[6]: 67'
  },
  position: {
    target: 'mouse'
  }
});
$('#node7').qtip({ // Grab some elements to apply the tooltip to
  content: {
    text: 'Node[7]: 85'
  },
  position: {
    target: 'mouse'
  }
});