flot change data points color and line in a series

Question

I have a time series graph. I am plotting 1 line over a period of time. depending on what month it is if the data point is above a certain figure i would like it to be green and below is red.

function raw(plot, ctx) {
          var colors = ["#cc4444", "#ff0000", "#0000ff", "#00ff00"];
          var radius = [10, 20, 30, 40];
          console.log(networkTargets);

        var data = plot.getData();
        var axes = plot.getAxes();
        var offset = plot.getPlotOffset();
        console.log(data);
        console.log(axes);
        console.log(offset);
        for (var i = 0; i < data.length; i++) {
            var series = data[i];
            console.log(series);    
            for (var j = 0; j < series.data.length; j++) {


               var color = colors[j];
                var d = (series.data[j]);
                var x = offset.left + axes.xaxis.p2c(d[0]);
                var y = offset.top + axes.yaxis.p2c(d[1]);
                var r = radius[j];                
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.arc(x,y,r,0,Math.PI*2,true);
                ctx.closePath();            
                ctx.fillStyle = color;
                ctx.fill();
            }    
        }
      };  

Here is my fiddle.
Second fiddle with threshold plugin.

What I would like to do is compare current timestamp of each data point match it to a time stamp that I have which will be in networkTargets and if the data point value is greater than networkTargets value then color it green.

Answer 1

Since you have data for multiple month and want different thresholds for each month, the best way is to split your data into one data series per month and apply the different thresholds there (see this updated fiddle):

  // data for dec 2015
  var data_ajax1 = {
    "lines": {
      "show": true,
      "lineWidth": 3
    },
    "points": {
      "show": false
    },
    "threshold": {
      "below": 99.50,
      "color": "rgb(204, 0, 0)"
    },
    "data": [{
      "0": 1451520000000,
      "1": 99.44
    }, ..., {
      "0": 1451602800000,
      "1": 99.49
    }]
  };

  // data for jan 2016
  var data_ajax2 = {
    "lines": {
      "show": true,
      "lineWidth": 3
    },
    "points": {
      "show": false
    },
    "threshold": {
      "below": 99.40,
      "color": "rgb(204, 0, 0)"
    },
    "data": [{
      "0": 1451602800000,
      "1": 99.49
    }, ..., {
      "0": 1452038400000,
      "1": 99.39
    }]
  };

  $.plot($('#chart1'), [data_ajax1, data_ajax2], options);

The downside is, that the Flot Animator doesn't support multiple data series out of the box. When you really need it, you may have to customize one of the two plug-ins.