some notes

some codes related dev. and ops.

the simplest example of cubism.js

In this post, I will show the simplest example of cubism.js, hoping that someone interested in cubism.js feels familiar quickly by using this post.

Timeseries chart that cubism.js provides is acuired by the following steps.

1. create context
2. define metrics and metric accessor
3. draw graphs in a way of D3.js
4. add some components (axis, rules, …)

OK. Let’s get started.

First off, let’s create context, which contains state of cubism.js. And create horizon(chart object) from context.

var context = cubism.context();
var horizon = context.horizon();

you can change the values from default, such as graph size, steps, serverDelay, etc.. See here for details.

Next, we need to define metric accessor, which tells cubism.js how to get metric values
when a metric name is specified. In this post, metric values are ramdom values whatever the metric name is.
For more details see this part.

function random_ma(name) {
return context.metric(function(start,stop,step,callback){
var values = [];
while ( +start < +stop ){
+start += step; values.push(Math.random());
}
callback(null,values);
}, name)
}

And tells cubism.js that this is a metric accessor

horizon.metric(random_ma);

And, next? That’s all, folks. Draw the graph is just the same as D3.

var metrics = ["X,"Y","Z"]
d3.select("#graph").selectAll(".horizon")
.data(metrics)
.enter()
.append("div")
.attr("class", "horizon")
.call(horizon);

The following is a complete set. cut and paste and save them as “index.html”,
and view it with web browser. You don’t need anything, such as apache.

Thanks for reading.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    @import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);
    @import url(http://square.github.io/cubism/style.css);
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://square.github.io/cubism/cubism.v1.js"></script>
<div id="body"> <div id="graph" /></div>

<script>
// create context and horizon
var context = cubism.context().size(960)
var horizon = context.horizon().extent([0,2])

// define metric accessor
function random_ma(name) {
   return context.metric(function(start,stop,step,callback){
        var values = [];
        while (+start < +stop){ start = +start +step; values.push(Math.random());}
       callback(null, values);
   }, name);
}

// draw graph
var metrics = ["foo","bar","baz"];
horizon.metric(random_ma);

d3.select("#graph").selectAll(".horizon")
      .data(metrics)
      .enter()
      .append("div")
      .attr("class", "horizon")
      .call(horizon);

// set rule
d3.select("#body").append("div")
  .attr("class", "rule")
  .call(context.rule());

// set focus
context.on("focus", function(i) {
    d3.selectAll(".value")
        .style( "right", i == null ? null : context.size() - i + "px");
});
// set axis 
var axis = context.axis()
d3.select("#graph").append("div").attr("class", "axis").append("g").call(axis);
</script>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: