Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller="MainCtrl">
  
  <svg bl-graph width="400" height="200"
       data-x-min="0" data-x-max="10" data-y-min="0" data-y-max="40">
    <path bl-line class="data1" line-data="myData1" line-x="x" line-y="y"></path>
    <path bl-line class="data2" line-data="myData2" line-x="x" line-y="y"></path>
  </svg>
  <br/>
  <br/>
  <table>
    <caption>
    <svg width="10" height="10">
      <path d="M0,5L10,5" class="data1"></path>
    </svg> myData1</caption>
    <thead>
      <tr>
        <th>x</th>
        <th>y</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in myData1">
        <td>
          <input type="number" ng-model="item.x"/>
        </td>
        <td>
          <input type="number" ng-model="item.y"/>
        </td>
      </tr>
    </tbody>
  </table>
  <br/><br/>
  <table>
    <caption>
    <svg width="10" height="10">
      <path d="M0,5L10,5" class="data2"></path>
    </svg> myData2</caption>
    <thead>
      <tr>
        <th>x</th>
        <th>y</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in myData2">
        <td>
          <input type="number" ng-model="item.x"/>
        </td>
        <td>
          <input type="number" ng-model="item.y"/>
        </td>
      </tr>
    </tbody>
  </table>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
bleshpro
0viewers