vimeo / timeserieswidget

Javascript for displaying interactive graphite graphs with zooming, event markers and all that
BSD 2-Clause "Simplified" License
196 stars 18 forks source link

support lineMode=staircase for flot #2

Open client9 opened 11 years ago

client9 commented 11 years ago

nice project!

It is likely I'm Doing This Wrong, so I'm not doing a full branch.

But this patch adds staircase mode to Flot.

--- a/jquery.tswidget.js
+++ b/jquery.tswidget.js
@@ -166,6 +166,12 @@ function find_definition (target_graphite, options) {
             if(resp_graphite.length == 0 ) {
                 console.warn("no data in graphite response");
             }
+
+            var lineMode = false;
+            if ('lineMode' in options && options['lineMode'] == 'staircase') {
+                lineMode = true;
+            }
+
             for (var res_i = 0; res_i < resp_graphite.length; res_i++) {
                 var target = find_definition(resp_graphite[res_i], options);
                 target.label = target.name // flot wants 'label'
@@ -184,11 +190,11 @@ function find_definition (target_graphite, options) {
             // default config state modifiers (you can override them in your config objects)
             var states = {
                 'stacked': {
-                    'series': {'stack': true, 'lines': {'show': true, 'lineWidth': 0, 'fill': 1}},
+                    'series': {'stack': true, 'lines': {'show': true, 'lineWidth': 0, 'fill': 1, 'steps': lineMode}},
                 },
                 'lines': {
                     // flot lib wants 0 or null. not false o_O
-                    'series': {'stack': null, 'lines': { 'show': true, 'lineWidth': 0.6, 'fill': false }}
+                    'series': {'stack': null, 'lines': { 'show': true, 'lineWidth': 0.6, 'fill': false, 'steps': lineMode }}
                 }
             };
Dieterbe commented 11 years ago

I couldn't find any mention of "linemode" in the flot documentation? can you explain more what you're trying to do?

client9 commented 11 years ago

http://graphite.readthedocs.org/en/0.9.10/render_api.html#linemode

is the same as

"steps" in blots https://github.com/flot/flot/blob/master/API.md

For lines, "steps" specifies whether two adjacent data points are connected with a straight (possibly diagonal) line or with first a horizontal and then a vertical line. Note that this transforms the data by adding extra points.

(more or less)

On 2013/04/23, at 0:55, Dieter Plaetinck notifications@github.com wrote:

I couldn't find any mention of "linemode" in the flot documentation? can you explain more what you're trying to do?

$B!=(B Reply to this email directly or view it on GitHub.

Dieterbe commented 11 years ago

right, now I get it. Your approach actually looks pretty right, but i would set steps = true, not lineMode, in that first branch, because we're setting flot options based on graphite options. it's awkward to use graphite terminology in the actual flot config.