# How to show PLC Tag data in Vertical Bar Chart using Web Dev resource

**URL:** <https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [July 29, 2023, 8:31am UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094 "2023-07-29T08:31:01Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![Shashiraj\_P\_S](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shashiraj\_P\_S](https://forum.inductiveautomation.com/u/Shashiraj_P_S)\
**Post date:** [July 29, 2023, 12:01pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/41 "2023-07-29T12:01:58Z")

</div>

yes for this one how to show multi colors?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 29, 2023, 12:06pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/42 "2023-07-29T12:06:10Z")

</div>

I can produce this with ApexCharts:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/9/49d8794d39def829ba3a4dbe4e5181b5ff053960.png)

> **Chart Example JSON (Copy and Paste into a Perspective View Container)**
>
> ```auto
> [
> {
> "type": "kyvislabs.display.apexchart",
> "version": 0,
> "props": {
> "type": "bar",
> "options": {
> "chart": {
> "height": 496,
> "toolbar": {
> "show": false
> },
> "type": "bar",
> "animations": {
> "enabled": false,
> "easing": "swing"
> },
> "background": "#fff",
> "foreColor": "#373D3F",
> "fontFamily": "Roboto",
> "id": "KJ47Z",
> "width": 1000
> },
> "dataLabels": {
> "style": {
> "fontSize": 17,
> "fontWeight": 700,
> "color": "#000"
> }
> },
> "grid": {
> "padding": {
> "right": 25,
> "left": 15
> }
> },
> "legend": {
> "offsetY": 0,
> "show": false,
> "fontSize": 14,
> "markers": {
> "shape": "square",
> "size": 8
> },
> "itemMargin": {
> "vertical": 0
> }
> },
> "stroke": {
> "fill": {
> "type": "solid",
> "opacity": 0.85,
> "gradient": {
> "shade": "dark",
> "type": "horizontal",
> "shadeIntensity": 0.5,
> "inverseColors": true,
> "opacityFrom": 1,
> "opacityTo": 1,
> "stops": [
> 0,
> 50,
> 100
> ],
> "colorStops": []
> }
> }
> },
> "xaxis": {
> "title": {
> "style": {
> "fontWeight": 700
> }
> },
> "labels": {
> "trim": true,
> "style": {}
> },
> "group": {
> "groups": [],
> "style": {
> "colors": [],
> "fontSize": "12px",
> "fontWeight": 400,
> "cssClass": ""
> }
> },
> "tickPlacement": "between",
> "tooltip": {
> "enabled": false
> }
> },
> "yaxis": {
> "title": {
> "style": {
> "fontWeight": 700
> }
> },
> "tickAmount": 5,
> "labels": {
> "style": {}
> }
> },
> "plotOptions": {
> "bar": {
> "distributed": true,
> "borderRadius": 6,
> "borderRadiusApplication": "end",
> "borderRadiusWhenStacked": "last",
> "hideZeroBarsWhenGrouped": false,
> "isDumbbell": false,
> "isFunnel": false,
> "isFunnel3d": true,
> "dataLabels": {
> "total": {
> "enabled": false,
> "offsetX": 0,
> "offsetY": 0,
> "style": {
> "color": "#373d3f",
> "fontSize": "12px",
> "fontWeight": 600
> }
> }
> }
> },
> "bubble": {
> "zScaling": true
> },
> "radialBar": {
> "hollow": {
> "background": "#fff"
> },
> "dataLabels": {
> "name": {},
> "value": {},
> "total": {}
> }
> },
> "pie": {
> "donut": {
> "labels": {
> "name": {},
> "value": {},
> "total": {}
> }
> }
> }
> },
> "tooltip": {
> "shared": false,
> "intersect": true
> },
> "theme": {
> "palette": "palette1"
> },
> "annotations": {},
> "series": [
> {
> "name": "Column",
> "data": [
> {
> "x": "Rougher Input",
> "y": 10
> },
> {
> "x": "Rougher Output",
> "y": "56",
> "fillColor": null
> },
> {
> "x": "SEG Input",
> "y": 30,
> "fillColor": null
> },
> {
> "x": "Semi-Finisher Input",
> "y": 40,
> "fillColor": null
> },
> {
> "x": "Finisher Output",
> "y": 10
> }
> ]
> }
> ]
> },
> "series": [
> {
> "name": "Column",
> "data": [
> {
> "x": "Rougher Input",
> "y": 10
> },
> {
> "x": "Rougher Output",
> "y": "56",
> "fillColor": null
> },
> {
> "x": "SEG Input",
> "y": 30,
> "fillColor": null
> },
> {
> "x": "Semi-Finisher Input",
> "y": 40,
> "fillColor": null
> },
> {
> "x": "Finisher Output",
> "y": 10
> }
> ]
> }
> ]
> },
> "meta": {
> "name": "apexchart"
> },
> "position": {
> "basis": "418px"
> },
> "custom": {}
> }
> ]
> 
> ```

