flot how to use threshold and have curvy lines?

Question

How can I use threshold plugin and have curvy lines on a time graph? This online fiddle I found, not sure how it is made

var datasets = [{"points":{"show":false},"lines":{"show":true},"curvedLines":{"apply":true,"tension":1},"animator":{"start":0,"steps":14,"duration":3000,"direction":"right"},"data":[[1455851700000,99.65],[1455854400000,99.68],[1455858000000,99.73],[1455861600000,99.71],[1455865200000,99.7],[1455868800000,99.68],[1455872400000,99.65],[1455872400000,99.65],[1455909428571.4285,99.65],[1455912000000,99.7],[1455915600000,99.68],[1455919200000,99.72],[1455922800000,99.72]]}];

var options = {"xaxis":{"mode":"time","timeformat":"%H:%M <br> %d %b ","tickSize":[3,"hour"]},"yaxes":{"position":"left","max":100,"min":98},"series":{"lines":{"show":true,"lineWidth":3},"curvedLines":{"active":false},"threshold":[{"below":99.65,"color":"rgb(204, 0, 0)"}]},"colors":["#008C00"],"legend":{"show":false},"grid":{"clickable":true,"hoverable":true}};

$.plotAnimator($('#CAGraph'), datasets, options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://rawgit.com/flot/flot/master/jquery.flot.js"></script>
<script src="https://rawgit.com/Codicode/flotanimator/master/jquery.flot.animator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.stack.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.threshold.js"></script>

<div id="choices_CAGraph"></div>
<div id="CAGraph" style="width:910px;height:400px"></div>
<div id=tooltip class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>

Also How can I make the animation smooth?

UPDATE

I have tried to add null check so the yaxes does not got from 0 to 120, but adoing this makes the line not curvy any more.

for (var i = 0; i < chartcount; i++) {
        var newData = plot.getData()[i].datapoints.points;
        datasets[i].data = [];
        for (var j = 0; j < newData.length; j = j + 2) {
            if(newData[j] != null)
                datasets[i].data.push([newData[j], newData[j + 1]]);
        }
        datasets[i].animator.steps = (newData.length / 2) - 1;
    }

This question is somewhat unclear. In principle it is a combination of your two previous questions [here](http://stackoverflow.com/questions/35268446/flot-toggle-series-with-threshold-and-curved-lines-plugin) and [here](http://stackoverflow.com/questions/35259594/flot-multiple-line-graph-animation), right? If you would make that clear, the question would be easier to understand. — Raidri, Feb 20 '16 at 10:13
The previous question i was working on multiple lines. this one is just 1 line. I am trying to do same thing on 1 time line — shorif2000, Feb 20 '16 at 13:02

score 1 · Accepted Answer · edited May 23 '17 at 11:59

1

Take the solution to your question here and add the threshold plugin (after the curvedLines plugin has run):

options.series.threshold = [{
            below: 97,
            color: "red"
        }];

See this updated fiddle for the full package. The animation also gets smoother automatically because the curvedLines plugin increases the number of data points and steps in the animation.

edited May 23 '17 at 11:59

Community

1
1

answered Feb 20 '16 at 10:11

Raidri

17,258
9
62
65

I have tested your code and it works well for points that have big difference between them. however when the datapoints are close together the curve turns into a straight line. I have updated the code above – shorif2000 Feb 20 '16 at 12:39
1

In you updated code you do not load the curvedLines plugin and you have set `curvedLines: { active: false }`. But even if you activate the plugin, you get the some problems as before, since you try to use curvedLines and animator together which does not work. Use them in two separate steps like in my fiddle. Here an [updated fiddle](https://jsfiddle.net/L0vtrgc2/8/) with your new data. – Raidri Feb 20 '16 at 18:13

flot how to use threshold and have curvy lines?

1 Answers1