Forums Home / Wijmo / General Discussion
Posted by: nilesh_nichal on 8 May 2025, 1:57 am EST
nilesh_nichal
Posted 8 May 2025, 1:57 am EST
Hi,
We want to allow users expand/stretch or collapse/shrink the wijmo chart based on their requirement inside a dashboard. So if the user wishes to see the chart in a bigger view the chart can be expanded vertically or horizontally within the view using the cursor. This should make sure all other graphs on the dashboard are accordingly adjusted. Please let us know if this can be done.
We are using
Wijmo verison: 5.20242.21
Angular version: 17.3.12
vivek.pannu
Posted 9 May 2025, 5:02 am EST
Hi Nilesh,
The flexChart auto-adjusts itself according to the available space, just make sure that the height and width properties of the flexChart are set such that it covers the whole area in the section, i.e., you can set width, height to 100%, if a scrollbar appears try reducing the percentage.
Please refer to the following sample demonstrating the same - https://stackblitz.com/edit/angular-aksvk1mq?file=src%2Fapp%2Fapp.component.ts
Regards
nilesh_nichal
Posted 12 May 2025, 6:40 am EST
Hi Vivek,
In the provided solution if we expand a single graph horizontally all the graphs in that column get expanded, this happens in both horizontal and vertical expansion. Can we have a solution where only the specific graph gets expanded in the direction it is stretched and not all in that row or column? Also, we want the graph to change positions on dragging, so that the user can easily drag and customize the position of the graph in a dashboard, can this be achieved in the above code?
Thank you!
vivek.pannu
Posted 13 May 2025, 1:56 am EST
Hi Nilesh,
We are not sure about your exact project structure and implementation, however, you can keep the flexChart in any layout it will auto-adjust according to the available space. You can refer to the following updated sample that we prepared as per your description, with individual chart resize and dragging functionality - https://stackblitz.com/edit/angular-ajf1vacx?file=src%2Fapp%2Fapp.component.html
In case, you face any issues, please share a small sample with your current project implementation so that we can have a better idea of your requirements and assist you with better solutions.
Regards
nilesh_nichal
Posted 14 May 2025, 5:16 am EST
Hi Vivek,
In the given code, on expanding the chart it gets overlapped with other charts. We want the other chart to accordingly shrink to fit into the space.
nilesh_nichal
Posted 14 May 2025, 5:19 am EST - Updated 14 May 2025, 5:24 am EST
Hi Vivek,
I have two requirements I need help with:
Drag-and-Drop Functionality:
I would like to implement drag-and-drop for these charts. Specifically, users should be able to drag one chart and drop it into another section of the layout. Please provide solution where I can enable drag-and-drop behavior between chart containers?
Controlled Expansion Behavior:
In the current layout, the dashboard is divided into two rows (row 1 and row 2). When expanding a chart or section in row 1, the charts in row 2 are also shifting, which I don’t want.
My goal is to restrict the expand/collapse behavior to only row 1, without affecting or moving row 2 charts. How can I achieve this separation so that row 2 remains fixed and unaffected by changes in row 1?
I have attached below screenshot for your reference.
vivek.pannu
Posted 15 May 2025, 8:27 am EST
Hi Nilesh,
You can refer to the following updated sample - https://stackblitz.com/edit/angular-6qumzgst?file=src%2Fapp%2Fapp.component.ts
We tried to complete all the requirements you mentioned in your previous comment. In case you think there is still something missing, please share a small sample with the template in which you want to put the FlexCharts. You can also update the attached sample to implement the dashboard template with the resizing and dragging functionality that you’ll be using. So that we can have a better idea of your requirements, and we can adjust the charts accordingly in the provided layout.
Regards
nilesh_nichal
Posted 16 May 2025, 2:49 am EST
Hi Vivek
Dragging and expanding are two different use cases dragging a chart and dropping it shouldn’t change the size of other charts. For example in a dashboard of 3 charts per row, if I drag a chart from second row and drop it on the right of second item on the first row the dragged item should now be the third chart in first row and the original chart at that position should move down. So no chart shrinks just the position gets changed.
And for expanding it’s becoming slightly difficult to get the expand icon on hovering the edges and hence this might affect the user experience. Can we have a separate icon similar to the one in previous solution provided(attached a screenshot for reference). The functionality of expand should work like the one in the current solution just the icon will change
Thanks.
vivek.pannu
Posted 20 May 2025, 1:02 am EST
Hi Nilesh,
Can you please share a small sample with your desired layout implementation, so that we can have a better idea about your requirements, i.e., in which layout you want to insert the charts and what issues you are facing. You can keep empty boxes or div elements in the layout instead of the flexChart, We can provide you with a better solution when we have a proper layout sample from your side.
Regards
nilesh_nichal
Posted 20 May 2025, 1:54 am EST - Updated 20 May 2025, 2:07 am EST
Hi Vivek,
I have shared a zip file in which we already have the drag a chart and drop it to a position functionality. We just want you provide us with the expand chart feature in it. On expanding the chart shouldn’t overlap with other charts, and should accordingly get adjusted by moving sideways or down to occupy the remaining space.DynamicDashboard-angular-sourcecode (1).zip
nilesh_nichal
Posted 20 May 2025, 1:56 am EST
Hi Vivek,
I have shared a zip file in which we already have the drag a chart and drop it to a position functionality. We just want you provide us with the expand chart feature in it. On expanding the chart shouldn’t overlap with other charts, and should accordingly get adjusted by moving sideways or down to occupy the remaining space.DynamicDashboard-angular-sourcecode (1).zip
nilesh_nichal
Posted 20 May 2025, 2:00 am EST
Hi Vivek,
I have shared a zip file in which we already have the drag a chart and drop it to a position functionality. We just want you provide us with the expand chart feature in it. On expanding the chart shouldn’t overlap with other charts, and should accordingly get adjusted by moving sideways or down to occupy the remaining space.DynamicDashboard-angular-sourcecode (1).zip
vivek.pannu
Posted 22 May 2025, 4:56 am EST
Hi Nilesh,
We have modified the sample as per your requirement.
You’ll be able to drag the tiles in the sample, which was already implemented. We haven’t made any changes in that; we have made the tiles resizable, and increasing/decreasing the size of any tile will not overlap any other tile. The tiles will be auto-adjusted according to the available space in their respective row and can also be shifted to other rows if there is not enough space in their original row. We tried to complete all your requirements in the sample as you have mentioned until now.
Please note that, we didn’t face any issues related to the FlexChart or any other Wijmo control while doing the required implementation. The changes we made relate solely to layout behavior using plain JavaScript and nothing related to the Wijmo Controls. If the current layout in the sample still doesn’t meet your expectations, you can make the necessary modifications yourself on your end as it is plain javascript implementation. Rest be assured, modifying the layout will not impact the functionality of Wijmo controls like FlexChart or FlexGrid, as they automatically adjust themselves within the available space.
If you still face any issues, related to Wijmo controls functionality, please share a sample with your complete layout implementation (with all the dragging and resizing functionalities that you have in your dashboard layout) in which the issue can be replicated, so that we can investigate the issue further and assist you accordingly.
Regards
