Bojan Jovanovic

Silverlight Chart: Overview of Chart Types

2009-12-15T14:27:00Z

This blog post lists all the chart types that Silverlight Chart supports. They are divided into several sections: bar charts, pie and doughnut charts, area charts, line charts, marker and bubble charts and financial charts. Next to each chart type illustration we provide the XAML code block that generated it.

Bar Charts

The following bar chart types are included: Rectangle, Block, RoundedBlock and Cylinder.

Code	Illustration
<CA:Chart ChartKind="Rectangle" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Block" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="RoundedBlock" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Cylinder" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>

Pie/Doughnut Charts

The following pie/doughnut chart types are included: 2D pie, 3D pie, 2D doughnut and 3D doughnut.

Code	Illustrations
<CA:Chart ChartKind="Pie2D" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Pie" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Doughnut2D" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Doughnut" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>

Area Charts

The following area chart types are included: area chart with a polygonal edge (2D and 3D), area chart with a smooth edge (2D and 3D) and an area chart with a step edge (2D and 3D).

Code	Illustration
<CA:Chart ChartKind="Area2D" LineKind="Polygon" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Area2D" LineKind="Smooth" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Area2D" LineKind="Step" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Area" LineKind="Polygon" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Area" LineKind="Smooth" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Area" LineKind="Step" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>

Line Charts

The following line chart types are included: line chart with a polygonal edge (2D and 3D), line chart with a smooth edge (2D and 3D) and a line chart with a step edge (2D and 3D).

Code	Illustration
<CA:Chart ChartKind="Line" LineKind="Polygon" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Line" LineKind="Smooth" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>
<CA:Chart ChartKind="Line" LineKind="Step" Width="200" Height="130" XValue="X" DataSource="{StaticResource DataValues}"> <CA:Chart.DataSeries> <CA:Series YValue="Y"/> </CA:Chart.DataSeries> </CA:Chart>

Marker/Bubble Charts

The following marker styles are included: Circle, CircleSimple, Square, SquareSimple, Triange, TriangleSimple, Diamond, DiamondSimple, Plus, PlusSimple, Cross and CrossSimple.

The same marker styles can be used for bubble charts as well.

Code

Illustration

<CA:Chart ChartKind="Marker" Width="200" Height="130" 
        XValue="X" DataSource="{StaticResource DataValues}">
    <CA:Chart.DataSeries>
        <CA:Series YValue="Y" MarkerStyle="Circle"/>
    </CA:Chart.DataSeries>
</CA:Chart>

<CA:Chart ChartKind="Bubble" Width="200" Height="130" 
        XValue="X" DataSource="{StaticResource DataValues}">
    <CA:Chart.DataSeries>
        <CA:Series YValue="Y" ZValue="Z" 
            MarkerStyle="Circle"/>
    </CA:Chart.DataSeries>
</CA:Chart>

Financial Charts

Two kinds of financial charts are supported: Open-High-Low-Close and candlestick.

Code

Illustration

<CA:Chart ChartKind="OpenHighLowClose" 
        Width="200" Height="130" 
        XValue="X" DataSource="{StaticResource DataValues}">
    <CA:Chart.DataSeries>
        <CA:Series OpenValue="Open" CloseValue="Close" 
            HighValue="High" LowValue="Low"/>
    </CA:Chart.DataSeries>
</CA:Chart>

<CA:Chart ChartKind="Candlestick" Width="200" Height="130" 
        XValue="X" DataSource="{StaticResource DataValues}">
    <CA:Chart.DataSeries>
        <CA:Series OpenValue="Open" CloseValue="Close" 
            HighValue="High" LowValue="Low"/>
    </CA:Chart.DataSeries>
</CA:Chart>

The following data was used to generate the illustrations:

