CODEWITHSUNDEEP
jqueryhtmlflot
krish
krish

Reputation: 90

flot 0.8.1 zoomin not draw line even x-axis and y-axis data change

I have time series on x axis and some power watts info at y axis. The first time both the placeholder and overview graph display fine. When I select area of overview graph value change in placeholder graph but it nit shows or draw any line.

JavaScript code:

function graph(jsonarray) {
    var options = {
        yaxis: {
            /* color:"#00FF00",
                  tickColor:"#FF0000",font: "sans 9px",reserveSpace: true,
                  axisLabel: "Watts",
            axisLabelUseCanvas: true*/
        },
        xaxis: {
            mode: "time",
            timeformat: "%H:%M:%S",
            minTickSize: [1, "second"]
        },
        lines: {
            show: true
        },
        points: {
            show: false,
            hoverable: true
        },
        grid: {
            show: true,
            hoverable: true,
            clickable: true,
            backgroundColor: {
                colors: ["#fff", "#eee"]
            }
        },
        legend: {
            show: false,
            type: "canvas",
            position: "se",
            backgroundColor: "#ff4",
            backgroundOpacity: 0.35
        },
        selection: {
            mode: "xy"
        }
    }
    var d2 = JSON.stringify(jsonarray);
    var d1 = eval(jsonarray);
    globalJson = d1;
    var data = [];
    for (var i = 0; i < d1.length; i++) {
        var temp = (d1[i].datetime.time) + 19800000; //GMT 5:30 is added to get actul time
        data.push([temp, d1[i].watts]);
    }
    var plot = $.plot($("#placeholder1"), [data], options);
    var overviewoptions = {
        legend: {
            show: false
        },
        series: {
            lines: {
                show: true,
                lineWidth: 1
            },
            shadowSize: 0
        },
        yaxis: {},
        xaxis: {
            mode: "time",
            timeformat: "%H:%M:%S",
            minTickSize: [1, "second"]
        },
        grid: {
            color: "#999"
        },
        selection: {
            mode: "xy"
        }
    }
    var overview = $.plot("#overview", [data], overviewoptions);
    // now connect the two
    $("#placeholder1").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("#placeholder1", trimData(eval(jsonarray), ranges.xaxis.from, ranges.xaxis.to),
        $.extend(true, {}, overviewoptions, {
            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);
    });
    return true;
}

two output image is below. (sorry could not attached (because I don't have 10 reputation). I could not find any clue why this happen when x and y axis value change but line is not drawn.

Upvotes: 1

Views: 245

Answers (1)

DNS
DNS

Reputation: 38189

Your original data is provided as an array like this:

[[time, watts], ...]

If your comment is accurate, then the output of trimData appears to be completely different. An array of objects would be interpreted as separate series, which would produce an empty result if you tried to plot them as a line.

You should either fix trimData to match the original format or skip it entirely, since Flot will only show those points that appear within the range. The only reason to trim down the data is if you have a large amount, and are concerned about performance.

Upvotes: 1

Related Questions