# Dynamic Instances Creation in View Canvas **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [January 2, 2024, 3:47pm UTC](https://forum.inductiveautomation.com/t/dynamic-instances-creation-in-view-canvas/83690 "2024-01-02T15:47:38Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\ **Post date:** [January 2, 2024, 3:47pm UTC](https://forum.inductiveautomation.com/t/dynamic-instances-creation-in-view-canvas/83690/1 "2024-01-02T15:47:38Z")
Hi, I trying to create dynamic instances of chart in View canvas. But instance not occupying the full space of the view canvas. ![empty space](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/1/318ca14050278531d3b49dd386e3cc97ae33c469.png) Script i have used in button ```auto 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** ![except ouput 44](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/a/aab27fa3421180103ec0e897acdba028c55296d2.png) **If chart count is 2** ![except ouput 4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/d/7d4d5ec07b9509485ab8c3661bed795fd1046987.png) **If chart count is 3** ![except ouput 3](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/9/69baa0343faffbfae97d219fd4e81d574aa961c4.png) **If chart count is 1** - **it should occupy full space** ![except ouput 1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/6/869f3b7cfca43f239a41abf67a43674996b2ff59.png) can anyone help me out how to achieve this feature in view canvas. If any mistake in script. please give me some suggestion ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [January 2, 2024, 5:24pm UTC](https://forum.inductiveautomation.com/t/dynamic-instances-creation-in-view-canvas/83690/2 "2024-01-02T17:24:20Z")
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. ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [January 2, 2024, 5:42pm UTC](https://forum.inductiveautomation.com/t/dynamic-instances-creation-in-view-canvas/83690/3 "2024-01-02T17:42:20Z")
I tried to replicate this myself and was unable to do so (albeit without your code). Two things to check: 1. 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. 2. Verify the _View being instanced_ is not forcing the Chart to only display at 50% of the width of the View. ---
**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\ **Post date:** [January 2, 2024, 6:29pm UTC](https://forum.inductiveautomation.com/t/dynamic-instances-creation-in-view-canvas/83690/4 "2024-01-02T18:29:11Z")
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 ---
**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\ **Post date:** [January 2, 2024, 6:31pm UTC](https://forum.inductiveautomation.com/t/dynamic-instances-creation-in-view-canvas/83690/5 "2024-01-02T18:31:21Z")
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 ---
**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\ **Post date:** [January 2, 2024, 7:11pm UTC](https://forum.inductiveautomation.com/t/dynamic-instances-creation-in-view-canvas/83690/6 "2024-01-02T19:11:31Z")
> [@prasath.t](#): > > In vision canvas has grow prams in dataset 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. ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [January 2, 2024, 7:22pm UTC](https://forum.inductiveautomation.com/t/dynamic-instances-creation-in-view-canvas/83690/7 "2024-01-02T19:22:37Z")
> [@prasath.t](#): > > Maybe I need to rework that. ```auto 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! ---
**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\ **Post date:** [January 2, 2024, 7:26pm UTC](https://forum.inductiveautomation.com/t/dynamic-instances-creation-in-view-canvas/83690/8 "2024-01-02T19:26:25Z")
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. ---
**Author:** ![msteele](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/msteele/32/77889_2.png) [@msteele](https://forum.inductiveautomation.com/u/msteele)\ **Post date:** [January 2, 2024, 7:37pm UTC](https://forum.inductiveautomation.com/t/dynamic-instances-creation-in-view-canvas/83690/9 "2024-01-02T19:37:17Z")
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.