$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
Using C# Code to Create Point/Scatter Chart
Home > How to > Point Chart

Kettic.UI C# ASP.NET Chart SDK is a client side chart collection that offers the most comprehensive chart tools for 1d, 2d and even 3d charts creations and viewing.
This page covers the general concepts and complete processing guides on drawing and defining point figure chart within C# ASP.NET chart project. And to be specific, this article explains the basics settins of chart and points creation, including setting data points, values, series, chart axes and many other elements.
First of all, in order to let users experience the AJAX programming technique in our products, we need to add a certain AJAX control item within chart creating application. And the specific operations for this step are dragging an "AjaxPanel" item into "aspx" file, contained in Toolbox window; afterwards, dragging another chart control into the added "AjaxPanel" object from Toolbox; at last modifying the chart attributes in "aspx.cs" file using C# codes.
Creating a perfect point chart can be particularized into two sections: chart basic settings and point settings.

Basic Settings

C# Demo Codes for Chart Type Setting

We can choose chart type in two methods after we have successfully added the chart control item. Different with other web chart(line chart or bar chart), scatter chart draw data values separately and individually. It shows the data tendency, and users can read and analysis this tendency.

KaxChart1.SeriesSet[0].View = ChartSeriesView. Point;

KaxChart1.DefaultSeriesView = ChartSeriesView. Point;

C# Demo Codes for Chart Style Setting

If we want to let the point chart be out of the ordinary, we can change the chart skin. KT.UI C# ASP.NET Chart controls offer robust and complete options for changing chart background and skin to fulfill different users' needs.

KaxChart1.Skin = "KetticLite";

C# Demo Codes for Chart Title Setting

We can select and add a chart title according to the chart contents. Beside, KT.UI C# ASP.NET Chart SDK also supports customizing title element, such as invoking active region to add HTML attributes, tooltip and URL, defining title fill setting, adjusting title position, formatting, and more. If there are multiple groups of data series, you can also define the legend with data messages as needs.

KaxChart1.Caption.Text = "Point Chart";

C# Demo Codes for Chart Orientation

Point chart can be displayed in vertical and horizontal patterns. We can choose either of the two based on our actual needs.

KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;
KaxChart1.SeriesOrientation = CartSeriesOrientation.Vertical;

Point/Scatter Settings

How to Set Point/Scatter Chart Series with C# Codes

Let's see how to add sets of values to point chart in this part. As most of the chart types, there is no limitation on adding how many sets of data to point chart, there may be two or more data group in the scatter chart, and each group of data explains the different data categores. You can refer to following C# codes to add two series of data points to chart.

KaxChart1.SeriesSet[0].AddPoint(2, "Point1");
KaxChart1.SeriesSet[0].AddPoint(6, "Point2");
KaxChart1.SeriesSet[0].AddPoint(13, "Point3");
KaxChart1.SeriesSet[0].AddPoint(14, "Point4");
KaxChart1.SeriesSet[0].AddPoint(15, "Point5");
If we want to have a better visualization, we still can set and adjust point color by using demo C# codes below.

KaxChart1.SeriesSet[0].StyleSet.Fill.PrimaryColor = System.Drawing.ColorTranslator.FromHtml("#009933");

How to Set Point/Scatter Chart Axis with C# Codes

We can respectively set the values of x axis and y axis to let chart display even very small differences among all the sets of data. To be specific, we can adjust scale and space of axis. For detailed guides, please see: C# codes to set chart axis element. Also, you can check here to see the demo point chart image. With the best axes settings, the point in the chart will display in its positon, some higher, and some lower, so that you can view more clearly.

KaxChart1.Diagram.AxisX.MaxValue = 10;
KaxChart1.Diagram.AxisX.MinValue = 1;
KaxChart1.Diagram.AxisX.Step = 1;

KaxChart1.Diagram.AxisY.MaxValue = 20;
KaxChart1.Diagram.AxisY.Step = 2;
KaxChart1.Diagram.AxisY.AxisMode = ChartAxisYMode.Extended;
ASP.NET AJAX UI Controls