CODEWITHSUNDEEP
javascriptplotflot
shorif2000
shorif2000

Reputation: 2654

flot how to use threshold and have curvy lines?

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;
    }

Upvotes: 0

Views: 450

Answers (1)

Raidri
Raidri

Reputation: 17550

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.

Upvotes: 1

Related Questions