CODEWITHSUNDEEP
javascriptcolorsserieslinechart
phenomenia
phenomenia

Reputation: 109

FlotChart - how to assign a color to a particular series in a linechart?

I use a flotcharts JS linechart to display the value of different stock tradepositions. The user can show/hide each trade on the chart via a checkbox above the chart. By default, linecharts use default or predefined colors from me in the order the series are created. So the first line gets color1, the second color 2 etc. This is not very good for this situation, because when the user hides the line for trade one, the previously trade two becomes the new "first line" and also changes its color from color 2 to color 1. As the data represented by the line are still the same this behaviour is very irritating. To solve this I would like to assign a color to a series by it's name, id or similar rather than by the order it was created on the chart, as this identifier stays the same even after adding/removing other lines from the chart.

How can I do this?

Currently I use a code like this to set the color for the first, second etc line.

var datatoprint=[];
for(var key in arrTradeSymbols){
    if (arrTradeSymbols[key].visible==true){
        datatoprint.push(arrTradeSymbols[key].data);
        jQuery("#symb_"+arrTradeSymbols[key].tradeid).prop("checked",true);
    }
}

var plot = $.plot(jQuery("#kt_flotcharts_pl"), datatoprint, {
legend: {
      position: "nw",
    },
    series: {
        lines: {
            show: true,
            lineWidth: 2,
            fill: false,
        },
        points: {
            show: true,
            radius: 3,
            lineWidth: 1,
            color: '#00ff00'
        },
        shadowSize: 2
    },
    grid: {
        hoverable: true,
        clickable: true,
        tickColor: "#eee",
        borderColor: "#eee",
        borderWidth: 1
    },
    colors: ['#0083d0', '#1dc9b7'],
    xaxis: {
        mode: "time",
        tickSize: [5, "day"],
        tickLength: 0,
        tickColor: "#eee",
    },
    yaxis: {
        ticks: 11,
        tickDecimals: 0,
        tickColor: "#eee",
    }
});

Upvotes: 0

Views: 93

Answers (1)

Joschi
Joschi

Reputation: 2974

That's easy: just supply an array of objects with the color along with the data instead of only the data as an array.

Example snippet:

var arrTradeSymbols = {
  trade1: {
    color: "red",
    data: [
      [1, 3],
      [2, 4],
      [3.5, 3.14]
    ]
  },
  trade2: {
    color: "green",
    data: [
      [1, 4],
      [2, 11.01],
      [3.5, 5.14]
    ]
  }
};

function run() {
  var datatoprint = [];
  for (var key in arrTradeSymbols) {
    if ($("#" + key).is(":checked")) {
      datatoprint.push(arrTradeSymbols[key]);
    }
  }

  $.plot($("#kt_flotcharts_pl"), datatoprint, {
    legend: {
      position: "nw",
    },
    series: {
      lines: {
        show: true,
        lineWidth: 2,
        fill: false
      },
      points: {
        show: true,
        radius: 3,
        lineWidth: 1
      },
      shadowSize: 2
    },
    grid: {
      hoverable: true,
      clickable: true,
      tickColor: "#eee",
      borderColor: "#eee",
      borderWidth: 1
    },
    xaxis: {
      ticks: 5
    },
    yaxis: {
      ticks: 11,
      tickDecimals: 0,
      tickColor: "#eee",
    }
  });
}

run();

$("input").on("input", run);
#kt_flotcharts_pl {
  width: 400px;
  height: 200px;
  border: 1px solid black;
}
label {
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>


<label><input type="checkbox" id="trade1" checked> Red</label>
<label><input type="checkbox" id="trade2" checked> Green</label>
<div id="kt_flotcharts_pl"></div>

Upvotes: 1

Related Questions