Flot: Consistent label colors throughout screen with multiple stacked bar charts

Question

Here's my JSFIDDLE

I need the dynamic labels to have the same color if the same label is found in another chart, and if possible to have the same order in the stack bar, throughout all charts.

e.g if you look at the color purple it has 3 labels against it: 084, 080, 00. It should be only 084/080/00 against purple. These should reflect throughout all charts within a screen.

$.plot($("#placeholder"), chartData, chartOptions);

Answer 1

You can build a list of labels and used colors by looping through your chartData arrays, see this fiddle for a working example:

var colors = {
    _count: 1
};
function distributeColors(data) {
    for (var i = 0; i < data.length; i++) {
        var label = data[i].label;
        if (!colors[label]) {
            colors[label] = colors._count++;
        }
        data[i].color = colors[label];
    }
}
distributeColors(chartData);
distributeColors(chartData2);
distributeColors(chartData3);