|
How to simply add a main-like chart to finance chart |
Posted by Rammy on Jun-12-2009 04:04 |
|
Hi
I would like to make a financechart with two main-like charts: one for the first company and the second for the second company data (just for comparision). The layout of the whole chart should be as follows:
1. Title for the first main-like chart (first company)
2. main-like chart of the first company (with all the parameters set by the user via www form, as in financedemo example)
3. Title for the second main-like chart (second company)
4. main-like chart of the second company (with all the parameters set by the user via www form, as in financedemo example and similarly as for the first company)
5. indicators, as in financedemo example - but only for the first company
(see attached screenshot)
The whole chart should use the map for tooltips (I already have it for the example financedemochart.py). Is it possible to make such chart without altering the financechart.py code?? Maybe simply using the addChart function?
Only one thing I have "achived" is to "copy" the main chart (I've simply and desperately repeated the addMainChart function). As the first company is the "main" company it could stay on the main chart (created by the addMainChart function). The second company will be presented only on the single "sub-chart" (between main chart and indicators).
I'm working in Python, forgot to say
|
Re: How to simply add a main-like chart to finance chart |
Posted by Peter Kwan on Jun-12-2009 07:29 |
|
Hi Rammy,
I managed to create the chart you need using the following methods:
(a) Create a FinanceChart as usual, but with an empty indicator chart as the second chart (as a placeholder for the second main price chart)
(b) Create another FinanceChart object with the second main price chart
(c) Merge the second main price chart to the place holder
The code and the resulting image are as attached.
(Note: The Python code I attached is a CGI code. If you are running the script from the command line, please replace the last two line with:
c.makeChart("myImageFile.png")
Hope this can help.
Regards
Peter Kwan
|
finance.py |
---|
#!/usr/bin/python
from FinanceChart import *
# Create a finance chart demo containing 100 days of data
noOfDays = 100
# To compute moving averages starting from the first day, we need to get extra data
# points before the first day
extraDays = 30
# In this exammple, we use a random number generator utility to simulate the data. We
# set up the random table to create 6 cols x (noOfDays + extraDays) rows, using 9 as
# the seed.
rantable = RanTable(9, 6, noOfDays + extraDays)
# Set the 1st col to be the timeStamp, starting from Sep 4, 2002, with each row
# representing one day, and counting week days only (jump over Sat and Sun)
rantable.setDateCol(0, chartTime(2002, 9, 4), 86400, 1)
# Set the 2nd, 3rd, 4th and 5th columns to be high, low, open and close data. The
# open value starts from 100, and the daily change is random from -5 to 5.
rantable.setHLOCCols(1, 100, -5, 5)
# Set the 6th column as the vol data from 5 to 25 million
rantable.setCol(5, 50000000, 250000000)
# Now we read the data from the table into arrays
timeStamps = rantable.getCol(0)
highData = rantable.getCol(1)
lowData = rantable.getCol(2)
openData = rantable.getCol(3)
closeData = rantable.getCol(4)
volData = rantable.getCol(5)
# Create a FinanceChart object of width 640 pixels
c = FinanceChart(640)
# Add a title to the chart
c.addTitle("Finance Chart Demonstration")
# Set the data into the finance chart object
c.setData(timeStamps, highData, lowData, openData, closeData, volData, extraDays)
# Add the main chart with 240 pixels in height
c.addMainChart(240)
# Add a 5 period simple moving average to the main chart, using brown color
c.addSimpleMovingAvg(5, 0x663300)
# Add a 20 period simple moving average to the main chart, using purple color
c.addSimpleMovingAvg(20, 0x9900ff)
# Add a CandleStick layer to the main chart
c.addCandleStick(0x008000, 0xcc0000)
# Add 20 days bollinger band to the main chart, using light blue (9999ff) as the
# border and semi-transparent blue (c06666ff) as the fill color
c.addBollingerBand(20, 2, 0x9999ff, 0xc06666ffL)
# Add a 75 pixels volume bars sub-chart to the bottom of the main chart, using
# green/red/grey for up/down/flat days
c.addVolBars(75, 0x99ff99, 0xff9999, 0x808080)
# Place holder for the second candlestick chart
m = c.addIndicator(240)
# Append a 14-days RSI indicator chart (75 pixels high) after the main chart. The
# main RSI line is purple (800080). Set threshold region to +/- 20 (that is, RSI = 50
# +/- 25). The upper/lower threshold regions will be filled with red (ff0000)/blue
# (0000ff).
c.addRSI(75, 14, 0x800080, 20, 0xff0000, 0x0000ff)
# Append a 12-days momentum indicator chart (75 pixels high) using blue (0000ff)
# color.
c.addMomentum(75, 12, 0x0000ff)
#======================================================
# The following is the second candlestick chart
#======================================================
rantable = RanTable(99, 6, noOfDays + extraDays)
# Set the 1st col to be the timeStamp, starting from Sep 4, 2002, with each row
# representing one day, and counting week days only (jump over Sat and Sun)
rantable.setDateCol(0, chartTime(2002, 9, 4), 86400, 1)
# Set the 2nd, 3rd, 4th and 5th columns to be high, low, open and close data. The
# open value starts from 100, and the daily change is random from -5 to 5.
rantable.setHLOCCols(1, 100, -5, 5)
# Set the 6th column as the vol data from 5 to 25 million
rantable.setCol(5, 50000000, 250000000)
# Now we read the data from the table into arrays
timeStamps = rantable.getCol(0)
highData = rantable.getCol(1)
lowData = rantable.getCol(2)
openData = rantable.getCol(3)
closeData = rantable.getCol(4)
volData = rantable.getCol(5)
c2 = FinanceChart(640)
c2.setData(timeStamps, highData, lowData, openData, closeData, volData, extraDays)
m2 = c2.addMainChart(240)
c2.addCandleStick(0x008000, 0xcc0000)
# Dummy chart to ensure the x-axis is not bound to the main price chart
c2.addIndicator(10)
#======================================================
# Merge the second candlestick chart into the placeholder
#======================================================
c.layout()
m.makeChart3().merge(m2.makeChart3(), 0, 0, TopLeft, 0)
# Output the chart
print "Content-type: image/png\\n"
binaryPrint(c.makeChart2(PNG))
|
| |
Re: How to simply add a main-like chart to finance chart |
Posted by Rammy on Jun-13-2009 18:12 |
|
Hello Peter
Thank you for your immediate answer. It helped me a lot. Now I can build dual-charts for financial data! But a small problem has arised. I'm working on CGI version. At the end of the chart generating script (i.e. at the end of drawChart function) the code building map has been placed:
chart1URL = m.makeTmpFile("/tmp/tmpcharts")
imageMap = m.getHTMLImageMap("", "", "title='" + m.getToolTipDateFormat() + " {value|G}'")
return chart1URL, imageMap
where m is the main finance chart object:
# Create the chart object using the selected size
m = FinanceChart(width)
[...]
# Add the main chart
m.addMainChart(mainHeight)
c is the second-chart place holder (regarding to your advices):
# Place holder for the second candlestick chart
c = m.addIndicator(mainHeight)
c2 is the second finance chart object
c2 = FinanceChart(width)
which is merged to the main (m) chart object:
m2 = c2.addMainChart(mainHeight)
[...]
m.layout()
c.makeChart3().merge(m2.makeChart3(), 0, 0, TopLeft, 0)
After that the map is generated (as mentioned above). The problem is, that only first finance chart and its indicator sub-charts (i.e. without c and c2 or m2 representing the second finance chart) have a proper HTML map with tooltips. I suppose that somehow the new map only for c2 should be generated and merged into the map for m object. If you could help me with this issue it would be great! Thank you in advance.
Regards,
Rammy |
Re: How to simply add a main-like chart to finance chart |
Posted by Peter Kwan on Jun-13-2009 22:19 |
|
Hi Rammy,
I have tried to produce the image maps for both FinanceChart objects and just append them together, and it works.
The key trick is that you need to add a place holder chart in the second FinanceChart so that the image map is in the suitable place. The code I used is:
c2.addIndicator(240) # add a place holder chart first
m2 = c2.addMainChart(240)
c2.addIndicator(10) # Dummy chart to ensure the x-axis is not bound to the main price chart
#======================================================
# Merge the second candlestick chart into the placeholder
#======================================================
#layout both charts first
c.layout()
c2.layout()
m.makeChart3().merge(m2.makeChart3(), 0, 0, TopLeft, 0)
# make both charts so you can get the image map from both
chart1URL = c.makeTmpFile("/tmp/tmpcharts")
c2.makeChart3()
# Create an image map for the chart
imageMap = c.getHTMLImageMap("clickline.py", "", "title='{xLabel}: US$ {value|0}M'")
imageMap = imageMap + c2.getHTMLImageMap("clickline.py", "", "title='{xLabel}: US$ {value|0}M'")
Hope this can help.
Regards
Peter Kwan |
Re: How to simply add a main-like chart to finance chart |
Posted by Rammy on Jun-19-2009 05:16 |
|
Hi Peter
Thank you for your answer. It helped me to build a proper map. But another little thing appeared: I would like to add a title to this second finance chart (and is it possible for any Indicator?). When I added simple PlotArea and used addText method the second map was shifted up (of the height of PlotArea exactly). Maybe there is a very simple way to add the title to the indicator (i.e. to the second finance chart in my case) with the proper map generation? Maybe it's a silly question and I have omitted something in docs. Thank you in advance for you help.
Regards,
Rammy |
Re: How to simply add a main-like chart to finance chart |
Posted by Peter Kwan on Jun-19-2009 21:31 |
|
Hi Rammy,
I am not exactly sure how you are currently adding the title. In general, if you want to change the size and position of the second main price chart, you need to do it in both FinanceChart objects c and c2, so that the image map generated by c2 matches the chart in c.
In your case, I am not sure where would you like to have the title. If I were you, I would put the title inside the plot area, just like the legend box is inside the plot area. In this way, you do not need to add another plot area or resize the plot area.
If you want to put the title outside of the plot area, note that the main price chart and every indicator charts already has a margin of 30 pixels above the plot area (configurable using FinanceChart.setMargins). By default, this region is transparent. When you stack the charts together, the top margin of the bottom chart will overlap with the bottom margin of the top chart, so that their plot area almost touch (the gap is configurable by FinanceChart.setPlotAreaBorder).
So you can add your title at the top 30 pixels, like:
m2.addText(40, 15, "My Title", "arialbd.ttf", 8)
Then you can configure a wider gap so that the title will not overlap with the chart above. (Please ensure you configure the same gap in both c and c2.)
Hope this can help.
Regards
Peter Kwan |
Re: How to simply add a main-like chart to finance chart |
Posted by Rammy on Jun-20-2009 00:33 |
|
Hi Peter
I have two main finance charts (one under the other) and then 2 or 3 indicators additionally. I have added the second chart according to your advice in former messages (in this topic). If I add the gap to the first main finance chart (object 'm') all the indicators get the same gap! That's what I don't want to. These two charts are for comparison of two different stock companies and I would like to have one-line title for the second main finance chart, too (as I have in the first one). Now I have small nice gaps but only one title (see the attached screenshot).
I hope I wrote it better now
Regards,
Rammy
|
Re: How to simply add a main-like chart to finance chart |
Posted by Peter Kwan on Jun-20-2009 15:23 |
|
Hi Rammy,
I can think of several methods.
May be you can insert a dummy indicator chart (eg. of height 20 pixels) between the two main price charts. This will leave a gap of 20 pixels. You would need to configure the dummy indicator chart to be transparent, like:
ind = c.addIndicator(20)
ind .getPlotArea().setGridColor(Transparent, Transparent)
ind .getPlotArea().setBackground(Transparent, Transparent, Transparent)
ind .getLegend().setBackground(Transparent, Transparent, Transparent)
............
#remember to do the same thing in the second financial chart, but no need to
#worry about the appearance
c2.addIndicator(20)
Hope this can help.
Regards
Peter Kwan |
Re: How to simply add a main-like chart to finance chart |
Posted by Rammy on Jun-24-2009 21:10 |
|
Hi Peter
Thank you very much for your help. Now it works great By the way I got one silly problem: when I use normal letter ex. arial.ttf I have no polish characters, when I switch to bold ex. arialbd.ttf all works OK. I suppose it depends on my OS (I work on Ubuntu 7.04, yes I know it remembers times when mammoths died out :P). I tried it under Windows Server and there was no problem with it. Maybe someone had the same problem and your suggestion can be helpful not only for me
Regards and thnx for help
Rammy |
Re: How to simply add a main-like chart to finance chart |
Posted by Peter Kwan on Jun-25-2009 00:46 |
|
Hi Rammy,
Both the "arial.ttf" and "arialbd.ttf" have Polish characters.
If you cannot see Polish characters when you specify "arial.ttf", it is because your computer does not have "arial.ttf". If you specify a font that does not exist, ChartDirector will substitute it with a backup font. The backup font may or may not have Polish characters.
On Windows, the "arial.ttf" and "arialbd.ttf" fonts always exist (it comes with the OS). On Linux, the "arial.ttf" and "arialbd.ttf" fonts will not be there. (These two fonts are Microsoft copyrighted fonts, and cannot be redistributed in Linux.) However, you may be able to legally download the fonts yourself and use it on Linux. Please refer to "Font Specification" in the ChartDirector documentation (you may look for "Font Specification" in the ChartDirector documentation index) for more details.
Hope this can help.
Regards
Peter Kwan |
|