CODEWITHSUNDEEP
javascriptjqueryflot
Brosto
Brosto

Reputation: 4565

flot 2nd yaxis line not drawing correctly

I'm having trouble getting a 2nd y axis line graph to display properly. As you can see, I'm ending up with lines all over the place, when I expect just a line moving up and down with each time point. Can anyone point out my error?

http://jsfiddle.net/jguypztt/

var options = {
    xaxis: {
        mode: "time",
        twelveHourClock: true,
        timezone: "browser"
    },
    yaxes: [
        //yaxis 1
        {
            position: "left",
            clolor: "black",
            axisLabel: "Count",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial'
        }, {
            position: "right",
            clolor: "black",
            axisLabel: "Process Time (ms)",
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial'
        }
    ],
    colors: ["rgb(87, 136, 156)"],
    grid: {
        hoverable: true,
        clickable: true,
        borderWidth: 0,
        borderColor: "#efefef"
    },
    selection: {
        mode: "x"
    }
};

plot = $.plot($("#updating-chart"), 
              [{ data: data1, label: "Total", bars: { show: true, barWidth: 30 * 60000 } }, 
               { data: data2, label: "Process Time", yaxis: 2, lines: { show: true }, color: "#FF0000" }],             options);

enter image description here

Upvotes: 0

Views: 169

Answers (1)

potatopeelings
potatopeelings

Reputation: 41065

Just sort data2

data2.sort(function(a, b) { return a[0] - b[0]; });

Fiddle - http://jsfiddle.net/vw5kjutg/

Upvotes: 2

Related Questions