Make web chart interactive | Kettic ASP.NET AJAX Chart Control

Chart Feature Interactive in ASP.NET

Home > How to > Chart Interactive

Most time, when you create an asp.net chart control, it always display in the web page as a picture. So there is nothing feedback while your clicking or some other operation. And Kettic asp.net chart control provide a solution for you. You can build an interactive chart control in the web page, looks like the chart is "alive".
There are many ways to make a web chart interactive, such as adding mouse hover event, mouse move event, mouse click event, even page load event. You can call both client side and server side event to meet your requirement.

Build an interactive chart in ASP.NET

In this part, we'll show you how to make a interactive pie chart in the asp.net application. In the pie chart, while a slice of pie is clicked, it becomes apart and value added. So it looks like the pie chart becoming "moving".
Now, first add a web chart control to the web page. Please see the demo code in the aspx:


<kettic:KaxChart ID="KaxChart1" runat="server" Height="500px"
                        Width="550px" OnClick="KaxChart1_Click">
                        <Caption Text="Months of Year">
                        </Caption>
                        <SeriesSet>
                            <kettic:ChartSeries Name="Series 1" View="Pie">
                            </kettic:ChartSeries>
                        </SeriesSet>
                    </kettic:KaxChart>

Then add Page_Load and chart click event in your page class. You can define the customized C# code in these event, so that the web chart will display more specified.


        protected void Page_Load(object sender, System.EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                ChartSeries s = KaxChart1.SeriesSet.GetSeries(0);
                s.Clear();
                s.StyleSet.DiameterScale = 0.8;
                s.StyleSet.TextAppearance.TextSurface.Font = new Font("Arial", 8);
                int i = 0;
                ColorConverter cc = new ColorConverter();
                s.DefaultLabelValue = "#Y";
                string[] colors = { "#EB5D00", "#00AE18", "#339C40", "#B90072", "#ffC0FF", "#980A88", "#C3B690", "#FFDA69", "#1089C2", "#F200CD", "#faE364", "#002030" };
                foreach (ListItem listItem in this.radiosMohths.Items)
                {
                    ChartSeriesPoint seriesItem = new ChartSeriesPoint();
                    seriesItem.Value = 10;
                    seriesItem.ActiveRegion.Tooltip = listItem.Value;
                    seriesItem.StyleSet.Fill.PrimaryColor = (Color)cc.ConvertFromString(colors[i++]);
                    seriesItem.StyleSet.Fill.FillMode = Kettic.AspNet.Controls.ChartModel.Styles.ChartFillMode.Gradient;
                    s.Points.Add(seriesItem);
                }
            }
           
        }


        protected void KaxChart1_Click(object sender, ChartClickEventArgs args)
        {
            ChartSeriesPoint item = args.SeriesItem;
            if (item != null)
            {
                item.StyleSet.Exploded = true;
                item.Value += 1;
            }
        }

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control

Overview Getting Started

Chart Element

Diagram Series Axes Legend Caption Tick Data Grid

Chart Type

Bar Chart Point Chart Line Chart Pie Chart Area Chart Gantt Chart Bubble Chart Bezier Chart Spline Chart Spline Area Chart Candle Chart Chart With Stacked Full Stacked Chart

Features

Automatic Layout Automatic Text-wrapping Scrolling Empty Values Scale Break Multiline Labels Wise Labels Marking Areas Multiple Types

Interactive

Drill Down Shadow Edting

Data Binding

Array Data List Data Database Data XML Data

Chart Style

Chart Skin ASP.NET AJAX Grid UI Control