Possible get more modern looking charts?

I’m not really happy with the look of the charts that come with Perspective in Maker, they look like they’re from the 90’s. Has anyone done some customizations so they look more modern (something that looks like https://apexcharts.com )? Or is that not really possible?

1 Like

:roll_eyes: Have you seen Vision's charts? Perspective uses Amcharts and React-Timeseries, both of which are certainly "modern" charting systems.

You can absolutely customize the appearance of the charts, through a combination of properties and Perspective themes (I suggest searching the forums for more info; they're an intentionally obscure feature because a large swathe of our customers simply don't need them). There are edges to both charting libraries that simply don't fit into the mostly static way React requires our components to render, but if you think you can do better, you're also welcome to create your own module that incorporates a Perspective component: ignition-sdk-examples/perspective-component at master · inductiveautomation/ignition-sdk-examples · GitHub

2 Likes

Then let me rephrase - out of the box they look like they’re from the 90’s.
Sorry if I offended you. I asked if they can be customized - and apparently yes, but documentation is pretty slim (at least from what I’ve found), so I don’t think my question was totally off base? And yes, I have seen Visions charts - and out of the box Perspective looks about the same (at least to me). Messing around with it myself I’ve come closer to Apex charts - but it still would be nice to have the animations (I’m not seeing that in Perspective, unless there is a property for that?). I was also able to smooth out the chart, but having trouble getting the chart to be smooth both on mobile and on desktop because they need two different options (I need less point counts on mobile).

I must admit, the power chart out the box does need some work, but it's OK for a first pass and I am sure it will become what it's supposed to be with time and feedback. The tag browser for example is one thing that needs some work: the width needs to be changeable (default is far too narrow unless your Max folder depth is 1-2), and it desperately needs a filter to search for tags. I'm also not a huge fan of using a tree view, especially not if applying a filter without functions to select all, expand/collapse all. I've used a list in the past with vision and found it better for displaying lots of tags within the view window (can fit far more than a tree view) and its also quicker to select tags rather than having to click so many times to expand folders. However, I do understand why it uses a tree view to support multiple history providers, but think it could be solved differently, eg by selecting history provider from drop down list first

2 Likes

You can do very modern looking gauges and charts with a little tweaking, I don’t really see something in apex charts that I can’t replicate using ignition.

Perhaps gradient filling and map based charts? But that’s all I can think of.

Attached is my idea of a modern looking chart


Excuse the camera picture, I’m in a rush

1 Like

What’s the point of the inner circular ring on your charts?

1 Like

Yea I was going to say I am not a fan of these charts, besides the Frequency In one, the others are very hard to parse what they’re doing, and they seem to only be for the current value, not historical, in which case it’s not really even a chart since there’s no x-axis metric you are measuring over.

1 Like

Oh well.

The inner rings are the balance, these gauges are 3phase gauges. These grey area is the preffered range, and if you want a historical trend yoi click the top left button.

very cool!

I still have trouble getting a nice smooth graph for different resolutions (phone vs. desktop). And I haven’t spent enough time to get it to smooth out in a way that accurately shows data on both ends. Using less point counts distorts the data too much. It would be nice if the chart component could smooth out natively instead of the user having to figure out how to smooth out the data before using it in a graph.

I still advocate for better looking charts/graphs out of the box (since it is possible).

Now with that I can’t argue :slight_smile:

Smooth data? Why would you like to do that? Your getting into splines and interpolation concepts, data is data. You just take more samples per period and smoothness in data happens. Also check container options, I’m sure is possible to achieve good graphs in desktop or phone with breakpoints and different views.
I totally agree that chart can look different and can improve but your complaining like if there where no options to display nice graphs. Even in Vision you can really do such modern graphs with libraries and scripting, if you don’t like those tools is fine, they’ll stay at 90’s in your mind.
You should develop your own apexcharts with js and use Web Dev module to bring them to Ignition Screen.

Because I like my charts to look nice:

But the amount of custom work I had to do to get that look is part of the original issue that I posted about (when I originally posted, I didn’t know I could customize the graphs so much - but my original comment still stands - they should look nice without me having to customize them).

More samples per period does not result in a smooth graph, actually the opposite. And yes, breakpoints work, but like I said, there isn’t a way to change the point counts based on a breakpoint (at least not that I’ve found). So I can make a graph look nice on desktop, but then on mobile it won’t or vice versa.

It’s very close to working, but not 100%. And I guess I don’t call something like this complaining - it’s a feature request. Is it wrong to ask for new features?

2 Likes

It’s not bad to ask for features but they usually go here for future reference - https://ideas.inductiveautomation.com/

Can you, please, show/explain, how can we do that in Vision?
I'm trying for quite some time now but failed to find/do something useful...

2 Likes

I guess libraries like these and chartjs are good for static display of dash boards and charts. They don’t render a smooth scrolling of charts as required in SCADA applications where charts update in a smooth scrolling manner as data arrives on x axis for time series. These libraries refresh the whole chart for a new set of data and time axis.

1 Like

You can’t use javascript directly in Ignition.

However, what @sungkhum you could do, if you know web development, is to write your own front end in react/vue/vanilla htmlcssjs, buy the web dev module for Ignition (the cheapest module they sell fwiw) and use Ignition Web Dev to make API endpoints that your front end hits. Then you can use any modern javascript charting library you’d like. All Ignition would do is provide data to be consumed by your custom web front end.

Yes , we do have a module RWS (restful web services) in exchange portal that displays chartjs components on a web page connected to Ignition using webdev module. However there are challenges like getting historical data, etc. But yes essentially you can get data in an HTML page using webdev then use what ever libraries you want to display that data in the HTML page!

2 Likes

I tend to avoid smoothing as much as possible for plant ops. Too risky that it will hide an important spike or gap in the data. I could definitely see it being a nice to have for Maker with home projects, but I wouldn’t want it to be the default setting.

7 Likes

That's the way I read it. And a lot of feature requests do land on the forum first. It's a great place for some discussion and sometimes solutions are found with existing features. If there are no current solutions, the feature request at the ideas portal will likely be more complete based on discussions here. Thanks all for posting!

1 Like