Lumber.js

Simple, beautiful graphs.

Lumber.js is a wrapper for the d3.js library. It comes with numerous graphs out of the box, and only requires you to write a touch of javascript.

        
<!-- Set the graph information in the data attributes of an svg tag. -->
<svg id="lumber"
     data-lumber-type="bar"
     data-lumber-y-axis-label="Frequency"
     data-lumber-x-axis-label="Letter"
     data-lumber-values="3:A,2:B,3:C,4:D,5:E,7:F,6:G,5:H,4:I,2:J,6:K,5:L,6:M">
</svg>
<script>
  // When the DOM is loaded, call lumber's graphing function.
  document.addEventListener("DOMContentLoaded", function() {
    lumber.graph("#lumber");
  });
</script>

Lumber.js takes care of the rest.

Create a line chart.

          
<!-- Set the graph information in the data attributes of an svg tag. -->
<svg id="lumber"
     data-lumber-type="line"
     data-lumber-x-axis-label="Price ($)"
     data-lumber-values="1-May-12:582.13,30-Apr-12:583.98">
</svg>
<script>
  // When the DOM is loaded, call lumber's graphing function.
  document.addEventListener("DOMContentLoaded", function() {
    lumber.graph("#lumber");
  });
</script>

Create a pie chart.

          
<!-- Set the graph information in the data attributes of an svg tag. -->
<svg id="pie"
     data-lumber-type="pie"
     data-lumber-values="3:A,2:B,3:C,4:D,5:E,7:F,6:G,5:H,4:I,2:J,6:K,5:L,6:M">
</svg>
<script>
  // When the DOM is loaded, call lumber's graphing function.
  document.addEventListener("DOMContentLoaded", function() {
    lumber.graph("#pie");
  });
</script>