ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Can i create img like it?
Posted by gowish on Apr-20-2012 16:52
| Reply | Monitor
Attachments:
Hi Peter,
How can i create img like it?
I hope you can point me to right direction,thks.
600028.SH.jpg

  Re: Can i create img like it?
Posted by Peter Kwan on Apr-21-2012 02:11
| Reply | Monitor
Hi gowish,

I assume you already know that ChartDirector can plot financial charts using the FinanceChart object. However, the style of the chart is different from your attached chart. The followings are some methods to create a chart similar to your attached chart.

(a) For the y-axis, the FinanceChart puts it on the right side and the text is in black. You may use XYChart.setYAxisOnRight to change the axis to the left side, and Axis.setLabelStyle to change the text to red. For example, in C#:

//add the main price chart
XYChart mc = myFinanceChart.addMainChart(....);
mc.setYAxisOnRight(false);   //axis on left
mc.yAxis().setLabelStyle("arial.ttf", 8, 0xcc0000, 0); //axis label red color

(b) For the Chinese text at the bottom left corner of the chart, you may add it using addMark. For example:

XYChart vol = myFinanceChart.addVolIndicator(...);
vol.setYAxisOnRight(false);   //axis on left
vol.yAxis().addMark(0, 0x000000, "Some Chinese Text", "a_chinese_font.ttf", 10);

(c) For the x-axis labels, the FinanceChart by default puts the axis labels at the bottom of the chart. If you want it to be in the middle of the chart, you would need to increase the gap between the main price chart and the vol bar chart (using FinanceChart.setPlotAreaBorder). Then after drawing both charts, use Axis.setLabelStyle to set the x-axis labels on the main price chart to non-transparent, and sets the x-axis labels on the vol bar chart to be transparent.

(d) For the MA10 7.24 label, the default ChartDirector legend is a colored box, followed by the text SMA(10): 7.24. If you would need to modify the text, you would need to modify the source code of FinanceChart, which is included in the ChartDirector download. (See the documentation on "FinanceChart". You may look up "FinanceChart" from the ChartDirector documentation index.)

Hope this can help.

Regards
Peter Kwan

  Re: Can i create img like it?
Posted by gowish on Apr-22-2012 17:18
| Reply | Monitor
Attachments:
Hi Peter ,thanks for your response.
I have create my image like your suggestion.But there have other problems.

1.How can i delete the text on top in red circle and "-" on y-axis of price chart, "M" on y-
axis of val chart?

2.I set lables for x-axis, but it doesn't work?

3.When i create the gap between price chart and val chart, the var chart's border is
disappear.I'm so confused.

next paste my code.

---------------------code start------------------------------------------------------

// Create a FinanceChart object of width 640 pixels
FinanceChart finaceChart = new FinanceChart(740);

// Set the data into the finance chart object
finaceChart.setData(timeStamps, highData, lowData, openData, closeData, volData,
extraDays);

// Add the main chart with 240 pixels in height
XYChart priceChart = finaceChart.addMainChart(240);

String[] labels = {"02/14", "02/17", "03/09", "03/22", "04/09"};

// Set the x axis labels
priceChart.addTitle("日K线图--中国石化
(600628)12/02/01~12/04/20","simsun.ttc",10,0x000000,0xffffff,Chart.Transparent);
priceChart.setYAxisOnRight(false);
priceChart.yAxis().setMargin(20,10);
priceChart.yAxis().setLabelStyle("arial.ttf", 8, 0xcc0000, 0);


// The data for BarLayer
finaceChart.setPlotAreaBorder(0xffffff, 20);
double[] data =
{timeStamps[20],timeStamps[40],timeStamps[60],timeStamps[80],timeStamps[100],time
Stamps[120]};
priceChart.addBarLayer(data).setBarGap(0.5);

// Add a 10 period simple moving average to the main chart, using brown color
finaceChart.addSimpleMovingAvg(10, 0x663300);

// Add a 20 period simple moving average to the main chart, using purple color
finaceChart.addSimpleMovingAvg(20, 0x9900ff);

// Add a 20 period simple moving average to the main chart, using purple color
finaceChart.addSimpleMovingAvg(30, 0x6611ff);

// Add an HLOC symbols to the main chart, using green/red for up/down days
finaceChart.addCandleStick(0x00ff00, 0xff0000);

XYChart volChart = finaceChart.addVolIndicator(75, 0x99ff99, 0xff9999, 0x808080);
volChart.setYAxisOnRight(false); //axis on left
volChart.yAxis().addMark(0, 0x000000, "(万股)", "simsun.ttc", 10);
volChart.xAxis().setLabelStyle("arial.ttf", 8, Chart.Transparent, 0);

priceChart.xAxis().setLabelStyle();
priceChart.xAxis().setLabels(labels);
priceChart.xAxis().setTickOffset(0.5);
finaceChart.makeChart("D:\\\\3.png");

---------------------code end------------------------------------------------------
3.png

  Re: Can i create img like it?
Posted by Peter Kwan on Apr-24-2012 00:40
| Reply | Monitor
Hi gowish,

1.How can i delete the text on top in red circle and "-" on y-axis of price chart, "M" on y-
axis of val chart?

To modify the text in the legend box, you would need to modify the FinanceChart source code. In the source code, the addOHLCLabel method is for creating the text in the red circle. Please comment out the code there.

To remove the "-" on the y-axis, you may use Axis.setTickLength. For example:

priceChart.yAxis().setTickLength(0);

To remove the "M", you may use Axis.setLabelFormat. For example:

volChart.yAxis().setLabelFormat("{value}");


2.I set lables for x-axis, but it doesn't work?

You can set the x-axis labels using Axis.setLabels. For example:

priceChart.xAxis().setLabels(myLabels);

Note that like all data series in a financial chart, the length of the myLabels array (which should be an array of text strings) should be of the same length as the other arrays.  For example, if the timeStamps array has 130 elements, the myLabels array should also have 130 elements, with each label matching a timeStamp. If there is no label for a particular day, please use an empty string "" in the corresponding position.

To disable the labels in the middle (as opposed to under the volume chart), after you have added the volume, please add the lines:

//hide the labels at the bottom of the volume chart
volChart.xAxis().setLabelStyle("arial.ttf", 8, Chart.Transparent, 0);

//show the labels at the bottom of the main price chart
priceChart.xAxis().setLabelStyle("arial.ttf", 8, 0x000000);
priceChart.xAxis().setLabels(labels);


3.When i create the gap between price chart and val chart, the var chart's border is
disappear.I'm so confused.

The border disappear because your code sets the border color to white. (The first argument to setPlotAreaBorder is the color of the border.) As your code calls setPlotAreaBorder after it has already added the main price chart, so the white border only affects the volume chart.

To solve the problem, please use 0x888888 or any color you like as the broder color. You may want to call setPlotAreaBorder before you add the main price chart, so that the border color applies to all charts.

finaceChart.setPlotAreaBorder(0x888888, 20);


Hope this can help.

Regards
Peter Kwan