JavaScript Vorauswahl bei zusammenhängenden Flot-Charts

[Cave Johnson]

Hi,

ich verwende Flot-Charts auf Basis von diesem Beispiel.

Dort kann ich ja im großen Chart einen Bereich auswählen, der mir dann im Übersichtschart auch angezeigt wird. Jetzt würde ich gerne beim Laden des Charts eine Vorauswahl treffen.

Im großen Chart mach ich das mit:

var options = {
. xaxis: { mode: "time", tickLength: 5, min: (new Date(<?php echo (($max_zeit-14*24*60*60)*1000); ?>)).getTime(), max: (new Date(<?php echo $max_zeit*1000; ?>)).getTime() },
. selection: { mode: "x" },
. grid: { markings: weekendAreas }
};​

Das Problem ist nur, dass mir dann im kleinen Chart dieser Bereich nicht markiert wird. Kann mir jemand verraten, wie ich das bewerkstelligen kann?

Eigentlich müsste das doch hier sein:

overview.setSelection(ranges, true);​

Aber ich krieg es nicht hin

http://people.iola.dk/olau/flot/.svn/text-base/jquery.flot.selection.js.svn-base

- setSelection(ranges, preventEvent)

Set the selection rectangle.

 

[Chef de Loup]

Wie sieht denn dein ranges Objekt aus? Laut der Doku sollte das ja bei mode "x" dann in etwas so aussehen: ranges = { xaxis: { from: 0, to: 10 }}

 

[Cave Johnson]

ranges liefert mir bspw:

({xaxis:{from:1344429426127.4336, to:1347227867741.593}, yaxis:{from:7.105427357601002e-15, to:50}})

Aber wenn ich das dort einsetze, wird im Chart kein Bereich markiert.

 

[Chef de Loup]

Die Range sieht mir extrem komisch aus. Kann es sein dass Du die Umrechnung nicht machst? Ich vermute mal das dein 'kleines' Fenster deutlich andere Masse hat als dein Groses und Du entprechend die Werte umrechnen musst.

Und wenn Du, wie in dem Beispiel, nur die x-Achse selektieren willst (automatich die komplette Hoehe), dann solltest Du auch nur die Wert von xaxis uebergeben.

 

[Cave Johnson]

Ne, das sollte schon stimmen. Die x-Achse hat nen Zeitstempel, die y-Achse einen Wert zwischen 0 und 50.

Das untere Diagramm hat ja dieselbe Skala wie das große, nur die Abmessungen sind kleiner. Ob ich das ganze mit y-Werten angebe oder nicht macht leider auch keinen Unterschied.

 

[Chef de Loup]

Ich glaube ohne Deinen Code kommen wir erstmal nicht weiter.

 

[Cave Johnson]

Der sieht nicht anders aus, als der im Beispiel - abgesehen von den Daten:

Spoiler: Code

