# Step graph instead of line for a Sparkline in Vision

**URL:** <https://forum.inductiveautomation.com/t/step-graph-instead-of-line-for-a-sparkline-in-vision/91702>\
**Category:** Ignition\
**Tags:** vision\
**Created:** [June 11, 2024, 6:00pm UTC](https://forum.inductiveautomation.com/t/step-graph-instead-of-line-for-a-sparkline-in-vision/91702 "2024-06-11T18:00:20Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emile\_Aimez](https://avatars.discourse-cdn.com/v4/letter/e/9f8e36/32.png) [@Emile\_Aimez](https://forum.inductiveautomation.com/u/Emile_Aimez)\
**Post date:** [June 11, 2024, 6:00pm UTC](https://forum.inductiveautomation.com/t/step-graph-instead-of-line-for-a-sparkline-in-vision/91702/1 "2024-06-11T18:00:20Z")

</div>

I am trying to represent a speed value in time with a sparkline. The data i am using is comming from the tag history of a tag that updates on value change and i want to represent the past two hours of speed values. However, when the value doesnt change for a while, instead of creating a plateau or step, it creates a slow incline to the next value. Is there a way to change this so it acts more like a step chart or is that not possible using Sparkline charts?  
 ![SparklineStepIssue](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/125cdbbff50f9b25fd81d64dbe0fb7db6e45ec38.png)

---

<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:** [June 12, 2024, 3:41am UTC](https://forum.inductiveautomation.com/t/step-graph-instead-of-line-for-a-sparkline-in-vision/91702/2 "2024-06-12T03:41:47Z")

</div>

This wouldn't be too difficult to transform with scripting. Add a custom property to the chart called 'rawData'.  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3cafbeaf782ab8da6d3345a3d77d087cb14891de.png)

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/4741e3a9cc211031908a63216086b54fc9cc19a7.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/6/f6469cc94392bd4e13bccde2fc83043a65b67617.png)

Then, bind your data source for the chart to the `rawData` _ **instead of** _ the `data` property.

Finally, use a property change script to transform the raw data into step chart data for the sparkline chart:

```python
# Run only when the rawData parameter changes
if event.propertyName == 'rawData':
	# Get the current raw data from the property change event
	rawData = event.newValue
		
	# Define the parameters that are needed to create a transformed dataset
	headers = ['t_stamp', 'value']
	transformedData = []
	maxRowIndex = rawData.rowCount - 1 # Used to prevent overflow on the last data point
	
	# Iterate through the raw data and add for each row added to the transformed data parameter,
	# ... add a copy of the preceding data point to each successive time stamp
	# ... so the chart will draw steps from point to point instead of angles
	for row in xrange(rawData.rowCount):
		transformedData.append([rawData.getValueAt(row, 't_stamp'), rawData.getValueAt(row, 'value')])
		transformedData.append([rawData.getValueAt(min(maxRowIndex, row + 1), 't_stamp'), rawData.getValueAt(row, 'value')])
	
	# Set the chart's data parameter to the transformed data
	event.source.data = system.dataset.toDataSet(headers, transformedData)

```

**Result:**  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/702ab43229d3e1c322d4d022f2224b60ea0a2285.png)