Using Amcharts to draw stock candlestick charts in WPF

Original: Use Amcharts to draw stock candlestick chart in WPF

I would like to use GDI drawing, through the data directly draw a wax column chart, but feel such a small function, so to search the Internet some can draw a candlestick chart control. Found Dynamicdatadisplay very good, in its development also found can draw wax column chart, but the document seems to do is not very good, do not know how to use it to draw, in looking for it better example when found someone recommended with Amcharts draw, so then went to see a bit, found very useful, The effect is as follows:

Preparatory work

We're going to go here. Download Amcharts Stock Chart for WPF and unzip, create a new WPF Project, right-click in Toolbox, select Choose Items, and then click Browse to find the unpacked folder with a AMCHARTS.W indows. Stock.dll, click Okay, ready to do the work.

Configuration of the Amcharts control in the interface

<ams:StockChart></ams:StockChart> to add such a control to a window, first look at how the control binds the data:

<ams:StockChart.DataSets>    <ams:dataset name= "StockSet1" brush= "#7f8da9"                    itemssource= "{Binding Data} "                    datememberpath=" date "                    openmemberpath=" open "highmemberpath=" high "                    lowmemberpath=" Low " Closememberpath= "Close"                    valuememberpath= "Close" volumememberpath= "Volume"                    /></ams: Stockchart.datasets>

Where the data in Itemsource is generated in the program, it is a collection of stockinfo classes. Datamenberpath, Highmenberpath, Lowmenberpath, Closemenberpath, Valuemenberpath, Volumemenberpath the specified element is a property of Stockinfo in the data collection. The Stockinfo class structure is as follows:

public class stockinfo{Public    DateTime Date {get; set;}    Public double open {get; set;}    Public double high {get; set;}    Public double low {get; set;}    Public double close {get; set;}    Public double volume {get; set;}}

<ams:StockChart.Charts></ams:StockChart.Charts> tags are used to insert tables, which can be inserted into multiple shapes, using <ams:chart.graphs></ Amd:chart.graphs> tags to create graphics. For example, the following code creates a graph:

<ams:StockChart.Charts>    <ams:chart title= "stock price" gridheight= "the" >        <ams:Chart.Graphs>            <ams:graph graphtype= "Candlestick"                         Negativebrush= "Green" positivebrush= "Red"                         legenditemtype= "OHLC" legendperioditemtype= "OHLC"                        cursorbrush= "Blue" cursorsize= "6"/>        </ams:Chart.Graphs>    </ams:Chart></ams:StockChart.Charts>

Note the Negativebrush and Positivebrush properties, which, if not specified, are displayed by default in the U.S. stock market. In the United States, stocks have gone up in green, with the fall in red, which is exactly the opposite of China , Therefore, you need to specify a color. Legentitemtype and Legendperioditemtype are used to specify the mouse hover over the graph, the information above the graph shows what content, here I specify is the OHLC, that is open (open), high (highest price), low (lowest price), Close (Close).

In addition, in the <ams:StockChart.Charts> tab we can also set other properties, such as line color, ruler color, information display color, whether the date is displayed:

<ams:Chart.DateTimeAxis>    <ams:datetimeaxis valuesforeground= "#90000000" strokethickness= "0" Ticklength= "0"/></ams:chart.datetimeaxis>                    <ams:Chart.LeftValueAxis>    <ams:valueaxis Valuesforeground= "#90000000"            strokethickness= "0" ticklength= "0"/></ams:chart.leftvalueaxis><ams :chart.legend>    <ams:legend        positivevalueforeground= "Red" negativevalueforeground= "Green        " Isdatevisible= "True"/></ams:chart.legend>

The above code is the resulting candlestick chart, and the Amcharts control can also draw a column or line chart of volume below the candlestick chart.

<ams:chart title= "Volume" > <ams:Chart.Graphs> <ams:graph graphtype= "Column" Legen                    Ditemtype= "Value" legendperioditemtype= "value" datafield= "Volume" periodvalue= "Sum"        Cursorbrush= "Blue" cursorsize= "6"/> </ams:Chart.Graphs> <ams:Chart.DateTimeAxis> <ams:datetimeaxis valuesenabled= "False" strokethickness= "0"/> </ams:Chart.DateTimeAxis> <ams: chart.leftvalueaxis> <ams:valueaxis valuesforeground= "#90000000" strokethickness= "0" Ticklengt H= "0"/> </ams:Chart.LeftValueAxis> <ams:Chart.Legend> <ams:legend Positivev Alueforeground= "Red" negativevalueforeground= "Green"/> </ams:chart.legend></ams:chart></ams: Stockchart.charts>

        has a zoom function in the lower-right corner of the article, which is <ams:stockchart.periodselector></ Implemented in the ams:stockchart.periodselector> tag:

