# Building a Dynagraph card In Perspective **URL:** \ **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:** 6\ **Page:** 1
**Author:** ![alainia.spencer](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@alainia.spencer](https://forum.inductiveautomation.com/u/alainia.spencer)\ **Post date:** [July 15, 2021, 1:28pm UTC](https://forum.inductiveautomation.com/t/building-a-dynagraph-card-in-perspective/48870/1 "2021-07-15T13:28:25Z")
What would be the recommend control to build out a dynagraph card in Perspective? There are a couple of trends available, I was wondering if anyone had any experience, tips, or suggestions on this topic. ---
**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")
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()) ``` ---
**Author:** ![alainia.spencer](https://avatars.discourse-cdn.com/v4/letter/a/6a8cbe/32.png) [@alainia.spencer](https://forum.inductiveautomation.com/u/alainia.spencer)\ **Post date:** [August 2, 2021, 1:31pm UTC](https://forum.inductiveautomation.com/t/building-a-dynagraph-card-in-perspective/48870/3 "2021-08-02T13:31:07Z")
This is perfect! Thank you very much! ---
**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\ **Post date:** [February 20, 2023, 4:37pm UTC](https://forum.inductiveautomation.com/t/building-a-dynagraph-card-in-perspective/48870/4 "2023-02-20T16:37:09Z")
Is it possible to scale the grid so that it always fits the boundaries of the component? Our numbers in the dataset for example are; 'x' max is 200 and 'y' is 27,000. This causes a thin vertical drawing that can barely be read. I tried adjusting some of the script to see what could scale it properly, but had no luck. Also, what can be done to make 'y' start at 0 from the bottom instead of the top? ---
**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:** [February 20, 2023, 6:03pm UTC](https://forum.inductiveautomation.com/t/building-a-dynagraph-card-in-perspective/48870/5 "2023-02-20T18:03:06Z")
The biggest thing is to scale the values into something more manageable for the graph. ```python import ast, math, easysvg, base64 def roundup(value): ''' Round value up to next 100 ''' return int(math.ceil(float(value)/10) * 10) scaleY = 100.0 dataIn = self.getSibling("Table").props.data xIn= dataIn.getColumnAsList(0) yIn= [y/scaleY for y in dataIn.getColumnAsList(1)] maxX = roundup(max(xIn)) maxY = roundup(max(yIn)) padding = 40 gridSpacing = 10 # 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=10, 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(int((maxY-y)*scaleY)), padding-10, y+padding, font_size=10, 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, (maxY-y1)+padding, x2+padding, (maxY-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()) ``` [/quote] ---
**Author:** ![rpavlicek](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/rpavlicek/32/55868_2.png) [@rpavlicek](https://forum.inductiveautomation.com/u/rpavlicek)\ **Post date:** [February 20, 2023, 8:02pm UTC](https://forum.inductiveautomation.com/t/building-a-dynagraph-card-in-perspective/48870/6 "2023-02-20T20:02:01Z")
Thanks, I was able to make some sense of it before your response, but that helps me see which ones are scaling. By making some minor adjustments, I was able to make it work better. I'm currently trying to adjust it so that it starts at a certain number instead of 0. It will take some playing around to do, but I should be able to get there.