Making graph more responsive to screen size?

[bhpowell]

I'm using a Cartesian graph to display data, and it's the primary focal point of the web page.  (I.e., the data on the graph is the most important thing to the user.)

I'm trying to make it more responsive to changes in screen size--e.g., look good on a computer, where the web page is likely to be larger in width than height, and on a phone, there the web page is likely to be larger in height than width.

There's a "Flexible resize" setting on the graph with options for "Do not resize", "Resize width", and "Resize width and height".  I was hoping the third one would do what I want, but it always seems to resize width and height proportionally.  I could see that I sometimes want this, but in my case, I want them to be resized independently.

Here are some screenshots showing what it looks like if I optimize for a desktop computer:

And here's what it looks like on my phone in portrait orientation.  I'd like to be able to use more of the vertical space.

While we're on the subject, I'd like the border around the plot area to be smaller, too.  I might as well ask for that while I'm here. 🙂

 

 

 Is there some other setting that will get me what I want?

If I wanted to write the code, could I use property nodes of the graph to resize it myself programmatically?  Can I query the size of the window?

[MilanR · Accepted solution]

Does leveraging the Minimum width and Minimum height settings get close to the behavior you are looking for?

When used with Flexible resize: Resize height and width the control scales down proportionally until the minimum is hit and it will continue to scale down the other axis as needed. You can control the vertical space that is kept by setting the Minimum height as desired:

---

I'd like the border around the plot area to be smaller

---

I was able to shrink the padding in the control by adding styles like the following to the HTML Source editor and with some light testing it seems to work okay. The graph padding is not a property exposed in the editor so modify the padding with care and make sure to test that it does not interfere with features you are relying on. As with any style change to NI controls make sure to test it during version upgrades and be prepared to adjust it as needed. The standard disclaimer for editing a built-in style is as follows:

---

If you modify the CSS to customize the appearance of controls, these modifications may not persist from release to release. If you modify the CSS from NI defaults, plan to test your code each time you upgrade to a new version of the G Web Development Software and make manual updates to your CSS styles if necessary.

---

Style to set the padding on graphs and charts:

<style>
  ni-cartesian-graph, ni-chart {
    padding: 5px;
  }
</style>

Before and after shrinking the padding:

could I use property nodes of the graph to resize it myself programmatically?

---

In flexible layout mode the browser is responsible for layout and sizing of controls based on the layout configuration made in the editor. Attempting to set the size of a control in a flexible container via a property node results in the following runtime error: Size cannot be used for controls contained in a flex container.

[bhpowell]

Thanks.

I think the minimum width/height will work well enough.  I'll need to experiment.

I have a question about the HTML source editor.  I haven't used it, or even read about it, so the answer might be in the documentation.  But while I have you here, are these assumptions correct?

• The changes I make (such as the padding on the ni-cartesian-graph style) are persisted with my source code.
• The danger of them not working in the future is from NI changing something about the graph--for example, if you renamed ni-cartesian-graph to ni-xy-graph.

[Jens_S]

---

The changes I make (such as the padding on the ni-cartesian-graph style) are persisted with my source code.

 Yes as long as you don't mess around with the auto generated code sections (they are marked with comments). I personally use the HTML editor to add custom CSS styles.

The danger of them not working in the future is from NI changing something about the graph--for example, if you renamed ni-cartesian-graph to ni-xy-graph.

---

Yes, there is a paragraph in the documentation that explicitly warns about this. After an update of the G Web Development Software you should check your projects thoroughly if they still behave and look like before.

[yura_beno]

I must be too tired but I can't find the Flexible Resize option, was it moved from the Layout section? 

On the same topic, any idea why resizing Tank works as expected, but resizing Slider doesn't?

[MilanR]

---

@yura_beno wrote:

I must be too tired but I can't find the Flexible Resize option, was it moved from the Layout section? 

---

In order to configure flexible layout settings for a control it needs to be in a flexible layout container, i.e. either the whole panel itself must be configured for flexible layout or one of the tab frames in a tab control. The Designing a Responsive User Interface topic describes how to configure flexible layout for a panel.

[yura_beno]

Thank you so much, that worked! While I have your attention, how do I scale text and numbers (graph axe labels) that seem to stay the same size http://bionichaos.com/IEEG_2.html 

Also, the resolution of the chart trace seem to be very low, especially at certain window size. Can it be improved? I'm testing in Edge mostly and Chrome a bit..

Thank you

[Jens_S]

Resizing text for different resolutions and scaling is done by the browser. There is most likely a way to do it with CSS but I don't really understand why you want to do this by yourself.

What I do is to make sure that the elements on my webpage are sized and located "properly" so zooming in and out in the browser (using resizeable panel) does not mess around to much with the elements. Zooming in and out in a browser windows is something very natural and does work very well for 95% of my use cases.