Candle Charts guide, UI Control for ASP.NET AJAX, C#, VB.NET, setting candle properties, aspx sample code

Candle Charts in ASP.NET AJAX

Home > How to > CandleStick Chart

Information to Candle Chart

Candle chart combines the features of line and bar charts to display a set of value changes based on time or date. CandleStick chart, also call stock market chart, can be used into real time stock history analysis. The web stock chart can show live data of stock in seconds, minutes, hours, days even years historical price trend.
There are three main elements within a Candle chart: filled bar, empty bar and line. The filled bar shows that the opening value is greater than closing value, while the empty bar indicates opposite meaning - the closing value is greater than the opening value, and the line in the bar center displays the extreme high and low values.

Here is the sample image for Candle chart:

generate candle chart image in asp.net ajax using c#

How to Build a Simple CandleStick Chart

By using KT.UI ASP.NET Chart Components, end users can easily create and modify stock chart, ranging from option for selecting Candle chart type to advanced Candle chart settings, like chart skin, title, orientation as well as other appearance properties.

With the support of AJAX web programming technique, our UI ASP.NET Chart Control can allow users to create and view chart on web side with very short time and great convinence.

Here are the general beginning steps for creating a target chart with AJAX technique: drag an "AjaxPanel" control from Toolbox to "aspx" file, and then, drag a chart control from Toolbox into the built "AjaxPanel".

Basic Settings

Following codes and descriptions are for selecting target stock chart type and setting Candle chart title, orientation and skin to adjust chart appearance. And we can finish setting these parameters within property window of chart creating project. Please check out demo codes below respectively.

Chart Type: Set the Chart DefaultSeriesView property or ChartSeries.View to Candle.
Chart Title: Set the ChartCaption.Text property to "Candle Chart". Rotating, resizing, and changing title text font, color are all suppored.
Chart Orientation: Set the SeriesOrientation property to Vertical.
Chart Skin: Set the Skin Property to "KetticStyle". Supplying many skin and template options to make your stock chart graphs more special.

Now we will show you how to define these candle chart basic settings using C#.


KaxChart1.SeriesSet[0].View = ChartSeriesView. Candle;
KaxChart1.Skin = "KetticStyle";
KaxChart1.Caption.Text = "Candle Chart";
KaxChart1.SeriesOrientation = ChartSeriesOrientation.Horizontal;

CandleStick Settings

This part tells how to add and set the series of data of Stock chart. We can set multiple series according to the particular data Candle's categories. And the number of each set of values can range from 1 to n. We add Candle chart data series by using "ChartSeries.Points" control of KT.UI ASP.NET Chart Control. If you insert two data series into the web candle stick chart, it means you add two stock history data to the chart, you can compare these two stock trend, and do good analyzing to make the best decision.


 <kettic:ChartSeries Name="Series 1" View="Candle">
         <Points>
<kettic:ChartSeriesPoint  Value="4"  Value2="5"  Value3="2"  Value4="6" >
</kettic:ChartSeriesPoint>
    <kettic:ChartSeriesPoint  Value="5"  Value2="4"  Value3="2"  Value4="6" >
    </kettic:ChartSeriesPoint>
    <kettic:ChartSeriesPoint  Value="4"  Value2="5"   Value3="6"  Value4="2" >
    </kettic:ChartSeriesPoint>
    <kettic:ChartSeriesPoint  Value="5"   Value2="4"   Value3="6"   Value4="2" >
    </kettic:ChartSeriesPoint>
            </Points>
  </kettic:ChartSeries>

Here are the explanations of Y values in a Candle chart:

YValue = Open
YValue2 = Close
YValue 3 = Max
YValue 4 = Min

Usually, YValue and YValue2 change between YValue 3 and YValue 4. And we can get different control appearance if we interact the size of YValue and YValue2 or the scale of YValue3 and YValue4. Following C# sample code shows you how to set the YValues of candle chart in page load method.


            ChartSeriesPoint point1 = new ChartSeriesPoint();
            point1.Value = 4;
            point1.Value2 = 5;
            point1.Value3 = 2;
            point1.Value4 = 6;
            this.KaxChart1.SeriesSet[0].Points.Add(point1);
            ChartSeriesPoint point2 = new ChartSeriesPoint();           
            point2.Value = 5;
            point2.Value2 = 4;
            point2.Value3 = 2;
            point2.Value4 = 6;
            this.KaxChart1.SeriesSet[0].Points.Add(point2);

Besides chart series, with the rich support of chart element component library, we are also capable of setting the Candle color via "ChartSeries.StyleSet.Fill.PrimaryColor" control. If we want to change more properties of given Candle, we can use Candle appearance property item to adjust the Candle dimensions, height, width, and margins. With the different color, you can understand each trend line's performance more clearly. Detailed chart series setting guides can be fund here: chart series element setting guides.

Information to Candle Chart

How to Build a Simple CandleStick Chart

Basic Settings

CandleStick Settings

More Tutorials