0

Using cubism.js I'm snagging graphite data and creating multiple graphs on page. Looks amazing but I cannot figure out how to modify the default title/text of each graph. Very limited JS experience.

This might be a cubusm.js, d3.js, or general javascript question, I'm not sure. Since graphite nests data within sometimes deep folders structures, I'd like to be able to simplify default the string a bit. Example of text I want to modify ('servers.apt1.loadavg.05', 'servers.apt2.loadavg.05', etc): https://i.stack.imgur.com/wXYsK.png

How do I modify the title/text of each graph's Graphite data? Getting "servers.apt1.loadavg.05, want "apt1" displayed.

var context = cubism.context()
    .step( 1 * 30 * 1000 )
    .size(960); 

var graphite = context.graphite("http://graphite.example.com");
graphFind = 'servers.*.loadavg.05'

graphite.find(graphFind, function(error, results) {
  // Map find results to array and set to graphite.metric object type
  var metrics = results.sort().map(function(i) {
    return graphite.metric(i);
  });

  // loop through array and print stuff to "graphs" div
  for (var i=0;i<metrics.length;i++){
    d3.select("#graphs").call(function(div) {
      div.append("div")
        .selectAll(".horizon")
        .data([metrics[i]])
        .enter()
        .append("div")
        .attr("class", "horizon")
        .call(context.horizon());
    });
  }
});
bryanp
  • 1
  • 1

1 Answers1

0

According to the documentation, you can do this with the horizon.title() function. So in your case, it would be something like

.call(context.horizon().title("your title here"));

You can also specify this as a function, e.g.

.call(context.horizon().title(function(d) { return d.title; }));
Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • I'm sorry if I'm being dense, but where would I do something to modify the default text that's presented for each for-loop? The text that's default is seen here: http://i.imgur.com/4FqwhjA.png If I specify .title('foo') it changes every chart to 'foo'. What I'm attempting to do is split the default text by periods and only show part of it. I can't figure out how to access the default value. – bryanp Feb 02 '14 at 19:45
  • You have to give a function. By default, it's the identity function, i.e. the data itself will be displayed as a string. So to show the part between the dots, you would need something like `.title(function(d) { return d.match(/\.([a-z]*)\./)[1]; });`. – Lars Kotthoff Feb 02 '14 at 19:55
  • Thank you so much for your assistance Lars! But with your .match example I'm getting: Uncaught TypeError: Object [object Object] has no method 'match' . – bryanp Feb 02 '14 at 20:07
  • What is `metrics` then? You can also try `return (new String(d)).match(...)`. – Lars Kotthoff Feb 02 '14 at 20:09