APEX Chart Slowness in DATA

[Arvind_Babu_K]

Hi Team,

We are currently using the Apex Stacked Chart for our dashboard view, but we have observed significant delays in data rendering. For example, when executing the named query directly, it runs in milliseconds. However, when linked to the Apex chart, it takes around 10 seconds for the data to appear.

Additionally, when we link the Apex chart data with a table, we notice performance issues affecting both components. However, when tested separately (writing data to a table vs. appending it to the Apex chart), the dataset retrieval from the database occurs instantly, suggesting that the delay is primarily due to chart rendering.

Looking for Solutions:

1. Optimizing Data Processing – Is there a way to speed up data handling before passing it to the Apex chart?
2. Alternative Charting Options – Are there other chart libraries that integrate well with Ignition and perform better?
3. Ignition Built-in Charts – Would it be feasible to replace Apex charts with Ignition’s inbuilt chart components for improved performance?

Any suggestions or recommendations to enhance chart responsiveness would be greatly appreciated.

[jalal.a]

In our project, we have observed the same issue. If data processing is handled through Ignition’s built-in model, it is expected to be fast. However, we suspect this could be contributing to data slowness. We have also noticed similar slowdowns when using Sepasoft’s MES model, indicating that it might be a broader issue with data handling.

I believe this is the right time for Ignition to develop a built-in model to address this pain point effectively and structure it properly for optimal performance.

[pturmel]

@Arvind_Babu_K

speed up data handling before passing it to the Apex chart?

