How can I make dropdowns more tied to the graphs that they control?

Question

(question copied from https://graphicdesign.stackexchange.com/questions/162197/need-help-with-a-color-coded-design since commenter there suggested this is the appropriate forum)

I am but a simple BA, and I am currently working on adding functionality to an existing web application. I am told there is no budget for a UI designer! So I had to design this myself.

On this page, the user will make selections in both dropdowns, and then click Calculate. That will generate the charts based on her selections.
Here's a conceptual mock-up. (I changed content and colors to protect proprietary information).

Now, some charts are dependent on the first drodpown only, some are dependent on the second dropdown only, and some are dependent on both. We would like to visually indicate which charts are which. Our solution was with color coded-badges in each chart that indicate the dropdown selection(s) that contributed to that chart.
In this mock-up, the first chart is dependent on both dropdowns, but the 2nd chart is dependent only on the 2nd dropdown.
My difficulty is how to tie the dropdowns to the badges. I attempted to do that by encasing the label above the dropdown in the appropriately colored shape. But I am unhappy with the results, and I believe that it is a non-standard design practice.

How else can I tie the first dropdown to the dark blue badges, and the 2nd dropdown to the purple badges?

Answer 1

You mentioned the fact that this design concept applies to this page (hinting that there could be many other pages with different layout), so the first thing I would consider is whether this design pattern is going to work for pages with more complex input combinations or not. It is unlikely to, and in the event that you have to design other pages in the future using the same interface components, I would advise you strongly against trying to make something work for just one page.

However, given that your question is confined to this page only, I can outline a couple of different strategies for your consideration.

1. Since there are only two input fields, I would actually just put the relevant input field(s) in the charts (or directly above/below them) so that there is no confusing about which input options apply to which charts. This is the clearest way, and involves no additional changes. Of course, the user may not realise that updating one input field changes the display in another chart, but this problem is trivial once they have used it, and it's not like you are offering an alternate way to interact with the charts anyway.

2. Since there are only two input fields, you can also rename the charts so that the values being calculated are distinct and clear, and then create some label below each input field that contains the labels of the charts to show that the input field affects each chart. I still think this is a better option than using the badges/chips for the same reason.

3. If you insist on using the badges and want to work out how to provide the best visual cue to the user, then I would suggest that you shorten the text and have the badge or chip only indicate the actual value selected in the graph, and use the same colour on the label as you have to make it easier to scan and match rather than enclosing a very long string in what is supposed to be a component used for short length text normally.