I am looking for a way that the user can click and drag a 3D chart (such as a 3DColumnChart or 3DBarChart) to view it from different angles. Is this possible with the chart? As in the user could somehow click and rotate/scale the chart in real time (not just by manually setting the OrientationAngle property using a control)?
I have seen a couple sites briefly mention the ChartTransformSomething classes and events. Would these somehow be involved? Any advice and/or code snippet would be greatly appreciated.
Thanks, Jon
Click and drag for 3d charts is only implemented for win chart. On the web side, you can still rotate the chart, but you have to do it on the server. All you have on the client is an image, so your only chance of implementing click and drag is to continuously generate callbacks to get a new chart image, or perhaps using the WebAsyncRefreshPanel. Rotating the chart on the server is actually quite simple. All you have to do is change these 3 properties:chart.Transform3D.XRotationchart.Transform3D.YRotationchart.Transform3D.ZRotation
i've never seen this done before, but i started to make a sample to demonstrate one possible way of doing it. i used the querystring to pass the rotation from the client to the server.
it is flawed though, as the mouseup doesn't always fire. perhaps this will get you started ...
<%
<
{
addEventListener(chartElement,
}
var
currentX = evt.offsetX;
currentY = evt.offsetY;
refreshChart(evt.offsetX - currentX, evt.offsetY - currentY);
xRotation = parseInt(xRotation[1]) + xIncrease;
xRotation = xIncrease;
yRotation = parseInt(yRotation[1]) + yIncrease;
yRotation = yIncrease;
xRotation = 0;
yRotation = 0;
// addEventListener borrowed from ig_shared.js
old=old.toString();
args=ig_shared.replace(args,
sF=sF.substring(9,i);
sF+=args;
eval(
</
using
I have implemented similar functionality using the UltraWebChart in 3D Pie Chart mode. The Chart does not continously update during the drag operation, but it fires the postback at the end when the user releases the mouse button.
Here's an outline of how I did it:
One thing to note is to remember to transform the X-Y drag coordinates into changes of rotation angle, you need a bit of Maths for this in the BLOCKED SCRIPT
ZRotation = (180 / Math.PI) * Math.asin((StartYPos - event.y)/ ChartDivWidth);
I hit a stumbling block when coding the X-Y rotation as the Transform Rotation properties appear to not work quite as expected. But the Z-rotation works fine.
I can post the full code if anyone is that intetested!
Hi
I am also currently looking out for the same that you had implemented. I was trying to Rotate the 3D chart on the server side and its taking longer time and some times doesnt fire up the events.
Can you please share your code to dhanashree_91@yahoo.com
Thanks Again
Hi,
Look at my friend's Realtime 3D bar-chart component: http://www.parsec.hu/ChartIt's free to download. I am sorry if you are looking for some development technics instead of using complete component.