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.
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 (6.7 KB)
Sample view.
dynacard_perspective_2021-08-02_0532.zip (51.0 KB)
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())
3 Likes
This is perfect! Thank you very much!
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?
The biggest thing is to scale the values into something more manageable for the graph.
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]
1 Like
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.
1 Like