Úprava zobrazení ve FlotChart grafech

4. 7. 2014 07:49:46

Zdravím, mám tento typ grafu. Dne níže uvedeného obrázku bych potřeboval přemístit jednotlivé barevné obdelníky vedle jednotlivých názvů.

11852

Připojené JS knihovny jsou dvě jquery.flot.js, jquery.js a examples.css

Byl někdo tak laskavý a poradit, co kde upravit? Díky

4. 7. 2014 07:49:46

https://webtrh.cz/diskuse/uprava-zobrazeni-ve-flotchart-grafech/#reply1037088

Pavel Horáček

(19 hodnocení)

4. 7. 2014 08:09:33

Bude to chtít upravu i v html co si tak pamatuji tyhle grafy. Tam se bude muset smazat hodnota ktera vypisuje k obedlnikum ty zeme. A zbytek v css ale takhle ti nikdo moc neporadi. Ty obdelniky maji nejake class="" to musis najit v css a upravit napozicovani. Doporucuji firebug aj. a zkouset primo v prohlizeci.

4. 7. 2014 08:09:33

https://webtrh.cz/diskuse/uprava-zobrazeni-ve-flotchart-grafech/#reply1037087

Ondřej Váško

4. 7. 2014 09:45:53

Napsal HorysX;1103789
Bude to chtít upravu i v html co si tak pamatuji tyhle grafy. Tam se bude muset smazat hodnota ktera vypisuje k obedlnikum ty zeme. A zbytek v css ale takhle ti nikdo moc neporadi. Ty obdelniky maji nejake class="" to musis najit v css a upravit napozicovani. Doporucuji firebug aj. a zkouset primo v prohlizeci.

Teď řeším problém, když ve firebugu vidím hodnoty např. top a left u pozicování, že to nemůžu dohledat nikde v JS knihovně ani CSS. Asi parametricky to je brané z nějaké šířky. Nedaří se to najít.

4. 7. 2014 09:45:53

https://webtrh.cz/diskuse/uprava-zobrazeni-ve-flotchart-grafech/#reply1037086

Pavel Horáček

(19 hodnocení)

4. 7. 2014 10:17:41

Pokud je nejaka hodnota (treba top a left) pod tridou element.style jsou tyto hodnoty brane z JS nebo jsou primo vepsany do HTML. Jestli to je nekde online hod link, zkusim se na to podivat.

4. 7. 2014 10:17:41

https://webtrh.cz/diskuse/uprava-zobrazeni-ve-flotchart-grafech/#reply1037085

Ondřej Váško

4. 7. 2014 10:31:58

Napsal HorysX;1103812
Pokud je nejaka hodnota (treba top a left) pod tridou element.style jsou tyto hodnoty brane z JS nebo jsou primo vepsany do HTML. Jestli to je nekde online hod link, zkusim se na to podivat.

Odkaz.

Já jsem to teď zkoušel, že hodnoty (top, left) přepíšu natvrdo. Ale to není moc dobré řešení. Díky za pomoc.

4. 7. 2014 10:31:58

https://webtrh.cz/diskuse/uprava-zobrazeni-ve-flotchart-grafech/#reply1037084

sqrt

5. 7. 2014 04:54:28

Třeba takhle: 11866.

edit: Nahrál jsem upravenou verzi, předchozí nebyla úplně v pořádku

5. 7. 2014 04:54:28

https://webtrh.cz/diskuse/uprava-zobrazeni-ve-flotchart-grafech/#reply1037083

Ondřej Váško

5. 7. 2014 14:15:15

Napsal sqrt;1104056
Třeba takhle: 11866.

edit: Nahrál jsem upravenou verzi, předchozí nebyla úplně v pořádku

Bezva, otestuju co nejdříve.

5. 7. 2014 14:15:15

https://webtrh.cz/diskuse/uprava-zobrazeni-ve-flotchart-grafech/#reply1037082

Ondřej Váško

8. 7. 2014 12:54:41

Napsal ondra15;1104117
Bezva, otestuju co nejdříve.

Tak jsem se pustil do úprav dle svých potřeb a narazil jsem na 3 problémy. Nejprve ukážu kód, v grafu jsou jsou dvě osy - viz obrazek.

function data() {
        var i = 0;
        $.each(datasets, function(key, val) {
            val.color = i;
            ++i;
        });
    }

function LFormatter(v, axis) {
        return v.toFixed(axis.tickDecimals) +"$LJEDN";
    }
    function RFormatter(v, axis) {
        return v.toFixed(axis.tickDecimals) +"$RJEDN";
    }

