yes for this one how to show multi colors?
I can produce this with ApexCharts:
Chart Example JSON (Copy and Paste into a Perspective View Container)
[
{
"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": {}
}
]
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.
1 Like
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
Ok i will try it & tell you whether it will work or not
can i read each apex bar chart values using realtime plc tags
You mean, can you bind them to PLC tag values? Yes
yes
ok
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.)
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
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
Have you installed the ApexChart module as I said?
Yes
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:
Yes
Now it is working fine thank you
13 posts were split to a new topic: How to update plc tag value to sql server database in ignition
Hi,
Can you please tell me from where you get this JSON data?