テーブルからグラフをつくってくれるJS、Bluff

エクセルのようにテーブルからよしなにグラフがつくってくれたりすると便利だったりするのに、というときに使えそうなJavaScriptのライブリ「Bluff」。data_from_table()のメソッドでつくってくれます

• 本体
  • http://bluff.jcoglan.com/
• API Reference
  • http://bluff.jcoglan.com/api.html

利用例としてはこんなかんじ

        <table id="data">
          <caption>Annual Fruit Sales</caption>
          <thead>
            <tr>
              <th scope="col"></th>
              <th scope="col">Apples</th>
              <th scope="col">Oranges</th>
              <th scope="col">Watermelon</th>
              <th scope="col">Peaches</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row"></th>
                <td>1</td> <td>4</td> <td>2</td> <td>9</td>
            </tr>
            <tr>
              <th scope="row">2003</th>
                <td>2</td> <td>8</td> <td>3</td> <td>9</td>
            </tr>
            <tr>
              <th scope="row"></th>
                <td>3</td> <td>7</td> <td>1</td> <td>10</td>
            </tr>
            <tr>
              <th scope="row">2004</th>
                <td>4</td> <td>9</td> <td>5</td> <td>8</td>
            </tr>
            <tr>
              <th scope="row"></th>
                <td>4</td> <td>8</td> <td>6</td> <td>7</td>
            </tr>
            <tr>
              <th scope="row">2005</th>
                <td>3</td> <td>9</td> <td>8</td> <td>9</td>
            </tr>
          </tbody>
        </table>
        <canvas id="graph"></canvas>
        
        <script type="text/javascript">
          var g = new Bluff.Line('graph', 300);
          g.theme_odeo();
          g.data_from_table('data');
          g.draw();
        </script>