<UserControl.Resources>
    <Local:DataValueCollection x:Key="DataValues">
        <Local:DataValue X="A" Y="90" Z="13" Open="90" Close="120" High="135" Low="85"/>
        <Local:DataValue X="B" Y="70" Z="5" Open="115" Close="145" High="145" Low="115"/>
        <Local:DataValue X="C" Y="120" Z="23" Open="156" Close="150" High="167" Low="145"/>
        <Local:DataValue X="D" Y="135" Z="14" Open="135" Close="123" High="145" Low="120"/>
        <Local:DataValue X="E" Y="100" Z="11" Open="110" Close="160" High="170" Low="110"/>
        <Local:DataValue X="F" Y="80" Z="18" Open="165" Close="130" High="175" Low="120"/>
        <Local:DataValue X="G" Y="135" Z="6" Open="120" Close="90" High="125" Low="90"/>
        <Local:DataValue X="H" Y="150" Z="20" Open="85" Close="110" High="115" Low="80"/>
        <Local:DataValue X="I" Y="120" Z="12" Open="110" Close="135" High="165" Low="95"/>
        <Local:DataValue X="J" Y="130" Z="17" Open="135" Close="156" High="160" Low="120"/>
        <Local:DataValue X="K" Y="145" Z="11" Open="150" Close="120" High="150" Low="100"/>
        <Local:DataValue X="L" Y="110" Z="14" Open="120" Close="110" High="120" Low="100"/>
    </Local:DataValueCollection>
</UserControl.Resources>

DataValue and DataValueCollection were defined as follows:

public class DataValue
{
    public string X { get; set; }
    public double Y { get; set; }
    public double Z { get; set; }
    public double Open { get; set; }
    public double Close { get; set; }
    public double High { get; set; }
    public double Low { get; set; }
}

public class DataValueCollection : Collection { }

Silverlight Chart Drilldown, Part Two: Adding a BreadCrumb Control

2009-12-03T06:02:00Z

In my previous blog post, Silverlight Chart Drilldown: Part One, I described the steps necessary to create a drill-down chart using ComponentArt's Silverlight Chart. To navigate backwards to higher levels of drill-down we used a simple button that would take us back one level at a time. In this blog post I will explain how to use ComponentArt's BreadCrumb control to be able to navigate better during drill-down. A BreadCrumb control will allow us to go back multiple drill levels at a time as well as provide us with a visual representation of the current drill level.

First, we need to add a reference to our project to the navigation assembly which contains the BreadCrumb control. Also, we need to add a reference to the Navigation namespace to our CS and XAML files.

xmlns:Navigation="clr-namespace:ComponentArt.Silverlight.UI.Navigation;assembly=ComponentArt.Silverlight.UI.Navigation"

using ComponentArt.Silverlight.UI.Navigation;

In the XAML code for our user control we will replace the Back Button with a BreadCrumb control that is the same width as our chart.

 <Navigation:BreadCrumb x:Name="ChartBreadCrumb" HideSplitButton="True" Width="400" Height="26" />

At load time, we will create the whole BreadCrumb structure. Each possible chart in our drill-down sequence will have a corresponding BreadCrumbItem. First, we will start with the BreadCrumbItem representing the top most chart. To its Items collection we will add BreadCrumbItems representing all the charts that can be obtained by drilling once into the top level chart. This process will continue in a similar fashion until we have created all possible BreadCrumbItems.

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    drillDownManager.SetupBreadCrumbs(ChartBreadCrumb);
}

