Composite graphs

[obfuscurity]

Support stacked and/or multi-metric line graphs.

[smgt]

You can use the Graphite API to solve many of these problems. For example to combine two metrics into one you can use sumSeries(stat.first, stat.second) as target.

[obfuscurity]

That just returns a single metric. I'm talking about tasseo graphs with multiple metrics.

[smgt]

Ah! Now I understand what you mean.

On Tuesday 8 May 2012 at 16:44, Jason Dixon wrote:

That just returns a single metric. I'm talking about tasseo graphs with multiple metrics.

---

Reply to this email directly or view it on GitHub: https://github.com/obfuscurity/tasseo/issues/10#issuecomment-5576301

[obfuscurity]

Started a proof of concept. Click on a metric and it pops open a large "tactical" line graph and toggles that metric on or off. lStill a lot of work to do with hover, legend, etc.

[errordeveloper]

:+1:

[obfuscurity]

Man I need to get back on that. And while I'm at it, maybe move to using Bootstrap as a grid provider. Oh, and drag-and-drop. Shit, that way lies madness...

[errordeveloper]

Well, doing stacked graphs and such likees would be the first step ... suppose it would quite easy with Rickshaw, but will need to make some enhancements to the base data structures (i.e. datum/aliases)

could try something like this:

function constructGraphs() {
  for (var i=0; i<realMetrics.length; i++) {
    if (realMetrics[i] instanceof Array) {
      aliases[i] = [];
      descriptions[i] = [];
      datum[i] = [];
      for (var j=0; j<ealMetrics[i].length; j++) {
        aliases[i][j] = realMetrics[i][j].alias || realMetrics[i][j].target;
        descriptions[i][j] = realMetrics[i][j].description || null;
        datum[i][j] = { x:0, y:0 };
        var series = [{
          name: aliases[i][j],
          color: normalColorPalette[j],
          data: datum[i][j],
        }];
    } else {
      aliases[i] = realMetrics[i].alias || realMetrics[i].target;
      descriptions[i] = realMetrics[i].description || null;
      datum[i] = [{ x:0, y:0 }];
      var series = [{
        name: aliases[i],
        color: normalColorPalette[0],
        data: datum[i]
      }];
    }
    graphs[i] = new Rickshaw.Graph({
      element: document.querySelector('.graph' + i),
      width: 348,
      height: 100,
      interpolation: 'step-after',
      renderer: 'area',
      stroke: true,
      series: series,
    });
    graphs[i].render();
  }
}