# Vision Status Chart Tooltip Format

**URL:** <https://forum.inductiveautomation.com/t/vision-status-chart-tooltip-format/96102>\
**Category:** Ignition\
**Tags:** ignition81, vision\
**Created:** [September 18, 2024, 7:30am UTC](https://forum.inductiveautomation.com/t/vision-status-chart-tooltip-format/96102 "2024-09-18T07:30:46Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jchen](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@jchen](https://forum.inductiveautomation.com/u/jchen)\
**Post date:** [September 18, 2024, 7:30am UTC](https://forum.inductiveautomation.com/t/vision-status-chart-tooltip-format/96102/1 "2024-09-18T07:30:46Z")

</div>

Hi there,

Is there a way to convert the date format of the status chart tooltip to other style such as "yyyy/MM/dd HH:mm:ss".

 ![dd](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/4/84b6f5a0a054a9658125217a6dc9c62e23949b8b.png)

I found a similiar topic below and tried, but the date changes when the mouse moves along the x axis, the time range should be static during a state.  
[https://forum.inductiveautomation.com/t/status-chart-gettooltiptext-custom-string/17434](https://forum.inductiveautomation.com/t/status-chart-gettooltiptext-custom-string/17434)

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [September 18, 2024, 9:59am UTC](https://forum.inductiveautomation.com/t/vision-status-chart-tooltip-format/96102/2 "2024-09-18T09:59:59Z")

</div>

I can imagine two ways to go about this. Either iterate through the data to find the correct rows with the given selected date and assemble the tool tip string accordingly, or simply perform some string hocus pocus to transform the given default string into the desired format. Of the two, I imagine the latter approach would be more efficient especially if the chart ever contains a lot of data points.

**Example:**

```python
#def getTooltipText(self, [...], defaultString):
	
	# Break the default string apart and extract the start date and the end date
	startingIndex = defaultString.index('(') + 1
	endingIndex = defaultString.index(')')
	datetimes = defaultString[startingIndex: endingIndex].split(',')
	startDate = system.date.parse(datetimes[0] + datetimes[1], 'MM/dd/yy HH:mm a')
	endDate = system.date.parse(datetimes[2] + datetimes[3], 'MM/dd/yy HH:mm a')
	
	# Put the string back together with the dates formatted as desired, and return it
	return '{}{}, {})'.format(defaultString[:startingIndex], system.date.format(startDate, 'yyyy/MM/dd HH:mm:ss'), system.date.format(endDate, 'yyyy/MM/dd HH:mm:ss'))

```

**Result:**

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

---

<div class="post-metadata">

**Author:** ![jchen](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@jchen](https://forum.inductiveautomation.com/u/jchen)\
**Post date:** [September 18, 2024, 11:34am UTC](https://forum.inductiveautomation.com/t/vision-status-chart-tooltip-format/96102/3 "2024-09-18T11:34:21Z")

</div>

Thanks Justin. Your second way was very close to my original idea, but I later found that I couldn't extract the seconds. I want the tooltip to show the date with seconds so that it matches the data in the table shown in that picture.

---

<div class="post-metadata">

**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\
**Post date:** [September 18, 2024, 12:57pm UTC](https://forum.inductiveautomation.com/t/vision-status-chart-tooltip-format/96102/4 "2024-09-18T12:57:33Z")

</div>

> [@jchen](#):
>
> I want the tooltip to show the date with seconds

Understood. Here is an example of how to implement the first suggested approach:

```python
# def getTooltipText(self, [...], defaultString):
	
	# Convert the timestamp to a java.util.Date
	selectedDate = system.date.fromMillis(long(selectedTimeStamp * 1000))
	
	# Add 1 to the index to offset for the tStamp column
	seriesName = system.dataset.getColumnHeaders(data)[selectedStatus + 1]
	
	# Stop the effort if the date hasn't been found by the last row index
	maxRowIndex = data.rowCount - 1
	for row in xrange(data.rowCount):
		if row == maxRowIndex:
			return
		
		# Get the start date and end date for the current datapoint in the table data
		startDate = data.getValueAt(row, 0)
		endDate = data.getValueAt(row + 1, 0)

		# If the selected date is between the start and end dates,
		# ...assemble the tooltip and return it
		if startDate < selectedDate < endDate:
		 	return '{}: ({}, {})'.format(seriesName, system.date.format(startDate, 'yyyy/MM/dd HH:mm:ss'), system.date.format(endDate, 'yyyy/MM/dd HH:mm:ss'))

```

**Result:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f11d83abfc9c431ef12d80f3f6719b030822ce54.png)

---

<div class="post-metadata">

**Author:** ![jchen](https://avatars.discourse-cdn.com/v4/letter/j/3ec8ea/32.png) [@jchen](https://forum.inductiveautomation.com/u/jchen)\
**Post date:** [September 19, 2024, 1:33am UTC](https://forum.inductiveautomation.com/t/vision-status-chart-tooltip-format/96102/5 "2024-09-19T01:33:38Z")

</div>

> [@jchen](#):
>
> Thanks Justin

Hi Justin, this works perfectly. I also modified the seriesName according to my needs. Thanks.

 ![tt](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/f/cf716b417932735dd60a802bbce7a1b7a494be95.png)