public void SetupBreadCrumbs(BreadCrumb breadCrumb)
{
    chartBreadCrumb = breadCrumb;

    BreadCrumbItem topBC = new BreadCrumbItem() { Text = "1990's" };
    topBC.Tag = new BreadCrumbTag(0, new DateTime(1991,1,1), new DateTime(2001,1,1));

    for (int year = 1991; year < 2001; year++)
    {
        BreadCrumbItem yearBC = new BreadCrumbItem() { Text = "Year: " + year };
        yearBC.Tag = new BreadCrumbTag(1, new DateTime(year, 1, 1), new DateTime(year, 1, 1).AddYears(1));

        for (int month = 1; month <= 12; month++)
        {
            BreadCrumbItem monthBC = new BreadCrumbItem() { Text = "Month: " + (new DateTime(year, month, 1)).ToString("MMM")};
            monthBC.Tag = new BreadCrumbTag(2, new DateTime(year, month, 1), new DateTime(year, month, 1).AddMonths(1));
            yearBC.Items.Add(monthBC);
        }
        topBC.Items.Add(yearBC);
    }

    chartBreadCrumb.RootItem.Items.Add(topBC);
    chartBreadCrumb.RefreshTree();
    chartBreadCrumb.SelectedItem = topBC;
    chartBreadCrumb.BreadCrumbClick += new BreadCrumb.BreadCrumbClickEventHandler(ChartBreadCrumb_BreadCrumbClick);
}

Notice that to each BreadCrumbItem I have assigned a Tag that will keep track of the drill level that corresponds to the BreadCrumbItem and the start of the x-range for the corresponding chart which will allow us to find the right BreadCrubItem during drill-down.

There are two more items that need to be taken care of. First, we need to initiate a back action when a BreadCrumbItem is clicked (clicking on the item that corresponds to the current chart does nothing). Depending on the drill level we might need to execute a multiple back action.

private void ChartBreadCrumb_BreadCrumbClick(object sender, BreadCrumbCommandEventArgs bcce)
{
    int newDrillLevel = (bcce.ItemSource.Tag as BreadCrumbTag).DrillLevel;
    if (drillLevel != newDrillLevel)
        Back(drillLevel - newDrillLevel);
}

Second, we need to select a new BreadCrumbItem after a drill-down action was performed. This will be done in the DrillStepCompleted event handler.

