Using amcharts in WPF to draw a stock K-line chart

I wanted to use GDI to draw a wax bar chart directly through data, but I felt that such a chart had fewer functions, so I searched the internet for some controls that could draw a K-line chart. I found that dynamicdatadisplay is quite good. In its development, I also found that the wax bar chart can be drawn, but the document seems to be not very good, and I don't know how to use it for painting, when looking for a good example of it, I found someone recommended to use amcharts to draw it. So I went over it and found it quite useful. The effect is as follows:

Preparations

Download amcharts stock chart for WPF, decompress it, create a new WPF project, right-click in toolbox, select choose items, and click browse, find amcharts in the decompressed folder. windows. stock. DLL, click okay, And the preparation is complete.

Configure the amcharts control on the page

<AMS: stockchart> </ams: stockchart> is used to add such a control in the window. First, let's see how this control binds 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>
 

The data in itemsource isProgramIt is a collection of stockinfo classes. The elements specified by datamenberpath, highmenberpath, lowmenberpath, closemenberpath, valuemenberpath, and volumemenberpath are all attributes of stockinfo in the data set. The structure of stockinfo class 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> label is used to insert a table. Multiple Graphs can be inserted in the Table. Use <AMS: Chart. graphs> </AMD: Chart. graphs> label to create a graph. for exampleCodeA graph is created:

<AMS: stockchart. charts> <AMS: chart title = "stock price" gridheight = "2 *"> <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 attributes,If the color is not specified, it will be displayed by default according to the color of the U.S. stock market. In the United States, the stock rose in green, and the fall in red, which is completely opposite to China.Therefore, you must specify the color. legentitemtype and legendperioditemtype are used to specify the information displayed on the top of the graph when the mouse is hovering over the graph. Here I specify ohlc, that is, open, high (highest price ), low (lowest price), close (close ).

In addition, you can set other attributes in the <AMS: stockchart. Charts> label, such as the line color, ruler color, information display color, and whether to display the date:

 
<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 generates a Kline chart. The amcharts control can also draw a transaction volume column chart or line chart under the Kline chart.

<AMS: chart title = "volume"> <AMS: Chart. graphs> <AMS: graph graphtype = "column" legenditemtype = "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" ticklength = "0"/> </ams: Chart. leftvalueaxis> <AMS: Chart. legend> <AMS: Legend positivevalueforeground = "red" negativevalueforeground = "green"/> </ams: Chart. legend> </ams: Chart> </ams: stockchart. charts>

in the lower-right corner of the Article , the zoom function is available in label implementation:

<AMS: stockchart. periodselector> <AMS: periodselector customperiodlabeltext = "Custom interval:" presetperiodlabeltext = "ZOOM:" margin = ","> <AMS: periodselector. presetperiods> <AMS: presetperiodbutton interval = "day" quantity = "10" tooltipservice. tooltip = "10 days" content = "10 days"/> <AMS: presetperiodbutton interval = "month" quantity = "1" tooltipservice. tooltip = "1 month" content = "January"/> <AMS: presetperiodbutton interval = "month" quantity = "3" tooltipservice. tooltip = "3 months" content = "March"/> <AMS: presetperiodbutton interval = "year" quantity = "1" tooltipservice. tooltip = "1 year" content = "1 year"/> <AMS: presetperiodbutton interval = "year" quantity = "3" tooltipservice. tooltip = "3 years" content = "3 years"/> <AMS: presetperiodbutton quantity = "Nan" tooltipservice. tooltip = "all data" content = "Max"/> </ams: periodselector. presetperiods> </ams: periodselector> </ams: stockchart. periodselector>

Analyze Data

At this point, the interface of the control is the content. The above mentioned that the data in the program is bound. How does this data come from? The data is the daily data downloaded from the online transaction Professional Edition of guoxin golden sun. The data format is still relatively regular. The first row indicates the stock information, and the second row indicates the data type, the next step is data. Each data is separated by a \ t tab.

Let's take a look at the definition of data:

 
Public list <stockinfo> data {Get; set ;}
 

When you select a text file in the format shown in, the program will parse the text file. Note that the data downloaded from Sun guoxin uses ANSI encoding. The parsing steps are as follows:

Private list <stockinfo> loadstockinfo (string filename) {using (Stream resourcestream = new filestream (filename, filemode. open) {using (streamreader reader = new streamreader (resourcestream, encoding. getencoding ("gb2312") {// read each line of VaR strings = reader. readtoend (). split (New char [] {'\ n'}, stringsplitoptions. removeemptyentries); // obtain the stock name stockname = strings [0]. replace ("\ r", ""); var res = new list <stockinfo> (strings. length-2); // The first row is the stock name, the second row is the type name, and the second 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, volume = volumn}) ;}return res ;}}}

There is a button in the program to open a "Open File Dialog Box". 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 supplement: How to do not display the registration URL in the upper left corner of the amcharts Control

If the free version of amcharts is used, the URL link is displayed in the upper left corner of the control interface (as shown in the top figure of the article), which affects the appearance. How can I "friendly" not display this link?

After debugging, the URL of amcharts is only displayed in the first chart. you can write the first table in amcharts in the design field, but we don't need to write it in the form_loaded () event:

Stockchart. Charts [0]. Collapse ();
 

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