CODEWITHSUNDEEP
jqueryflot
Gunnar
Gunnar

Reputation: 759

jQuery flot chart threshold

I see that the flotchart threshold add-in allows me to chart using a line style with points as shown in this jsfiddle.

Notice that when you toggle the points attribute from false to true, there are points that show up when the line crosses the x-axis at zero. For my scenario, I only want to display points that correspond to an actual data value, not when the line happens to intersect with the x-axis.

points: { show: true }

I read through as much as I could find online on this add-in, but can't seem to find the right parameters to configure. Any pointers are appreciated.

Upvotes: 2

Views: 717

Answers (1)

Raidri
Raidri

Reputation: 17550

You can't achieve this directly because the lines segments which produce the line chart need start and end points where the color changes so the threshold plugin has to add these points.

But you can use a workaround to achieve it: Add two data series (with the same data) to your chart, one with the lines and one with the points (updated fiddle):

var d1 = [];
for (var i = 0; i <= 10; i += 1) {
  d1.push([i, parseInt(Math.random() * 30 - 10)]);
}

$.plot("#placeholder", [{
  data: d1,
  threshold: {
    below: 5,
    color: "rgb(200, 20, 30)"
  },
  lines: {
    show: true,
    fill: true
  },
  points: {
    show: false
  },
  color: "rgb(200, 200, 130)"
}, {
  data: d1,
  threshold: {
    below: 5,
    color: "rgb(200, 20, 30)"
  },
  points: {
    show: true
  },
  color: "rgb(200, 200, 130)"
}]);

Upvotes: 2

Related Questions