Edit(add, update, delete) data series in web chart

Chart Feature Editing Value in ASP.NET

Home > How to > Chart Editing

While viewing an asp.net chart in the web page, you may want to edit some data series to make the chart view closer to reality. You can add new data items, update the exist data items and delete some useless data items in the chart.

Update data items in chart series in ASP.NET

Here we will show you an example with editing the chart data by clicking the bar graphs. This demo used the server side click event, you can define the customized code in the editing method. After you clicking the chart area, the current data items in the series will change dynamically.
First insert an asp.net chart to your aspx web page.


<kettic:KaxChart ID="KaxChart1" runat="server" Width="540px" Height="333px"
                OnClick="KaxChart1_Click">
                <Caption Text="Click to Increase/Decrease Item's value ">
                </Caption>
                <Diagram>
                    <AxisY MaxValue="20" Step="1" IsAutoScale="True">
                    </AxisY>
                    <AxisX MaxValue="6" MinValue="1" Step="1">
                    </AxisX>
                </Diagram>
                <SeriesSet>
                    <kettic:ChartSeries Name="Series 1" ActiveRegionToolTip="Click Me">
                        <Points>
                            <kettic:ChartSeriesPoint Value="2" Name="Point 1">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint Value="6" Name="Point 2">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint Value="13" Name="Point 3">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint Value="14" Name="Point 4">
                            </kettic:ChartSeriesPoint>
                            <kettic:ChartSeriesPoint Value="15" Name="Point 5">
                            </kettic:ChartSeriesPoint>
                        </Points>
                    </kettic:ChartSeries>
                </SeriesSet>
            </kettic:KaxChart>

Then add the editing code in the chart click event using C# language.


protected void KaxChart1_Click(object sender, ChartClickEventArgs e)
        {
            if(e.SeriesItem==null)
                return;
            float step = 0;
            float.TryParse(this.txtStep.Text,out step);
            if (this.RadioButtonList1.SelectedIndex == 0)
            {
                e.SeriesItem.Value += step;
            }
            else
            {
                e.SeriesItem.Value -= step;
            }
          
        }

We also provide online demo for adding data items to chart series in asp.net, if you have interest, please go to this page.

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