WebChart View Angle Chooser Control: Client-Side 3D Rendering

2008-07-23T02:57:00Z

View Angle Chooser is a UI control that comes included with the Charting 2008.1 product. It displays three sides of a rectangular box which can be rotated using a mouse to select the best chart viewing angle. Check out the Charting toolbar demo to see it in action.

In this post I will explain how it was implemented. The challenge was to efficiently draw 2D shapes (which represent projected 3D surfaces) using only standard DHTML technologies: HTML, JavaScript, CSS and DOM. There is no standard JavaScript library for drawing shapes, and the ones that do exist are highly inefficient, potentially requiring 100s of div elements.

We followed a trick outlined on www.uselesspickles.com which allowed us to draw horizontal or vertical right angle triangles using div elements.

The idea is to color one of the border edges of a div element and make an adjacent border edge transparent. The width of the other two border edges should be set to zero as well as the width and the height of the div itself.

  <div style='width: 0px; height: 0px; border-left: 0px;
              border-bottom: 0px; border-top: #ff0000 50px solid;
              border-right: transparent 100px solid;'>
  </div>

A triangle produced by the above code looks like this:

The other three right angle triangles can be drawn similarly. To draw a triangle of any size and orientation we need to subdivide it into constituent vertical or horizontal right angle triangles. A possible subdivision for the following triangle looks like this:

Not all triangles can be divided into a finite number of constituent right angle triangles as seen in the above figure. In that case, the subdivision can be stopped after the desired level of detail has been reached.

Our first attempt at subdividing the sides of a rectangular box involved dividing each quadrilateral side of the box along the diagonal into two triangles and subsequently dividing each of the resultant triangles in turn. This is what such a subdivision might look like:

White dots started appearing from imperfect alignment where two triangles are joined along the hypotenuse. To eliminate that effect and to decrease the number of triangles we changed our subdivision method to first select the largest horizontal or vertical rectangle that can be inscribed inside of the quadrilateral side. One rectangle and four triangles are produced. The rectangle can then be drawn with a simple div while the triangles are subdivided the normal way. This is what such a subdivision might look like:

Notice that no two triangles are joined along the hypotenuse.

The following drawing shows the View Angle Chooser rectangular box with each of the constituent rectangles and triangles drawn with a different shade:

When drawing 2D triangles using this technique keep the following browser incompatibilities in mind:

Internet Explorer 6 – Transparency is not supported, but you can use the chroma filter and choose one color to be transparent. Your triangle divs will be of the following form:

  <div style='filter:chroma(color=#abcdef);
             width: 0px; height: 0px; border-left: 0px;
              border-bottom: 0px; border-top: #ff0000 50px solid;
              border-right: #abcdef 100px solid;'>
  </div>

Opera (any version) – Divs are at least as high as the current font, so there might be a problem drawing small triangles. To get around this problem do the following:

  <div style='line-height: 0px; font-size: 0px;
             width: 0px; height: 0px; border-left: 0px;
              border-bottom: 0px; border-top: #ff0000 50px solid;
              border-right: transparent 100px solid;'>
  </div>

Interestingly, this control looks best in Firefox 3.0 because it is automatically anti-aliased while it renders the fastest in Safari 3.1.

Share this post: email it! | bookmark it! | digg it! | reddit!

Drilling deeper into the Charting client-side API

2008-07-14T19:17:00Z

ComponentArt Charting 2008.1 introduces an easy way for end users to customize the look and feel of charts. This is accomplished through a JavaScript client-side API. Charting toolbar demo in ComponentArt’s new Charting gallery shows how this can be done.

The toolbar demo allows the end user change the following properties:

Chart type
Color scheme
Orientation
View angle
Projection
Perspective
XY, YZ and ZX plane visibility
Legend visibility
Series order
Series highlighting
Choice of rendering engines, high-quality or high-speed

These properties are accessed via a ComponentArt Web.UI ToolBar control.

Properties with an on/off state, such as the visibility of the XY, YZ and ZX planes and the visibility of the legend, are implemented using toolbar buttons directly.

Properties that have several options, such as chart type, color scheme, orientation, projection, series order, series highlighting and the engine selection, use Web.UI Menu controls connected to their corresponding toolbar buttons.

The perspective property uses a Web.UI ComboBox control embedded in the ToolBar.

View Angle Chooser is a custom control implemented entirely in JavaScript. It is packaged with the WebChart assembly and can be used in your application separately from the toolbar demo.

The control must be enabled on the server before it is used:

[ C# ]
targetChart.Clientside.ViewAngleChooserEnabled = true;

The HTML code that this control generates is obtained by calling the GetViewAngleChooserHTML() method of the WebChart JavaScript object:

[ JavaScript ]
WebChart1.GetViewAngleChooserHTML();

Position, sizes and colors can be customized. The View Angle Chooser control will be discussed in more depth in a future blog post.

WebChart’s client-side API must also be enabled on the server before it is used. This was accomplished by setting the Clientside.ClientsideApiEnabled property to true. After the API is enabled it can be accessed through a JavaScript object whose name is the UniqueID property of the WebChart.

[ C# ]
targetChart.Clientside.ClientsideApiEnabled = true;

The chart properties are accessed through the getter and setter methods:

[ JavaScript ]
WebChart1.set_mainChartType("AreaSmooth");
WebChart1.set_colorPalette("Organic");
WebChart1.set_legendVisibility(true);
WebChart1.set_planeXYVisible(false);

To refresh the chart, after the properties have been set, the refresh method needs to be called.

[ JavaScript ]
WebChart1.refresh();

There are two ways in which the refresh method can function: an AJAX callback, or a traditional postback. This can be selected in the server-side code.

[ C# ]
WebChart1.Clientside.RefreshMethod = ClientsideRefreshMethod.Callback;

In our demo, the refresh method is not called explicitly because the AutoRenderOnChange property is set to true in the server-side code. This will cause a refresh to happen automatically after any client-side property has been changed.

[ C# ]
WebChart1.Clientside.AutoRenderOnChange = true;

Client-side customization is not limited to just these properties. In fact any property in your web application, chart related or not, can be customized through the client-side API. This can be accomplished using custom properties:

[ JavaScript ]
ComponentArt.Charting.WebChart.set_customProperty(name, value);

To retrieve the value of the custom property in the server-side code call:

[ C# ]
public string GetCustomProperty(string key);

Once the custom property value is retrieved you can do anything with it, such as modify any aspect of the chart or effect a change in another part of the application. See the Drill-down demo for an example of how custom properties are used.

Share this post: email it! | bookmark it! | digg it! | reddit!

Bojan Jovanovic

WebChart View Angle Chooser Control: Client-Side 3D Rendering

Drilling deeper into the Charting client-side API