|
 Do you have an example of pan/zoom for a 3D surface graph? |
| Posted by Mike on Mar-07-2017 07:04 |
|
Hi,
First, thank you for the excellent set of examples that are bundled with ChartDirector. I've made fast progress in my ChartDirector learning curve because of them. I've been able to successfully generate a 2D contour map with pan/zoom features based on your examples. But I'm having trouble applying the same techniques to a 3D surface chart. I suspect that the WinChartViewer.setViewAngle, coupled with the 3D nature of the plot has introduced 3D rotations/translations that I need to take into account, but I'm having difficulties in sorting them out. Any hints/examples would be most welcome!
Thank you! |
| Re: Do you have an example of pan/zoom for a 3D surface graph? |
| Posted by Peter Kwan on Mar-08-2017 15:41 |
|
Hi Mike,
I do not really have an example, but in charts, zooming and panning are just changes in axis scale. For example, in the "Surface Chart (1)" sample code, the original x and y axis scales are from -10 to 10. If you add the following line, it will zoom in to display the part from -5 to 5.
c.xAxis().setLinearScale(-5, 5);
c.yAxis().setLinearScale(-5, 5);
If you then changes the x-axis scale to -4 to 6, the chart will pan in the x-direction.
Once you know how to zoom and pan, you would need to create a user interface to allow the user to control the axis scale. The chart viewer has a built-in user interface so that users can drag on it to zoom and scroll, or to use the mouse wheel for zooming. You can also use external controls not related to ChartDirector to control the axis scale. For 2D charts, the examples in ChartDirector using external controls are;
- Using a scrollbar control (see "Zooming and Scrolling with Track Line (1)")
- Using a slider control for zooming (see "XY Zooming and Scrolling")
- Using a date picker to allow the user to directly select the x-axis range (see "Zooming and Scrolling with Track Line (2)")
- Using a button to allow the axis to be set to a specific range (eg. the "Last 90 days" button in the web based Zooming sample code - available if your programming language editions of ChartDirector has web sample code)
- Older versions of ChartDirector does not have the mouse wheel integrated into the chart viewer, so it includes sample code to use the mouse wheel for zooming similar to how an external control is used.
- One of the sample code in older versions of ChartDirector includes 8 directional buttons to allow the user to press the button to pan on the 8 directions.
- ChartDirector 6 also comes with the "Viewport Control", which is essentially a fancy 2D scrollbar.
For your case, you would need to use your code to build the user interface for zooming scrolling. For example, in the simplest case, you can use the mouse left/right click to control the axis scale, thereby zooming in and out.
For the 3D charts, if the data points fall outside the x or y axis scale (eg. the axis scale is set to x = -5 to 5, but there is a data point at x = 9), the data point will be ignored as if it does not exist. If a data point falls outside of the z-axis scale, it will be adjusted in the z-direction to within the axis scale. For example, if your data looks like a cone with the z-data from 0 to 10, and the z-axis is only from 0 to 5, then all data points above z = 5 will be moved to z = 5. The zone would then look like it is chopped at z = 5, with a flat surface at z = 5.
Regards
Peter Kwan |
| Re: Do you have an example of pan/zoom for a 3D surface graph? |
| Posted by Mike on Mar-11-2017 07:03 |
|
Thanks for the reply Peter. I'll look into it more as I progress.
Best regards,
Mike |
| Re: Do you have an example of pan/zoom for a 3D surface graph? |
| Posted by Michael on Oct-24-2018 23:53 |
|
Dear Peter,
I came to this Forum topic as I searched for a way to pan/zoom a 3D scatter plot. I understand about changing the scale of axes using setLinearScale(). However, iin order to use setLinearScale() you need to know the current min/max values of the axis. How can I query the chart for this information? Axis().getMinValue() is not populated unless the chart has been auto-scaled, but if I use chart.layout() to auto-scale, then subsequent calls to setLinearScale() seem to be ignored.
Can you help me pan/zoom a 3D scatter chart?
Thank you- |
| Re: Do you have an example of pan/zoom for a 3D surface graph? |
| Posted by Peter Kwan on Oct-25-2018 21:39 |
|
Hi Michael,
Usually, it is done as follows:
(a) When the chart is first drawn, the entire surface is drawn using auto-scaling. Your code can then use Axis.getMinValue and Axis.getMaxValue to obtain the axis max and min values and save them for future use.
(b) When the user zoom or pan, your code can redraw the chart, but instead of using auto-scaling, your code can use setLinearScale to set the axis scale. The axis scale is determined by the user interface (such as by the position of the zoom level slider bar) and the max and min values obtained in (a) above.
Hope this can help.
Regards
Peter Kwan |
| Re: Do you have an example of pan/zoom for a 3D surface graph? |
| Posted by Michael on Oct-26-2018 20:08 |
|
Dear Perter,
Thank you. This worked pretty well.
MRO |
|
Forum Home
Search
Message List
Post Message