FlotChart do not work zooming mode

Question

I have following example: http://jsfiddle.net/ondra15/7mb8K/1/.
I want to have together two example (multiple axes and zooming). Example zooming do not work correct - if I indicate some data in chart for zooming - do not work. Nothing happens.

Original Zooming (correct) solution works here http://www.flotcharts.org/flot/examples/zooming/index.html

Can any some idea for my code? Thanks

code

I'm getting ["Uncaught TypeError: object is not a function"](http://stackoverflow.com/questions/4026891/javascript-uncaught-typeerror-object-is-not-a-function-associativity-question) in Chrome console. Thought it might be bacause no ';' at end of data.push({label: this.id, data: []}) - but does not seem to make difference. — James P, Jul 14 '14 at 15:32
I try this change and does not help it. Plese, next ideas? Thanks — ondra15, Jul 14 '14 at 18:44
The offending line of code is `data(ranges.xaxis.from, ranges.xaxis.to)`; what are you attempting to do there? Subset the array between two dates? That's not even close to functioning javascript. — Mark, Jul 14 '14 at 20:44

score 0 · Answer 1 · answered Jul 15 '14 at 16:49

Hi I managed to get it working using code from an example I found here. I will update your jsfiddle too:

<script type="text/javascript">
            var datasets = { ... };

            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[this.id]);
                            }
                            else {
                                data.push({ label: this.id, data: [] })
                            }
                        }
                    );
                }

                $.plot($("#placeholder"), data, {
                    yaxes: [{ min: 0 }, { position: "right" }],
                    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); });
            }

            plotByChoice(true);

            // Create the overview plot

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

            $("#placeholder").bind("plotselected", function (event, ranges) {

                var options = {
                    series: {
                        lines: { show: true },
                        points: { show: true }
                    },
                    legend: { noColumns: 2 },
                    xaxis: { tickDecimals: 0 },
                    yaxis: { min: 0 },
                    selection: { mode: "x" }
                };

                var placeholder = $("#placeholder");
                placeholder.bind("plotselected", function (event, ranges) {
                    $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));

                    plot = $.plot(placeholder, data,
                                  $.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>

FlotChart do not work zooming mode

1 Answers1