Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jon
70
3D Chart Click Drag OrientationAngle
posted

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

Parents
  • 28496
    Offline posted

    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+="\""+argsIdea+"\",";

    sF+=argsIdea;

    }

    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();

    }

    }

Reply Children