<ams:StockChart.PeriodSelector> <ams:periodselector customperiodlabeltext= "custom interval:" Presetperiodlabeltext = "Scale:" margin= "0,5,0,0" > <ams:PeriodSelector.PresetPeriods> &LT;AMS:PRESETPE Riodbutton interval= "Day" quantity= "ten" tooltipservice.tooltip= "10 Days" content= "10 days"/> <ams:presetperiodbu Tton interval= "Month" quantity= "1" tooltipservice.tooltip= "1 months" content= "January"/> <ams:presetperiodbutton I Nterval= "Month" quantity= "3" tooltipservice.tooltip= "3 months" content= "March"/> <ams:presetperiodbutton Interva  L= "Year" quantity= "1" tooltipservice.tooltip= "1" content= "1"/> <ams:presetperiodbutton interval= quantity= "3" tooltipservice.tooltip= "3 Year" content= "3 year"/> <ams:presetperiodbutton quantity= "NaN" ToolTipS Ervice. tooltip= "All data" content= "Max"/> </ams:PeriodSelector.PresetPeriods> </ams:periodselector></ams: Stockchart.periodselectOr> 

Analyze the data

This is what the interface aspect of the control is about. It says that the data is bound to the program, how does this data come from? Data is from the Golden Sun Online Trading Professional version of the daily data downloaded, the data format is more regular, the first line represents the stock information, the second row represents the data type, followed by the data, each data is separated by a \ t tab.

Let's look at the definition of data:

Public list<stockinfo> Data {get; set;}

When you select a text file in the format shown, the program parses the text file, noting that the data encoded from the National Gold Sun is ANSI encoded. The parsing steps are as follows:

Private list<stockinfo> Loadstockinfo (string filename) {using (Stream resourcestream =new FileStream (FileName, Fi        Lemode.open) {using (StreamReader reader = new StreamReader (Resourcestream, encoding.getencoding ("GB2312")) {//Read each line of text in var strings = reader. ReadToEnd ().            Split (new char[] {' \ n '}, stringsplitoptions.removeemptyentries); Get stock Name StockName = Strings[0].            Replace ("\ R", ""); var res = new list<stockinfo> (strings.            LENGTH-2); The first line is the stock name, the second line is the type name, and the 3rd row is the stock data for (int i = 2; i < strings. Length;                i++) {string line = Strings[i]; string[] Sublines = line.                Split (' \ t ');                DateTime date = DateTime.Parse (Sublines[0]);                Double open = Double.Parse (sublines[1]);                Double high = Double.Parse (sublines[2]);                Double low = Double.Parse (Sublines[3]); Double close = Double.Parse(Sublines[4]);                Double volumn = Double.Parse (sublines[5]); Res.                        ADD (new Stockinfo {date = date, open = open, High = high, low = low, close = Close, V            Olume = volumn});        } return res; }    }}

There is a button in the program to open a "Open file dialog", after selecting a file, call the LoadData method to display the data:

private void LoadData (string path) {    Data = loadstockinfo (path);    Stockchart.charts[0]. Graphs[0]. Title = StockName;    STOCKCHART.CHARTS[1]. Graphs[0]. Title = StockName;}

Source code Download

April 21 Add: How to not display the registration URL in the upper left corner of the Amcharts control

If you use the free version of Amcharts, the upper-left corner of the control interface will show the URL link (as shown in the top of the article), it is very beautiful, how "friendly" does not display this link?

After I debug, the Amcharts URL will only appear in the first chart. In the design interface, the first table in Amcharts is written there, but we don't have to write it in the form_loaded () event:

Stockchart.charts[0]. Collapse ();

I believe you understand what I mean, as shown in the upper left corner of the control does not display the URL:

Using Amcharts to draw stock candlestick charts in WPF