# Building a Dynagraph card In Perspective

**URL:** <https://forum.inductiveautomation.com/t/building-a-dynagraph-card-in-perspective/48870>\
**Category:** Ignition\
**Created:** [July 15, 2021, 1:28pm UTC](https://forum.inductiveautomation.com/t/building-a-dynagraph-card-in-perspective/48870 "2021-07-15T13:28:25Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\
**Post date:** [August 2, 2021, 9:52am UTC](https://forum.inductiveautomation.com/t/building-a-dynagraph-card-in-perspective/48870/2 "2021-08-02T09:52:51Z")

</div>

Easysvg is a nice little wrapper to make svg files. Unzip and put in the gateway’s  
`user-lib/pylib/site-packages` folder. You may need to restart your designer afterwards.

[easysvg.zip](https://forum.inductiveautomation.com/uploads/short-url/wY51CE88Fu5FMMVecxJajTF2wx2.zip) (6.7 KB)

Sample view.  
[dynacard\_perspective\_2021-08-02\_0532.zip](https://forum.inductiveautomation.com/uploads/short-url/fwADeidZA79Hbo5OHltYBvZKxWD.zip) (51.0 KB)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/634a47040f51e1d545019675c29d4608505bb4be.png)

```python
	import ast, math, easysvg, base64
	
	def roundup(value):
		''' Round value up to next 100 '''
		return int(math.ceil(float(value)/100) * 100)
		
	dataIn = self.getSibling("Table").props.data	
	
	xIn= dataIn.getColumnAsList(0)
	yIn= dataIn.getColumnAsList(1)

	maxX = roundup(max(xIn))
	maxY = roundup(max(yIn))
	padding = 200
	gridSpacing = 100
	
	# create graphic 
	svg = easysvg.SvgGenerator()
	# set graphic size
	svg.begin(roundup(max(xIn))+2*padding, roundup(max(yIn))+2*padding)
	
	for x in range(0, maxX + gridSpacing, gridSpacing):
		# draw grid line
		svg.line(x+padding,0+padding,x+padding,maxY+padding,'red',3)
		# draw axis value
		svg.text(str(x), 0, 0, font_size=50, anchor = 'start', alignment_baseline='middle', transform = 'translate(' + str(x+padding) + ',' + str(maxY+padding+10)+') rotate(90)')
	
	for y in range(0, maxY + gridSpacing, gridSpacing):
		# draw grid line
		svg.line(0+padding,y+padding,maxX+padding,y+padding,'red',3)
		# draw axis value
		svg.text(str(y), padding-10, y+padding, font_size=50, anchor = 'end', alignment_baseline='middle')
	
	for x1, y1, x2, y2 in zip(xIn, yIn, xIn[1:], yIn[1:]):
		# draw data line
		svg.line(x1+padding, y1+padding, x2+padding, y2+padding, stroke_width=2)
	# finish graphic
	svg.end()
	# display image
	self.getSibling("Image").props.source = 'data:image/svg+xml;base64,' + base64.b64encode(svg.get_svg())

```

---

_[View the full topic](https://forum.inductiveautomation.com/t/building-a-dynagraph-card-in-perspective/48870)._