I created a large collection of expression functions that allow you to make complex data manipulations without the overhead of scripts. While not using Apex Stacked charts, my Tag Report Utility includes high-performance use of Apex charts with high-density historian data. (The speed contrast with IA's native TS chart is astonishing.)

Tag Report Utility

New resource just uploaded to the Exchange (pending review). Also available here: https://www.automation-pros.com/TagReportUtility/ I intend to publish at this link as well as in the Exchange going forward. Announcements will be in this topic. (: Highlights: Provides a Perspective Popup View that provides a user interface to system.tag.query() that entirely replicates the functionality of the Designer's Tag Report Tool. Provides a Perspective Embedded View that provides Time Span selectio…

[Arvind_Babu_K]

Hi Pturmel, I saw your project—it's really insightful! However, I need this data in a stacked chart format.

[pturmel]

I haven't had to use the Apex stacked chart format, but the techniques should be similar.

[MMaynard]

How are you doing the bindings for the series?
I have found that it greatly helps the stacked bar rendering when I do a single query on series[0].data and then use a transform on that to build out the other series

[Arvind_Babu_K]

HI @MMaynard, i to bind the data in series the result after append the data, The data series binds directly to the SQL query it works fine, but performance is significantly slower when using the dropdown box with if condition on it

[Arvind_Babu_K]

Hi @pturmel, I understand your point, but I'm experiencing slowness even when following similar techniques. The key issue is that it works fine when directly connected to the Apex chart without any Ignition objects, but performance slows down significantly when linked to the dropdown box.

[MMaynard]

Can you show your queries and how you are filtering with the dropdown?
It sounds like you might be lacking some indexes on the tables if it slows down after applying a filter.

[Arvind_Babu_K]

This Script is written in on action performed in dropdown function

'''DropDownvalue = self.props.value
parameter = {'Start_Date': self.getSibling("DateTimeInput").props.value, 'End_Date': self.getSibling("DateTimeInput_0").props.value}
if DropDownvalue == 1:
DataSet = system.db.runNamedQuery('Apex_Chart_E_D/Operation data _TotalCount1', parameter)

elif DropDownvalue == 2:
DataSet = system.db.runNamedQuery('Apex_Chart_E_D/Operation data _TotalCount2', parameter)

elif DropDownvalue == 3:
DataSet = system.db.runNamedQuery('Apex_Chart_E_D/Operation data _TotalCount3', parameter)

self.getSibling("Table").props.data = DataSet
data_dict = {
"AB": {"data": , "name": "AB","type":"bar"},
"CD": {"data": , "name": "CD","type":"bar"},
"QR": {"data": , "name": "QR","type":"bar"},
"TE": {"data": , "name": "TE,"type":"bar"},
"Target": {"data": , "name": "YE","type":"line"}
}

Iterate through the dataset and populate the data_dict with values

for row in range(DataSet.getRowCount()):
data_dict["AB"]["data"].append(DataSet.getValueAt(row, 'AB_count'))
data_dict["CD"]["data"].append(DataSet.getValueAt(row, 'CD_count'))
data_dict["QR"]["data"].append(DataSet.getValueAt(row, 'QR_count'))
data_dict["TE"]["data"].append(DataSet.getValueAt(row, 'TE_count'))
data_dict["Target"]["data"].append(100)

Create the result list ensuring the order is AB, CD, QR, TE

result = [
data_dict["AB"],
data_dict["CD"],
data_dict["QR"],
data_dict["TE"],
data_dict["Target"]
]
dates_list =
for row in range(DataSet.getRowCount()):
date_value = DataSet.getValueAt(row, 'Date')
formatted_date = system.date.format(date_value, 'dd/MM')
dates_list.append(formatted_date)
result1 = [date for date in dates_list]
self.getSibling("apexchart").props.options.xaxis.categories = result1
self.getSibling("apexchart").props.series = result'''

[Transistor]

Please see Wiki - how to post code on this forum. Then hit the pencil icon / edit button below your question to fix it. Thanks.

[MMaynard]

I do it slightly different, my query is using unions to gather the data for the bars
I have this binding on the data of series one, script transform.Where value is bound to the query.
I then write directly to the series properties on the chart.

> 
> def transform(self, value, quality, timestamp):
> 	ds7 = []
> 	ds30 = []
> 	ds90 = []
> 	cds = []
> 	pds = system.dataset.toPyDataSet(value)
> 	for row in pds:
> 		if row[0]=='7':
> 			rcol = "#095E22"
> 			ds7.append({"x":str(row[1]),"y":round(row[2],1),"fillColor":rcol,"strokeColor":rcol})
> 		if row[0]=='30':
> 			rcol = "#75B108"
> 			ds30.append({"x":str(row[1]),"y":round(row[2],1),"fillColor":rcol,"strokeColor":rcol})
> 		if row[0]=='90':
> 			rcol = "#00FF0A"
> 			ds90.append({"x":str(row[1]),"y":round(row[2],1),"fillColor":rcol,"strokeColor":rcol})
> 		if str(row[1]) not in cds:
> 			cds.append(str(row[1]))
> 	self.props.series[1].data=ds30
> 	self.props.series[2].data=ds90
> 	self.props.options.xaxis.categories=cds
> 	return ds7

[Arvind_Babu_K]

Hi @MMaynard, thanks for your script. Unfortunately, I haven't seen any improvement in the chart performance. I reached out to Ignition support, and they were a bit surprised that it was functioning correctly without any components. However, when I connect it to a dropdown or button, it takes significantly longer to respond. i am waiting for the their solution regarding this once i get it i will update you

[MMaynard]

I would be looking at the database design then, do you have indexes on the fields you are using for filter parameters?

[Transistor]

Please fix the formatting on your script in post #9 as requested in post #11. We'll help you but you need to put some effort in on the forum.

[JordanCClark]

I think he tried to, but used single quotes instead of backticks ( ``` )

[JordanCClark]

A bit of optimizing can be done here, although I'm not a fan of hitting the database upon a change in the dropdown selection.

DropDownvalue = self.props.value
parameter = {'Start_Date': self.getSibling("DateTimeInput").props.value, 'End_Date': self.getSibling("DateTimeInput_0").props.value}

DataSet = system.db.runNamedQuery('Apex_Chart_E_D/Operation data _TotalCount{}'.format(DropDownValue), parameter)

result = [
          {"name": "AB", "type": "bar"},
          {"name": "CD", "type": "bar"},
          {"name": "QR", "type": "bar"},
          {"name": "TE", "type": "bar"},
         ]

# Add data for each result.
for row in result:
	row["data"] = DataSet.getColumnAsList(DataSet.getColumnIndex('{}_count'.format(row['name']))

# Add Target line
result.append({"data": [100]*DataSet.rowCount, "name": "YE", "type": "line"})

# Create date categories
date_values = DataSet.getgetColumnAsList(DataSet.getColumnIndex('Date'))
dates_list = [system.date.format(date, 'dd/MM') for date in date_values] 
					 
self.getSibling("apexchart").props.options.xaxis.categories = date_list
self.getSibling("apexchart").props.series = result