<script id="source">
$(function () {
    var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476], [1199746800000, 462], [1199833200000, 448], [1199919600000, 442], [1200006000000, 403], [1200092400000, 204], [1200178800000, 194], [1200265200000, 327], [1200351600000, 374], [1200438000000, 507], [1200524400000, 546], [1200610800000, 482], [1200697200000, 283], [1200783600000, 221], [1200870000000, 483], [1200956400000, 523], [1201042800000, 528], [1201129200000, 483], [1201215600000, 452], [1201302000000, 270], [1201388400000, 222], [1201474800000, 439], [1201561200000, 559], [1201647600000, 521], [1201734000000, 477], [1201820400000, 442], [1201906800000, 252], [1201993200000, 236], [1202079600000, 525], [1202166000000, 477], [1202252400000, 386], [1202338800000, 409], [1202425200000, 408], [1202511600000, 237], [1202598000000, 193], [1202684400000, 357], [1202770800000, 414], [1202857200000, 393], [1202943600000, 353], [1203030000000, 364], [1203116400000, 215], [1203202800000, 214], [1203289200000, 356], [1203375600000, 399], [1203462000000, 334], [1203548400000, 348], [1203634800000, 243], [1203721200000, 126], [1203807600000, 157], [1203894000000, 288]];

    // first correct the timestamps - they are recorded as the daily
    // midnights in UTC+0100, but Flot always displays dates in UTC
    // so we have to add one hour to hit the midnights in the plot
    for (var i = 0; i < d.length; ++i)
      d[i][0] += 60 * 60 * 1000;

    // helper for returning the weekends in a period
    function weekendAreas(axes) {
        var markings = [];
        var d = new Date(axes.xaxis.min);
        // go to the first Saturday
        d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
        d.setUTCSeconds(0);
        d.setUTCMinutes(0);
        d.setUTCHours(0);
        var i = d.getTime();
        do {
            // when we don't set yaxis, the rectangle automatically
            // extends to infinity upwards and downwards
            markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
            i += 7 * 24 * 60 * 60 * 1000;
        } while (i < axes.xaxis.max);

        return markings;
    }
    
    var options = {
        xaxis: { mode: "time", tickLength: 5 },
        selection: { mode: "x" },
        grid: { markings: weekendAreas }
    };
    
    var plot = $.plot($("#placeholder"), [d], options);
    
    var overview = $.plot($("#overview"), [d], {
        series: {
            lines: { show: true, lineWidth: 1 },
            shadowSize: 0
        },
        xaxis: { ticks: [], mode: "time" },
        yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
        selection: { mode: "x" }
    });

    // now connect the two
    
    $("#placeholder").bind("plotselected", function (event, ranges) {
        // do the zooming
        plot = $.plot($("#placeholder"), [d],
                      $.extend(true, {}, options, {
                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                      }));

        // don't fire event on the overview to prevent eternal loop
        overview.setSelection(ranges, true);
    });
    
    $("#overview").bind("plotselected", function (event, ranges) {
        plot.setSelection(ranges);
    });
});
</script>

 

[Chef de Loup]

So, ich habe mir nochmal Deinen ersten Post durchgelesen. Soweit ich das jetzt richtig verstehe funktioniert das normale Selektieren per Maus korrekt (also auch bei der Overview wird es angezeigt)?

Dein Problem ist jetzt 'nur' das Du eine Vorauswahl erstellen willst. Daher jetzt meine Frage: Wo in dem Code soll das dann passieren? Theoretisch muesstest Du ja nur dem grossen Diagramm einmal SetSelection() reinhauen wodurch automatisch das SetSelection()-Event an das kleine Diagramm durchgereicht wird.
Daher bitte den Code mit Deinen bisherige Anpassungen fuer die Vorauswahl.

 

[Cave Johnson]

Ja, genau. Auswahl mit der Maus klappt alles korrekt. Nur bei einer Vorauswahl wird diese nicht im Overview-Chart angezeigt. Die Standard-min- und -max-Grenze erstell ich bspw. so:

var def_min = d[20][0];
var def_max = d[30][0];

var options = {
xaxis: { mode: "time", tickLength: 5, min: def_min, max: def_max },
selection: { mode: "x" },
grid: { markings: weekendAreas }
};​

Im großen Chart wird dieser Bereich angezeigt - und genau diesen Bereich will ich dann auch im Overview-Chart markiert haben. So sollte es also aussehen:

Anhang anzeigen 301672​

Hab das ganze mal hier erstellt: http://jsfiddle.net/cBxk8/

 

[Chef de Loup]

So musste etwas rumprobieren aber sollte jetzt gehen.

http://jsfiddle.net/cBxk8/13/

Im Grunde nur am Ende
overview.setSelection({ xaxis: { from: def_min, to: def_max } }, true);
hinzufuegen.

 

[Cave Johnson]

Fantastisch, ich danke dir

Ich hatte mir gedacht, dass die Vorauswahl innerhalb von "$("#placeholder").bind(...)" nicht möglich ist - da, wo ich es eigentlich probiert hatte. Aber dass man's einfach darunter setzen kann hätte ich nie herausgefunden.