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!
