3D Chart Click Drag OrientationAngle

Jon posted over 16 years ago

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

40

Alex posted over 15 years ago in reply to David Negley
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:

Wrap the entire UltraWebChart in a div and add javascript event handlers to the onmousedown and onmouseup events of the container div

Store the chart rotation changes in a couple of hidden HTML inputs on the form

Put the div, the UltraWebChart and the hidden fields in a WARP

At the end of the drag operation - onmouseup - fire an async postback of the WARP and re-render the Chart using the new rotation angles

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!
Cancel
Reply

Cancel
28496

Offline David Negley posted over 16 years ago

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 ...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Infragistics35.WebUI.UltraWebChart.v8.1, Version=8.1.20081.166, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb"
Namespace="Infragistics.WebUI.UltraWebChart" TagPrefix="igchart" %>
<%@ Register assembly="Infragistics35.WebUI.UltraWebChart.v8.1, Version=8.1.20081.166, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.UltraChart.Resources.Appearance" tagprefix="igchartprop" %>

<%@ Register assembly="Infragistics35.WebUI.UltraWebChart.v8.1, Version=8.1.20081.166, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.UltraChart.Data" tagprefix="igchartdata" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>
<script type="text/javascript">function body_onLoad()
{

var chartElement = document.getElementById("UltraChart1");
addEventListener(chartElement, "mousedown", chart_mouseDown);
addEventListener(chartElement, "mouseup", chart_mouseUp);

}

var currentX, currentY;
function chart_mouseDown(evt)
{

currentX = evt.offsetX;

currentY = evt.offsetY;
return false;
}
function chart_mouseUp(evt)
{

refreshChart(evt.offsetX - currentX, evt.offsetY - currentY);
return false;
}
function refreshChart(xIncrease, yIncrease)
{

// parse querystring
var currentPage = document.location.href.replace(/\?.*/, "");
var xRotation = document.location.href.match(/xRotation\=(\d+)/);
var yRotation = document.location.href.match(/yRotation\=(\d+)/);if (xRotation)
{

xRotation = parseInt(xRotation[1]) + xIncrease;

}

else

{

xRotation = xIncrease;

}
if (yRotation)
{

yRotation = parseInt(yRotation[1]) + yIncrease;

}

else

{

yRotation = yIncrease;

}
if (isNaN(xRotation))
{

xRotation = 0;

}
if (isNaN(yRotation))
{

yRotation = 0;

}
window.open(currentPage + "?xRotation=" + xRotation + "&yRotation=" + yRotation, "_self");
}

// addEventListener borrowed from ig_shared.js
function addEventListener(elem,evtName,fn,flag)
{
try{if(elem.addEventListener){elem.addEventListener(evtName,fn,flag==true); return;}}catch(ex){}
try{if(elem.attachEvent){elem.attachEvent("on"+evtName,fn); return;}}catch(ex){}
eval("var old=elem.on"+evtName);
var sF=fn.toString();
var i=sF.indexOf("(")+1;
try

{
if((typeof old =="function") && i>10)
{

old=old.toString();

var args=old.substring(old.indexOf("(")+1,old.indexOf(")"));
args=ig_shared.replace(args," ","");
if(args.length>0) args=args.split(",");

old=old.substring(old.indexOf("{")+1,old.lastIndexOf("}"));

sF=sF.substring(9,i);
if(old.indexOf(sF)>=0)return;
var s="fn=new Function(";
for(i=0;i<args.length;i++)
{
if(i>0)sF+=",";s+="\""+args+"\",";
sF+=args;

}
sF+=");"+old;eval(s+"sF)");
}

eval("elem.on"+evtName+"=fn");
}catch(ex){}
}
</script>
</head>

<body onload="body_onLoad();">

<form id="form1" runat="server">

<igchart:UltraChart ID="UltraChart1" runat="server" />
</form>
</body>

</html>

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (this.Request.QueryString["xRotation"] != null)
{
this.UltraChart1.Transform3D.XRotation += int.Parse(this.Request.QueryString["xRotation"]);
}
if (this.Request.QueryString["yRotation"] != null)
{
this.UltraChart1.Transform3D.YRotation += int.Parse(this.Request.QueryString["yRotation"]);
}
this.UltraChart1.Data.DataSource = Infragistics.UltraChart.Data.DemoTable.Table();this.UltraChart1.Data.DataBind();
}

}
Cancel
Reply

Cancel
26458

Offline Max Rivlin [Infragistics] posted over 16 years ago

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.XRotation
chart.Transform3D.YRotation
chart.Transform3D.ZRotation
Cancel
Reply

Cancel