# Looking for a Ribbon Chart

**URL:** <https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007>\
**Category:** Ignition\
**Created:** [October 10, 2019, 7:19pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007 "2019-10-10T19:19:05Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![ahardin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ahardin/32/66398_2.png) [@ahardin](https://forum.inductiveautomation.com/u/ahardin)\
**Post date:** [October 10, 2019, 7:19pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/1 "2019-10-10T19:19:05Z")

</div>

I don’t see a Ribbon Chart in the component list or as a chart type. Has anyone found a way to create one? I’m looking for something like in the screenshot to visualize the amount of time a machine has been in a particular status during a shift.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/f/fd67bd4689dc02f5272f36051eadbe5678dafc95.png)

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [October 10, 2019, 7:30pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/2 "2019-10-10T19:30:02Z")

</div>

That is a status chart in the Ignition Components palette. [Status Chart](https://docs.inductiveautomation.com/display/DOC79/Status+Chart)

---

<div class="post-metadata">

**Author:** ![ahardin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ahardin/32/66398_2.png) [@ahardin](https://forum.inductiveautomation.com/u/ahardin)\
**Post date:** [October 10, 2019, 7:34pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/3 "2019-10-10T19:34:16Z")

</div>

Thank you!!

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 10, 2019, 10:04pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/4 "2019-10-10T22:04:31Z")

</div>

And in Perspective, this kind of chart can be built using the XYChart component.

 ![Capture](https://us1.discourse-cdn.com/inductiveautomation/original/2X/e/ee3b056b7ea537fb26efc2ab21ecbf1dd7c9ec27.png)

---

<div class="post-metadata">

**Author:** ![ahardin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ahardin/32/66398_2.png) [@ahardin](https://forum.inductiveautomation.com/u/ahardin)\
**Post date:** [October 11, 2019, 12:17pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/5 "2019-10-11T12:17:17Z")

</div>

Thanks!

---

<div class="post-metadata">

**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\
**Post date:** [October 11, 2019, 1:40pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/6 "2019-10-11T13:40:12Z")

</div>

> [@bmusson](#):
>
> And in Perspective, this kind of chart can be built using the XYChart component.

Can you please post your configuration or maybe export the view?

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 11, 2019, 2:42pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/7 "2019-10-11T14:42:49Z")

</div>

Absolutely! I’ve attached a JSON dump of the view. It’s quite tailored to the specific application, but hopefully it can be useful to you.

In our application, it’s used to show the activity timeline of different process units. The component can be configured for a single specified process units (shown above), multiple specified process units, or all process units (if no process unit is specified, all units are loaded). The modes shown on the chart (CIP, Production, Recycle, etc…) are also configurable along with their colors (if no modes are specified, all modes are loaded and the default amCharts colors are used).

[This amCharts demo](https://www.amcharts.com/demos/gantt-chart-dates/) is a great resource, it was extremely helpful in determining how to build the data source and get the rendering working correctly. The big trick is using a column renderer with the _column.open.x_ property assigned to the start field in your data source.

[Mode Timeline.json](https://us1.discourse-cdn.com/inductiveautomation/original/2X/3/32cb7ebcc8f3ceb55005c9b86cc6510735e07dfa.json) (25.1 KB)

---

<div class="post-metadata">

**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\
**Post date:** [October 11, 2019, 7:39pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/8 "2019-10-11T19:39:35Z")

</div>

> [@bmusson](#):
>
> I’ve attached a JSON dump of the view. It’s quite tailored to the specific application, but hopefully it can be useful to you.

Very impressive, thanks for sharing!

Did you notice any memory leaks or performance problems while using the XY Chart?

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 14, 2019, 9:01pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/9 "2019-10-14T21:01:43Z")

</div>

> [@chi](#):
>
> Did you notice any memory leaks or performance problems while using the XY Chart?

We've seen some instances on mobile platforms where only half of an XY Chart will be drawn after scrolling or zooming; it looks like the chart is sliced right through the middle. It takes the user scrolling or zooming just a _hair_ more to fix things.

As for memory leaks, I haven't had any issues. Are there known memory leaks with the XY Chart?

---

<div class="post-metadata">

**Author:** ![chi](https://avatars.discourse-cdn.com/v4/letter/c/0ea827/32.png) [@chi](https://forum.inductiveautomation.com/u/chi)\
**Post date:** [October 15, 2019, 6:28am UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/10 "2019-10-15T06:28:52Z")

</div>

> [@bmusson](#):
>
> As for memory leaks, I haven’t had any issues. Are there known memory leaks with the XY Chart?

There are some bug reports like [this](http://forum.inductiveautomation.com/t/bug-13434-xy-chart-extreme-ram-leakage-cause-pc-crash/24456), i also saw in [another post](http://forum.inductiveautomation.com/t/perspective-xy-chart-subplots/26383/7) that the XY Chart will be deprecated in the future.  
I will use your solution anyway as there is currently no alternative and that kind of chart is essential for an MES status display.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [October 15, 2019, 2:07pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/11 "2019-10-15T14:07:42Z")

</div>

> [@chi](#):
>
> I will use your solution anyway as there is currently no alternative and that kind of chart is essential for an MES status display.

In that case, I'll put towards a proper generic version of the component for Ignition Exchange.

Edit: [Ribbon Chart component can be found here on Ignition Exchange](https://inductiveautomation.com/exchange/1514/overview)

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 16, 2019, 3:20pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/12 "2019-10-16T15:20:05Z")

</div>

To clear up some confusion: The version of the library backing the XY Chart in Perspective _when we first shipped it_ (ie, early 8.0.X releases) did have significant issues, including a memory leak. We’ve mitigated all of those issues that we know about, through a combination of changing our code and upgrading the backing library - so, there’s no issue with using the XY Chart in full use. Rumors of deprecation were probably part of the initial communication about issues with the XY Chart - we simply weren’t sure whether we could maintain the currrent component or would have to introduce an entirely new one.

---

<div class="post-metadata">

**Author:** ![Janne](https://avatars.discourse-cdn.com/v4/letter/j/f19dbf/32.png) [@Janne](https://forum.inductiveautomation.com/u/Janne)\
**Post date:** [November 8, 2019, 6:16pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/13 "2019-11-08T18:16:29Z")

</div>

> [@paul-griffith](#):
>
> so, there’s no issue with using the XY Chart in full use

We are facing some serious performance issues with XY-chart, please look at the 1min video recording:  
[https://vimeo.com/371934752](https://vimeo.com/371934752)

In the video, I'm hitting three buttons to load history of 24hour (24H), 7days (7PV) or 1 month (1KK) and it takes 10-20 seconds until pens are plotted and during that time cpu load is 100%. There are just 100 data points in each pen so it should plot the graph within a second, right?

Another issue is memory handling. if I continue changing duration few times, it runs out of memory.

Any comments?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 8, 2019, 6:36pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/14 "2019-11-08T18:36:40Z")

</div>

> [@paul-griffith](#):
>
> We’ve mitigated all of those issues that we know about

It's possible you've encountered an issue we _don't_ know about. Also, you don't specify your Ignition and Perspective version anywhere.

---

<div class="post-metadata">

**Author:** ![Janne](https://avatars.discourse-cdn.com/v4/letter/j/f19dbf/32.png) [@Janne](https://forum.inductiveautomation.com/u/Janne)\
**Post date:** [November 8, 2019, 7:12pm UTC](https://forum.inductiveautomation.com/t/looking-for-a-ribbon-chart/29007/15 "2019-11-08T19:12:37Z")

</div>

Right, this problem has been visible in all latest builds such as 8.0.4 and 8.0.5. Currently we are using 8.0.6RC and same behaviour. Data comes from database fast enough (in few tents of milliseconds) but plotting takes lot of time. it seems that component is rendering a lot or doing something else we don’t know? Also based on analysis with Chrome inspector, component plots all UI elements every time when it actually should only plot the data points of the graph. This causes huge amount of unnecessary plotting.
