title: How to bind graphicsmetrics jquery plugin in Angular app
body: <p>I'm doing an Angular app and I recently found <a href="http://metricsgraphicsjs.org/" rel="nofollow">Metrics Graphics</a>. The problem is that I'm having a hard time trying to integrate it to my angular app, given that is build for Jquery.</p>
  
  <p>The another tricky problem is that my Angular app is consuming a restful API, and for the graphics that I want to integrate, the data is in the API.</p>
  
  <p>The code to generate the graphics: </p>
  
  <pre><code>$(function () {
    d3.json('file/json.json', function(data) {
      data_graphic({
        data: data,
        width: 650,
        height: 150,
        target: '#element',
        x_accessor: 'Month',
        y_accessor: 'Value'
      })
    });
  });
  </code></pre>
  
  <p>As you see, this code extracts data from a json file. Gratefully, my API is also returning json format in, i.e., <a href="http://api.example.com/api/data" rel="nofollow">http://api.example.com/api/data</a>.</p>
  
  <p>So what I want to do is bind this jquery script inside an angular directive (or controller) and make the data comes from the API and not a file.</p>
  
  <p>Thank you</p>