Hi,
I trying to create dynamic instances of chart in View canvas. But instance not occupying the full space of the view canvas.
Script i have used in button
def runAction(self, event):
count = int(self.getSibling("Label_0").props.text)
# Calculate the number of rows and columns dynamically based on the screen size
columns = min(count, 2) # Assuming a maximum of 2 columns for better adaptability, adjust as needed
rows = -(-count // columns) # Equivalent to ceil(count / columns)
# Calculate the dynamic width and height for each chart based on the number of rows and columns
chart_width = 100 / columns
chart_height = 100 / rows
# Create and add Time Series Chart instances based on the count
instances = []
for i in range(count):
chart_name = "UniqueInstanceName_{}".format(i)
# Calculate position dynamically based on rows and columns
row = i // columns
col = i % columns
# Calculate absolute position
position = {
"position": "absolute",
"top": "{}%".format(row * chart_height),
"left": "{}%".format(col * chart_width),
"bottom": "auto",
"right": "auto",
"zIndex": "auto",
"width": "{}%".format(chart_width),
"height": "{}%".format(chart_height),
"viewPath": "AlertsModule/Pages/Management/Popups/Tag_Graph_Chart",
"viewParams": {},
"style": {
"classes": ""
}
}
instances.append(position)
# Directly modify instances in the View Canvas
self.parent.parent.getChild("FlexContainer_0").getChild("ViewCanvas").props.instances = instances
Output i want
If chart count is 4
If chart count is 2
If chart count is 3
If chart count is 1 - it should occupy full space
can anyone help me out how to achieve this feature in view canvas.
If any mistake in script. please give me some suggestion
One problem I see is that you are calculating chart_width outside the loop so you're not going to get the full width chart for the last chart when there's an odd count. That doesn't explain the main problem though.
If your chart is in a coordinate view then that may have a fixed maximum size. Try embedding it in a flex view instead.
1 Like
I tried to replicate this myself and was unable to do so (albeit without your code).
Two things to check:
- Verify your script is supplying the correct values to each instance by verifying within your Perspective Property Editor panel or by adding some logging within your code.
- Verify the View being instanced is not forcing the Chart to only display at 50% of the width of the View.
Hi @cmallonee
In vision canvas has grow prams in dataset we need to mention grid number 0 1 (ie position number)
Why In perspective there is no option like that?
Is there any trick i am missing?
Let me know any other simpler way to achieve this feature
Can you help me out
In view canvas have default width and height i have unchecked now . Its working fine for 4 charts
I need to tune the script dynamically adapt for the count.
Yes for final chart it’s not taking full width of the chart. May be i need to rework that
If you find anything to tune in my script. Please let me know
I see nothing like this in Vision, but regardless, Perspective and Vision use two completely different technologies to determine layout and position. You should not expect 1:1 relations in how Perspective and Vision do something.
def transform(self, value, quality, timestamp):
count = self.parent.custom.repeaterCount
# Calculate the number of rows and columns dynamically based on the screen size
columns = min(count, 2) # Assuming a maximum of 2 columns for better adaptability, adjust as needed
rows = -(-count // columns) # Equivalent to ceil(count / columns)
# Create and add Time Series Chart instances based on the count
instances = []
for i in range(count):
chart_name = "UniqueInstanceName_{}".format(i)
# Calculate the dynamic width and height for each chart based on the number of rows and columns
chart_width = 100 / columns
if count % 2 and i == count - 1: # Last chart and it requires full width.
chart_width = 100
chart_height = 100 / rows
# Calculate position dynamically based on rows and columns
row = i // columns
col = i % columns
# Calculate absolute position
position = { ...
If you, in future, want to accomodate up to three columns then you have some more work to do!
1 Like
If 4 is the max number, I would create the view for each layout scenario exactly the way you want. Then copy the props and either hard code them into the script or alter your script until it matches the required props for each scenario.
1 Like
Or consider a flex repeater, and the wrap functionality for flexbox children, to make it a little more dynamic. This presupposes being able to call the same embedded view for all of these cards. Or you can do position:relative within the View Canvas. This will also set the groundwork for a more responsive design for different screen sizes or mobile devices.
1 Like
