Cubism.js Testing

HTML

<script src="http://square.github.io/cubism/d3.v2.js"></script>
<script src="http://square.github.io/cubism/cubism.v1.js"></script>
<div id = "insertElement">
    
    
</div>

CSS

#insertElement {
    border: 1px solid #ccc;
    width: 650px;
}

JavaScript

console.clear();
$(function(){
    
    // create new cubism.js context to render
    var graphContext = cubism.context()
        .serverDelay(1000) // allow 1second delay
        .step(1000) // 1 second steps
        .size(650); // 50px wide
    
    // create a new metric
    // this allows you to retrieve values from some source
    // this is data-source agnostic, so this does not matter.
    var graphMetric = graphContext.metric(function(start, stop, step, callback) {
        var values = [];
        start = +start;
        stop = +stop;
        while (start < stop) {
            start += step;
            values.push(Math.random()*0.10);
        }
        callback(null, values);
    });
    
    
    // here we create a new element and then append it to our
    // parent container. Then we call d3 to select the newly created
    // div and then we can create a chart
    var graphElement = document.createElement("div");
    $("#insertElement").append(graphElement);    
    d3.select(graphElement).call(function(div) {
        div.append("div")
            .attr("class", "axis top")
            .call(graphContext.axis().orient("top"));
        div.append("div")
            .attr("class", "rule")
            .call(graphContext.rule());
        div.selectAll(".horizon")
            .data([graphMetric])
            .enter().append("div")
            .attr("class", "horizon")
            .call(graphContext.horizon()
                  .height(150)
             );        
    });
    
});