# Sort Pens on Time Series Chart Help

**URL:** <https://forum.inductiveautomation.com/t/sort-pens-on-time-series-chart-help/85778>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 15, 2024, 5:47pm UTC](https://forum.inductiveautomation.com/t/sort-pens-on-time-series-chart-help/85778 "2024-02-15T17:47:43Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![tebright1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tebright1/32/87405_2.png) [@tebright1](https://forum.inductiveautomation.com/u/tebright1)\
**Post date:** [February 15, 2024, 5:47pm UTC](https://forum.inductiveautomation.com/t/sort-pens-on-time-series-chart-help/85778/1 "2024-02-15T17:47:43Z")

</div>

I created my pens using a script when the page loads. I was hoping they would be in order of the data's columns order. I tried adding to the columns item (self.props.plots[0].trends[0].columns) to sort, but having no luck. When I add manually and not via script to columns, the order is loading correctly. Any thoughts on this?

Pens

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/e/6eeda3af546a9de035696d5bd64f9d268d108a19.png)

Dataset

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/a/3a1e56ea45bc3ebe764d806f096cf5b0fef2cac4.png)

---

<div class="post-metadata">

**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\
**Post date:** [February 15, 2024, 5:49pm UTC](https://forum.inductiveautomation.com/t/sort-pens-on-time-series-chart-help/85778/2 "2024-02-15T17:49:35Z")

</div>

Show your script.

(I suspect you have dictionary involved somewhere--they don't retain order.)

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [February 15, 2024, 5:52pm UTC](https://forum.inductiveautomation.com/t/sort-pens-on-time-series-chart-help/85778/3 "2024-02-15T17:52:17Z")

</div>

Since this is an "Ignition" question I suggest that you move it to that section rather than "General Discussion". Also add the Perspective or Vision tag when it's application specific.

---

<div class="post-metadata">

**Author:** ![tebright1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tebright1/32/87405_2.png) [@tebright1](https://forum.inductiveautomation.com/u/tebright1)\
**Post date:** [February 15, 2024, 6:33pm UTC](https://forum.inductiveautomation.com/t/sort-pens-on-time-series-chart-help/85778/5 "2024-02-15T18:33:53Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0d9d6352e2172cb0c72f86fef19d023be9eb85e1.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/5/d5a82ca01c0fed43a692b54008549b8e8ebade44.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/5/a5a66041b785ea9554de9b40f3d65eea09a4ffc1.png)

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [February 15, 2024, 7:40pm UTC](https://forum.inductiveautomation.com/t/sort-pens-on-time-series-chart-help/85778/6 "2024-02-15T19:40:42Z")

</div>

First off post code, not pictures of code, with sensitive parts redacted as necessary:

> [@Wiki - how to post code on this forum](https://forum.inductiveautomation.com/t/wiki-how-to-post-code-on-this-forum/77831):
>
> This thread is intended as a short help file for all those struggling to post formatted code on the forum. Code block formatting Posting formatted code on the forum (and most others) is as simple as selecting the code and pressing the \</\> button. It works the same as applying Bold or Italic styles to your document. It preserves indentation and applies syntax highlighting. [How to post code] Note that all the \</\> button does is add three backticks ``` on the line before the code block and anot…

Moving onto the ordering problem, you are iterating through the response from `browseTags`, so you are likely at the mercy of whatever order that function returns the tags in.

If you just want alphabetical ordering you can make use of `operator.itemgetter` to sort the resulting list before returning it. Something along the lines of

```python
data = sorted(data, key=operator.itemgetter('alias'))

```

right before assigning the data to `self.custom.data` should work.

If you want specific ordering you'll probably have to do something like use a separate list that has the tag names in the preferred order, that you can then compare against and move items in the data variable to match positions/order.

---

<div class="post-metadata">

**Author:** ![tebright1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tebright1/32/87405_2.png) [@tebright1](https://forum.inductiveautomation.com/u/tebright1)\
**Post date:** [February 15, 2024, 8:03pm UTC](https://forum.inductiveautomation.com/t/sort-pens-on-time-series-chart-help/85778/7 "2024-02-15T20:03:17Z")

</div>

Thanks for the heads up on posting.

When I run the script in the Script Console, the order is correct. Hence the use of 'ASC' to sort. The order of the data is correct in the binding (column order). Visually it is incorrect.

This is a set device list. So it was already alphabetized. Just seems weird the pen order changes in the legend.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/1/51e770b3da0ba09f156d750b5ed4cefdd41f66be.png)

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [February 15, 2024, 8:39pm UTC](https://forum.inductiveautomation.com/t/sort-pens-on-time-series-chart-help/85778/8 "2024-02-15T20:39:00Z")

</div>

> [@tebright1](#):
>
> Hence the use of 'ASC' to sort

Missed that when I was reading through.

That list is sorted by the actual tag path, are you sure that your tag aliases line up with the order of your sensor Ids? (ie, sensors 4-7 are Fluid 1-4, sensors8-11 are gas 1-4, etc). Just trying to think of anything that might throw off the order.

It could also just be an issue with how the legend is created internally and you might not be able to control it.

---

<div class="post-metadata">

**Author:** ![tebright1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tebright1/32/87405_2.png) [@tebright1](https://forum.inductiveautomation.com/u/tebright1)\
**Post date:** [February 15, 2024, 9:23pm UTC](https://forum.inductiveautomation.com/t/sort-pens-on-time-series-chart-help/85778/9 "2024-02-15T21:23:33Z")

</div>

That is what I am worried about. I just want to sort the legend. It looks like it is partially creating it in the correct order. The stuff in the middle is getting zippered together it seems.

The tag order is what we are trying to use as it groups the sensors. At some point the names (Temp1, etc) will change. So the key is to sort them by type. So alphabetical is not necessarily the goal.

At the end of the day the legend isn't super important. But from a visual standpoint, it looks wrong to me. I feel like this should be something simple to sort.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/4/2402b814853dc6e5626187bed695612c85358704.png)