---

<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:** [July 29, 2023, 12:07pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/43 "2023-07-29T12:07:00Z")

</div>

> [@nminchin](#):
>
> How would you do multiple colours though?

You shouldn't. The bars are showing relative values between categories. Since the Y-axis is the same for all the colours should be the same. Random use of random colours helps nobody. Colours should convey meaning. Also bear in mind that some users will be colour blind. A good chart should be able to be rendered in grey-scale for black and white printing.

If you had two series such as Jan 2022, Jan 2023, Feb 2022, Feb 2023, etc. then you would differentiate years by colour but keep all the 2022s the same colour and all the 2023s the same colour.

If you insist on applying different colours to each column then you would need to create different data sources or column names in the one data source.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 29, 2023, 12:21pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/44 "2023-07-29T12:21:13Z")

</div>

I see what you're saying and I agree. I can also see the case for using colours though since they're separate machines. If you instead think of it as a trend chart, in this case you would have a colour per pen, 1 trend pen per machine. This bar chart is essentially a single data point trend, displayed using bars instead of lines/points 🤷‍♂️

They may have the same colour coding for the machines used elsewhere as well such as on other dashboards

---

<div class="post-metadata">

**Author:** ![Shashiraj\_P\_S](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shashiraj\_P\_S](https://forum.inductiveautomation.com/u/Shashiraj_P_S)\
**Post date:** [July 29, 2023, 12:26pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/45 "2023-07-29T12:26:29Z")

</div>

Ok i will try it & tell you whether it will work or not

---

<div class="post-metadata">

**Author:** ![Shashiraj\_P\_S](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shashiraj\_P\_S](https://forum.inductiveautomation.com/u/Shashiraj_P_S)\
**Post date:** [July 29, 2023, 12:28pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/46 "2023-07-29T12:28:00Z")

</div>

can i read each apex bar chart values using realtime plc tags

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 29, 2023, 12:28pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/47 "2023-07-29T12:28:27Z")

</div>

You mean, can you bind them to PLC tag values? Yes

---

<div class="post-metadata">

**Author:** ![Shashiraj\_P\_S](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shashiraj\_P\_S](https://forum.inductiveautomation.com/u/Shashiraj_P_S)\
**Post date:** [July 29, 2023, 12:30pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/48 "2023-07-29T12:30:36Z")

</div>

yes

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 29, 2023, 12:32pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/49 "2023-07-29T12:32:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Shashiraj\_P\_S](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shashiraj\_P\_S](https://forum.inductiveautomation.com/u/Shashiraj_P_S)\
**Post date:** [July 29, 2023, 12:33pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/50 "2023-07-29T12:33:09Z")

</div>

ok

---

<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:** [July 29, 2023, 1:40pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/51 "2023-07-29T13:40:14Z")

</div>

> [@Transistor](#):
>
> but the [user manual](https://docs.inductiveautomation.com/display/DOC81/Web+Dev) says that it is for Vision

WebDev is entirely in the gateway. It is not specific to either Vision or Perspective. Due to Perspective's web-driven nature, there are tasks that can only be achieved for Perspective with WebDev or a custom module. (See my Blob Server.)

---

<div class="post-metadata">

**Author:** ![Shashiraj\_P\_S](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shashiraj\_P\_S](https://forum.inductiveautomation.com/u/Shashiraj_P_S)\
**Post date:** [July 31, 2023, 4:14am UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/52 "2023-07-31T04:14:54Z")

</div>

Hi, i have copied above json document to my container which you have shown above image, but it not displaying apex chart in my perspective container

---

<div class="post-metadata">

**Author:** ![Shashiraj\_P\_S](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shashiraj\_P\_S](https://forum.inductiveautomation.com/u/Shashiraj_P_S)\
**Post date:** [July 31, 2023, 4:39am UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/53 "2023-07-31T04:39:15Z")

</div>

Hi i have copied above json document to my container which you have shown above image, but it not displaying apex chart in my perspective container

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 31, 2023, 4:51am UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/54 "2023-07-31T04:51:04Z")

</div>

Have you installed the ApexChart module as I said?

> [@nminchin](#):
>
> You can also look at using the [ApexCharts](https://forum.inductiveautomation.com/t/kyvislabs-apexchart-module/55263) module if you want nicer charts.
> 
> You can use the [Editor](https://editor.apexcharts.com/) to create you charts and then copy the config into the Perspective component

---

<div class="post-metadata">

**Author:** ![Shashiraj\_P\_S](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shashiraj\_P\_S](https://forum.inductiveautomation.com/u/Shashiraj_P_S)\
**Post date:** [July 31, 2023, 6:02am UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/55 "2023-07-31T06:02:36Z")

</div>

Yes

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 31, 2023, 6:03am UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/56 "2023-07-31T06:03:16Z")

</div>

Can you show a screenshot of what _is_ showing when you paste it? Are you pasting it into a deep selected container? I.e. one with this icon:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/c/dccbd0c30e787e81a221e7802c44c17b5d67c6a4.png)

---

<div class="post-metadata">

**Author:** ![Shashiraj\_P\_S](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shashiraj\_P\_S](https://forum.inductiveautomation.com/u/Shashiraj_P_S)\
**Post date:** [July 31, 2023, 6:09am UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/57 "2023-07-31T06:09:11Z")

</div>

Yes

---

<div class="post-metadata">

**Author:** ![Shashiraj\_P\_S](https://avatars.discourse-cdn.com/v4/letter/s/c37758/32.png) [@Shashiraj\_P\_S](https://forum.inductiveautomation.com/u/Shashiraj_P_S)\
**Post date:** [July 31, 2023, 6:17am UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/58 "2023-07-31T06:17:01Z")

</div>

Now it is working fine thank you

---

<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:** [July 31, 2023, 2:21pm UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/59 "2023-07-31T14:21:04Z")

</div>

13 posts were split to a new topic: [How to update plc tag value to sql server database in ignition](https://forum.inductiveautomation.com/t/how-to-update-plc-tag-value-to-sql-server-database-in-ignition/77142)

---

<div class="post-metadata">

**Author:** ![Learner\_Ignition](https://avatars.discourse-cdn.com/v4/letter/l/b3f665/32.png) [@Learner\_Ignition](https://forum.inductiveautomation.com/u/Learner_Ignition)\
**Post date:** [July 31, 2023, 6:25am UTC](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094/60 "2023-07-31T06:25:06Z")

</div>

Hi,  
Can you please tell me from where you get this JSON data?

[Previous page](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094.md?page=2)

[Next page](https://forum.inductiveautomation.com/t/how-to-show-plc-tag-data-in-vertical-bar-chart-using-web-dev-resource/77094.md?page=4)