JQuery grafy, nefungující Zoom

15. 7. 2014 07:07:58

Zdravím, mám vykreslování grafů pomocí knihoven jQuery. V následujícím kódu jsou checkboxy, které pokud odškrtnu, tak mi křivka zmizí z hlavního okna (levé) a Zoom okna (pravé). Problém je, pokud chci provést Zoom levého okna (označím si myší nějakou část dat), jako je to v následujícím případě, tak se v mé funkci se Zoom neprovede.

Našel by se zdě někdo zkušenější, kdo by dokázal pomoct?

Předem děkuji

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <script language="javascript" type="text/javascript" src="/prac3/main.css"></script>
    <script language="javascript" type="text/javascript" src="/prac3/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="/prac3/jquery.flot.js"></script>
    <script language="javascript" type="text/javascript" src="/prac3/jquery.flot.selection.js"></script>
 </head>
    <body>
    <div id="header">
            <h2>
                Toggling Serie
            </h2>
        </div>
        <div id="content">
            <div id="legend" style="width:300px;height:300px; "></div>
	      <div id="placeholder" style="width:600px;height:300px;float:left;"></div>
	      <div id="overview" class="demo-placeholder" style="float:right;width:360px; height:225px; border: 2px solid red"></div>
	<script type="text/javascript">
    var datasets = {
        "USA": {
            label: "USA",
            data: , , , , , , , , , , , , , , , , , , ]
        },        
        "Russia": {
            label: "Russia",
            data: , , , , , , , , , , , , , , , , , ]
        },
        "UK": {
            label: "UK",
            data: , , , , , , , , , , , , , , , , , , ]
        },
        "Germany": {
            label: "Germany",
            data: , , , , , , , , , , , , , , , , , , ]
        },
        "Denmark": {
            label: "Denmark",
            data: , , , , , , , , , , , , , , , , , , ]
        },
        "Sweden": {
            label: "Sweden",
            data: , , , , , , , , , , , , , , , , , , ], yaxis:2
        },
        "Norway": {
            label: "Norway",
            data: , , , , , , , , , , , , , , , , , , ], yaxis:2
        }, 
        "Czech_republic": {
            label: "Czech_republic",
            data: , , , , , , , , , , , , , , , , , , ]
        },
        "Slovak_republic": {
            label: "Slovak_republic",
            data: , , , , , , , , , , , , , , , , , , ]
        },
        "Austia_republic": {
            label: "Austia_republic",
            data: , , , , , , , , , , , , , , , , , , ]
        }
       
    };

data = null;
function plotByChoice(doAll)
{
    data = [];
    if (doAll != null)
    {
        $.each(datasets, function(key, val) {
            data.push(val);
        });
    }   
    else
    {
        $('#legend .legendCB').each(
            function(){
                if (this.checked)
                {         
                     data.push(datasets);
                }
                else
                {
                     data.push({label: this.id, data: []});
                }        
            }
        );
    }        
    
    $.plot($("#placeholder"), data, {
        yaxes: ,
        xaxis: { tickDecimals: 0 },
        legend: {
            container: legend,
            labelFormatter: function (label, series) {
                var cb = '<input class="legendCB" type="checkbox" ';
                if (series.data.length > 0){
                    cb += 'checked="true" ';
                }
                cb += 'id="'+label+'" /> ';
                cb += label;      
                return cb;
             }
        }, selection: { mode: "x"}
    });
    
    $('#legend').find("input").click(function(){setTimeout(plotByChoice,100);});

// Create the overview plot

var overview = $.plot("#overview", data, {
			legend: {
				show: false
			},
			series: {
				lines: {
					show: true,
					lineWidth: 1
				},
				shadowSize: 0
			},
			xaxis: {
				ticks: 4
			},
			yaxes: ,
			grid: {
				color: "#999"
			},
			selection: {
				mode: "x"
			}
		});

// now connect the two

$("#placeholder").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;
			}

if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
				ranges.yaxis.to = ranges.yaxis.from + 0.00001;
			}

// do the zooming

plot = $.plot("#placeholder", data,
				$.extend(true, {}, options, {
					xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
					yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.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);
	      });
    }

plotByChoice(true);

</script>
            <p>
                This eeexample shows military budgets for various countries in constant (2005) million US dollars (source: <a href="http://www.sipri.org/">SIPRI</a>).
            </p>
            <p>
                Since all data is available client-side, it's pretty easy to make the plot interactive. Try turning countries on and off with the checkboxes next to the plot.
            </p>
        </div>
        <div id="footer">
            Copyright © 2007 - 2013 IOLA and Ole Laursen
        </div>
 </body>
</html>

15. 7. 2014 07:07:58