// insert checkboxes
    var choiceContainer = $("#Lchoices");
    $.each(datasets, function(key, val) {
        choiceContainer.append(.join(' '));
    });
    choiceContainer.find("input").click(plotAccordingToChoices);

var options = {
                legend: {show:0},
                xaxis: { mode:"time" },
                xaxes: [],
                yaxes: ,
                selection: { mode: "x" },
        };

function plotAccordingToChoices() {
        var data = [];
        var dtL = [];
        var dtR = [];

choiceContainer.find("input:checked").each(function () {
            var key = $(this).attr("name");
            if (key && datasets)
            {
              data.push(datasets);
              if (datasets.yaxis == 2)
                dtR.push(datasets);
              else
                dtL.push(datasets);
            }

});

if (dtL.length > 0)
            $.plot($("#legendL"), dtL, {
                lines: {show:0},
                legend: {margin:0,show:1,position: "ne"},
                xaxis: { mode:"time",show:0 },
                yaxes: ,
                grid: {borderWidth:0},
            });
          var plot = $.plot($("#graphholder"), data, options);
          var miniature = $.plot($("#miniature"), data, {
                legend: {show:0},
                series: {
                  lines: { show: true, lineWidth: 1 },
                  shadowSize: 0,
                },
                xaxis: { mode:"time", ticks: 2 },
                yaxes: ,
                selection: { mode: "x" }
            });
        if (dtR.length > 0)
            $.plot($("#legendR"), dtR, {
                lines: {show:0},
                legend: {margin:-4,show:1,position: "nw"},
                xaxis: { mode:"time",show:0 },
                yaxes: ,
                grid: {borderWidth:0},
            });
    // now connect the two

$("#graphholder").bind("plotselected", function (event, ranges) {
        // clamp the zooming to prevent eternal zoom
        if (ranges.xaxis.to - ranges.xaxis.from < 0.00001)
            ranges.xaxis.to = ranges.xaxis.from + 0.00001;

// do the zooming
        plot = $.plot($("#graphholder"), data,
                      $.extend(true, {}, options, {
                          xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
                      })
	);

// don't fire event on the overview to prevent eternal loop
        miniature.setSelection(ranges, true);
    });

$("#miniature").bind("plotselected", function (event, ranges) {
        plot.setSelection(ranges);
    });

}
     function events() {

// Switch datasets
        function selection() {
            refresh();
            $('#Lchoices :checkbox').each(function() {
                var box = $(this);
                if (!box.is(':checked'))
                    $('.legend tr')
                        .eq(box.index() > 1 ? (box.index() - 1) / 3 : 0)
                        .before('<tr><td class="ghost"></td></td>');
            });
        }

// Hook
        $(document).on('change', '#choices :checkbox', selection);
    }
    plotAccordingToChoices();
    events();
});

1.) Pokud obalím

funkcí render(), tak se graf nenačte.

2.) Pokud deaktivuji checkbox (např. druhý ze čtyř checkboxů), tak zmizí poslední barevný obdelník, ne druhý obdelník. To nevím, kde hledat chybu.

3.) Na obrázku je vidět, že barevné obdelníky z pravé osy jsou vpravo (překrývající Zoom). Ty bych potřeboval (asi nejlépe) připojit k těm nalevo. Ale ne pomocí CSS.

Obrázek: 11889

Kdo by dokázal poradit? Předem děkuji

8. 7. 2014 12:54:41

https://webtrh.cz/diskuse/uprava-zobrazeni-ve-flotchart-grafech/#reply1037081

sqrt

8. 7. 2014 13:47:01

Momentálně nemám čas, večer se na to můžu podívat. Zatím jenom zběžně:

- Hlídej si zarovnání kódu, budeš se v tom líp orientovat nejen ty, ale i ostatní.

- Používej smysluplné názvy, například "dtL" nikomu nic neřekne(po půl roce už ani tobě).

- Při spojování řetězců dávej "+" na konec řádku(nesouvisí s funkčností, spíš nepsané pravidlo).

- yaxes: ,

Tohle jednak není validní zápis a jednak není jasné, kde ty konstanty vůbec bereš(viz další bod).

- Dávej sem radši celý kód. Chyba bývá často jinde, než by ses na první pohled domníval.

- Pokud hodláš podobně čarovat u každého grafu, pak jsi nejspíš zvolil špatnou knihovnu a chvilkou hledání něčeho vhodnějšího si můžeš ušetřit plno nervů.

8. 7. 2014 13:47:01

https://webtrh.cz/diskuse/uprava-zobrazeni-ve-flotchart-grafech/#reply1037080

Pro odpověď se přihlašte.

Přihlásit