void SalesDrillDownManager_DrillStepCompleted(object sender, DrillDownEventArgs e)
{
    if (chartBreadCrumb != null)
    {
        foreach (BreadCrumbItem bItem in chartBreadCrumb.SelectedItem.Items)
        {
            if ((DateTime)((Series)CurrentChart.DataSeries[0]).DataPoints[0].X == (bItem.Tag as BreadCrumbTag).RangeStart)
            {
                chartBreadCrumb.SelectedItem = bItem;
                break;
            }
        }
    }

Now we have a fully functional BreadCrumb control that compliments our drilldown chart and gives us a more powerful navigation interface.

The code discussed in this blog can be found here.

Silverlight Chart Drilldown: Part One

2009-11-11T20:15:00Z

This blog post will demonstrate how to use the drilldown capability of the Silverlight Chart control. Silverlight Chart Drilldown: Part Two and Part Three will show how to integrate Chart drilldown with a BreadCrumb control and a RangeSlider control respectively. We will create a bare-bones drilldown chart with three drill levels showing yearly data, monthly data and daily data. Here are the steps that need to be taken:

Define the chart in XAML

In XAML we will define the chart for the top-most drill level. Charts for other drill levels will be instantiated in code as needed. Of the chart properties, only a single data series has been defined in XAML. All other chart properties will be set in code.

        <StackPanel Orientation="Vertical">
            <Button Content="Back" Click="Button_Click" Width="80" />
            <Grid>
                <ComponentArt:Chart x:Name="DrillChart">
                    <ComponentArt:Chart.DataSeries>
                        <ComponentArt:Series/>
                    </ComponentArt:Chart.DataSeries>
                </ComponentArt:Chart>
            </Grid>
        </StackPanel>

Notice that we have placed the chart into a Grid control. Other charts will be attached to the same element and since it is a Grid they will occupy the same spot in space which is exactly what we want. We have also defined a Button that will take us back to the previous drill levels.

Extend the DrillDownManager class

	public class MyDrillDownManager : DrillDownManager

Charting assembly includes a DrillDownManager class that encapsulates all the drilldown plumbing needed for drilling up or down including all animations. All that is left for us to implement is some business logic. We will need to extend the DrillDownManager with our own class, here called MyDrillDownManager, to define an abstract method and override another virtual method.

Call the base constructor

The constructor will accept the top-level drill chart and pass it on to the base constructor. In the base constructor this chart will be assigned to the CurrentChart property.

        public MyDrillDownManager(Chart topLevelChart)
            : base(topLevelChart)
        {
            InitializeChart(CurrentChart);
            LoadData(CurrentChart, new DateTime(1991,1,1), new DateTime(2001,1,1));
        }

Set the desired properties on the chart

At this point we will also set the properties we wish to set on the chart by calling a helper method InitializeChart.

        InitializeChart(CurrentChart);

    ...

        private void InitializeChart(Chart chart)
        {
            chart.Width = 400;
            chart.Height = 300;
            chart.XValue = "Date";
            chart.ChartKind = ChartKind.RoundedBlock;

            chart.DataSeries.Clear();
            Series series = new Series();
            series.YValue = "Value";
            chart.DataSeries.Add(series);

            chart.MouseLeftButtonDownOnDataPoint += new EventHandler<SelectedDataPointEventArgs>(Chart_MouseLeftButtonDownOnDataPoint);
        }

Notice that we have also created a handler for the mouse click on a data point event at which point we will initiate a drilldown.

Load data for the chart

        LoadData(CurrentChart, new DateTime(1991,1,1), new DateTime(2001,1,1));

We will load chart data by calling LoadData helper method and supplying the chart and a start and end date indicating the range of data to be included. For the purpose of this demo, LoadData generates random data values with the appropriate dates for each drill level. In reality, data will probably come from a database.

Initiate drilldown

In the handler for the mouse click on a data point event we will call Drill method to initiate a drilldown.

        private void Chart_MouseLeftButtonDownOnDataPoint(object sender, SelectedDataPointEventArgs e)
        {
            if (drillLevel < 2)
            {
                drillLevel++;
                Drill(e.DataPointContext.DataPoint.X);
            }
        }

drillLevel member variable keeps track of the current drill level we are currently at (value of 0 for years, 1 for months and 2 for days). We need to increment this variable every time we drill and decrement it every time we go back as you will see below.

Implement the abstract method GetDrillChart

After drilldown has been initiated, DrillDownManager will call an abstract method GetDrillChart to request a new chart instance for the next drill level. We need to implement this method to create a new chart, set properties on it and load the appropriate data.

        public override Chart GetDrillChart(Chart currentChart, object xCoordinate)
        {
            Chart newChart = new Chart();
            InitializeChart(newChart);

            DateTime start, end;
            start = new DateTime(((DateTime)xCoordinate).Ticks);
            if (drillLevel == 1)
                end = new DateTime(((DateTime)xCoordinate).Ticks).AddYears(1);
            else
                end = new DateTime(((DateTime)xCoordinate).Ticks).AddMonths(1);

            LoadData(newChart, start, end);
            return newChart;
        }

We will use the same InitializeChart method to set chart properties and LoadData to load the appropriate data. One of the parameters that the DrillDownManager passed us is the x-coordinate of the data point which the user clicked on to drill. Since the x-coordinate is a single value we need to have some logic that will determine, for each drill level, the appropriate range of values that this point represents.

If chart not ready return null

If the chart data is not immediately available (for example if the data is loaded asynchronously from a database) you can return null from GetDrillChart and when the data has been assigned to the data source of the chart call DrillChartReady to give the new chart instance to the DrillDownManager.

Going back

In XAML we have already defined a back button. In the Click event handler we just need to call the Back method of the DrillDownManager.

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            drillDownManager.Back();
        }

We also need to override the Back method in our MyDrillDownManager to correctly keep track of drill levels.

        public override void Back()
        {
            if (drillLevel > 0)
            {
                drillLevel--;
                base.Back();
            }
        }

After performing these steps we should have a working drilldown application. Hopefully, now you have a clearer picture of how drilldown is intended to work in Silverlight Chart.

You can download the code for this demo here.

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.

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.