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

Message ListMessage List     Post MessagePost Message

  add zoom/scroll to finance chart c#
Posted by Mark on Aug-29-2013 02:03
| Reply | Monitor
Hi Peter,

I know this question has been asked several times for other programming languages, but as
a novice programmer, and a novice in C# too, I was wondering if you could tell me how to
add the zoom/scroll function to a finance chart in C# .NET (4.0).

one other restriction i have is that i don't actually want the chart re-drawn whether the
user clicks on the zoom button (as in the Zooming and Scrolling with Track Line (1) chart),
if that is in fact a possibility. What I would like is more like a zoom function in a MS-Paint or
photo-viewer-type application where the existing image simply zooms in, and scroll bars
appear on either axis to navigate it. this is because i'm dealing with a few charts that have
1 or 2 minute candles, and cannot be adjusted further (i.e. if there is a re-draw request).
the code i'm using is standard FinanceChart code (from Finance2.cs)

Please help!
Thanks,
Mark

  Re: add zoom/scroll to finance chart c#
Posted by Peter Kwan on Aug-30-2013 04:21
| Reply | Monitor
Hi Mark,

If you would like to zoom like zooming a photo (a graphical zoom), you would need to find a control or develop the code to provide the zoom function. (The WinChartViewer basically provides "data zoom".) For example, you can display the chart image (created using BaseChart.makePicture) in a standard .NET PictureBox, the add additional code to allow the user to control the zooming and to scroll it.

By using Google, I have found some code fragment below that may be useful as a reference:

http://www.codeproject.com/Articles/21097/PictureBox-Zoom

Although in your case, the user interface would not be the same, but the code after does demonstrate how to create a bigger picture out of an existing picture.

Hope this can help.

Regards
Peter Kwan

  Re: add zoom/scroll to finance chart c#
Posted by Mark on Sep-02-2013 12:15
| Reply | Monitor
Hi Peter,

Thanks for your reply. The link you sent was quite helpful, but I realized that it would be
quite cumbersome to implement. The reason has to do with resolution of the original image,
which is not always high enough to provide a high quality zoomed image-view of a chart
with many candles (eg zooming in on a 1 minute candle chart).

Instead, I scanned the forum and found this:
http://www.chartdir.com/forum/download_thread.php?
site=chartdir&bn=chartdir_support&thread=1355740777

(thread 1355740777)
The attachment was very helpful, but I am wondering if it is possible to use the code from
frmxyzoomscroll.cs.

As a newbie in C# I am not very familiar with the code in the zoom charts, and specifically
how exactly to incorporate them into my finance chart (modeled on finance2.cs)

One related question - does the code in the Windows Form designer (for example,
frmxyzoomscroll.cs) have to modified manually to incorporate event handlers for when the
mouse scroll wheel is selected, for example? If so, how does one do this?

Please help - I've been trying for several days now without any luck!

Thanks!
Mark

  Re: add zoom/scroll to finance chart c#
Posted by Peter Kwan on Sep-03-2013 01:49
| Reply | Monitor
Hi Mark,

In charting, for zooming in, most people expect to see a more detail chart, not a bigger chart or part of a chart. For example, the chart may contain more detail data (from interday data to intraday data), while the font size and line widths, margins, etc, are the same (so many things are not bigger). So zooming in a chart is not like zooming in "MS-Paint or photo-viewer". Rather, it is like zooming in "Google Map". (When you zoom in a map, you see a different type of map showing more details, such as from a terrian map to a street map, with more detail labels, but the font size and line widths stay the same.) That's why in ChartDirector, zooming requires redrawing the chart, rather than enlarging the chart like MS-Paint.

Yes. You can base your system using the code in the thread you found. However, note that the code you found can zoom in both the x and y directions. This is OK if there is only one chart in the FinanceChart. If there are multiple charts (eg. with indicator charts), if is hard to interpret what is zooming in the y directions means, as the charts have different y-axes. However, zooming in the x direciton is well-defined, as all the charts shared the same x-axis scale. So I suggest for your case, as you have other technical indicator charts, you may remove the code for y-direction zooming and just zooms in the x-direction.

Hope this can help.

Regards
Peter Kwan

  Re: add zoom/scroll to finance chart c#
Posted by Mark on Sep-05-2013 19:20
| Reply | Monitor
Attachments:
Hi peter,
thanks for your advice.  I have been trying to restrict zooming to the x-axis, or at
least not zoom in on the y-axis, given the reasons you correctly mentioned.

however, i am facing a problem with the zooming that i hope you can help with. i have
been unable to fix it for almost a week and was hoping you could see what is going
wrong. i altered my code to suit the 3 function model - loadData(), initviewer() and
drawChart(). i have listed the code for initViewer and drawChart() below.

the chart loads correctly initially because i make all the data points visible, so it works as
expected. however, upon clicking the zoom button, the chart zooms in correctly, initially.
the problem comes when i drag the mouse in order to scroll horizontally on the chart.
data points that should be visible disappear, and when i reverse scroll from the last point
(3:30pm for a daily 1/2/3 minute candle chart, for example), those points also disappear
suddenly, even though there is space on the chart for them to be displayed.

in other words, the data points do not display in a tight-locked mechanism the way they
should (and do) in your frmsimplezoomscroll.cs included in the sample WinChart demo. in
that chart, once i scroll to the end, the last point visible on the right is the last point of
the data set (1/2012 i think). in my chart (see below), the last point is only visible to the
LEFT of the chart, and disappears if i scroll to the left to see other candles.

i don't know how to solve this as my code is almost exactly the same as the code in the
demo windows forms and class files. please help!

Other issues i have been facing include problems with the dates, which revert to Jan 01,
0001 for some reason, instead of the Feb 25 date originally identified (as human-readable
text) for my tooltip and volume bar.

Each of the charts attached indicate that the state of affairs with regards to the chart
when one activity is performed.
1. orig is the original chart that works fine.
2. the first zoom attempt in the top left corner also works as expected.
3. the second zoom throws off the dates, as explained above (jan 01, 0001)
4. when zooming to the end, only select candles display, and by the last candle, only
one candle (the last one) is visible on the zoomed chart.
5. when i scroll back the candle disappears rather than staying on the right hand side.
6. when i zoom in too much (don't know how to disable this), the data disappears
completely.


initViewer()
private void initChartViewer(WinChartViewer viewer)
        {
            // Set the full x range to be the duration of the data
            viewer.setFullRange("x", 0, timeStamps.Length - 1);

            // Initialize the view port to show the latest 250 points
            viewer.ViewPortWidth = timeStamps.Length;
            viewer.ViewPortLeft = 1 - viewer.ViewPortWidth;

            // Set the maximum zoom to 10 points
            viewer.ZoomInWidthLimit = 10 / timeStamps.Length;
            viewer.ZoomDirection = WinChartDirection.HorizontalVertical;

            // Initially set the mouse usage to "Pointer" mode (Drag to Scroll mode)
            pointerPB.Checked = true;
        }

drawChart()
private void drawChart(WinChartViewer viewer, string stockSymbol)
        {

            // Get the start date and end date that are visible on the chart.
            int startIndex = (int)Math.Floor(viewer.getValueAtViewPort("x",
viewer.ViewPortLeft));
            int endIndex = (int)Math.Ceiling(viewer.getValueAtViewPort("x",
viewer.ViewPortLeft +
                viewer.ViewPortWidth));


            // To compute moving averages starting from the first day, we need to get
            // extra data points before the first day
            int extraDays = 0;
            //startIndex -= extraDays;
            int noOfPoints = endIndex - startIndex + 1;

            // Extract the part of the data array that are visible.
            DateTime[] viewPortTimeStamps = (DateTime[])Chart.arraySlice(timeStamps,
startIndex, noOfPoints);
            double[] viewPortHighData = (double[])Chart.arraySlice(highData, startIndex,
noOfPoints);
            double[] viewPortLowData = (double[])Chart.arraySlice(lowData, startIndex,
noOfPoints);
            double[] viewPortOpenData = (double[])Chart.arraySlice(openData, startIndex,
noOfPoints);
            double[] viewPortCloseData = (double[])Chart.arraySlice(closeData, startIndex,
noOfPoints);
            double[] viewPortVolData = (double[])Chart.arraySlice(volData, startIndex,
noOfPoints);
            //beginning of finance chart code
            //double[] viewPortPosData = (double[])Chart.arraySlice(positionPrices,
startIndex, noOfPoints);
            //int extraDays = 0;
            FinanceChart c = new FinanceChart(760);
            c.addTitle("Finance Chart Demonstration");
            c.setData(viewPortTimeStamps, viewPortHighData, viewPortLowData,
viewPortOpenData,
        viewPortCloseData, viewPortVolData, extraDays);
            //c.setData(candletimesArray, highData, lowData, openData, closeData,
volumeData, extraDays);
            c.setPlotAreaStyle(0xffffff, 0xdddddd, 0xffffff, 0xffffff, 0xffffff);
            XYChart mainPriceChart = c.addMainChart(360);
            mainPriceChart.getLegend().setPos(-9999, -9999);
c.addCandleStick(0x00EE00, 0xE65C01);
            XYChart v = c.addVolIndicator(75, 0xff00ff, 0xff00ff, 0xff00ff);
            v.getLayer(0).setLegendOrder(Chart.NoLegend);
            v.getLegend().addKey("Vol", 0xff00ff);

            viewer.syncDateAxisWithViewPort("x", mainPriceChart.xAxis());
            mainPriceChart.yAxis().setMargin(0, 0);
            mainPriceChart.setClipping();
viewer.Chart = c;
      viewer.ImageMap = c.getHTMLImageMap("clickable", "",
                "title='{xLabel} \nHigh:{high}\nOpen:{open}\n" +
                "Close:{close}\nLow:{low}'");

private void viewer2_ViewPortChanged(object sender, WinViewPortEventArgs e)
        {
            // Update the chart if necessary
            if (e.NeedUpdateChart)
                drawChart(viewer2, stock);
        }

private void zoomInPB_CheckedChanged(object sender, EventArgs e)
        {
            if (((RadioButton)sender).Checked)
                viewer2.MouseUsage = WinChartMouseUsage.ZoomIn;
        }

        //
        // Zoom Out button event handler
        //
        private void zoomOutPB_CheckedChanged(object sender, EventArgs e)
        {
            if (((RadioButton)sender).Checked)
                viewer2.MouseUsage = WinChartMouseUsage.ZoomOut;
        }

windows forms event handlers:
this.viewer2.ViewPortChanged += new
ChartDirector.WinViewPortEventHandler(this.viewer2_ViewPortChanged);

this.zoomInPB.CheckedChanged += new
System.EventHandler(this.zoomInPB_CheckedChanged);

this.zoomOutPB.CheckedChanged += new
System.EventHandler(this.zoomOutPB_CheckedChanged);

this.pointerPB.CheckedChanged += new
System.EventHandler(this.pointerPB_CheckedChanged);

please help!
thanks,
mark
orig.png
zoom ok.png
zoom dates not ok.png
only one candle.png
disappears when scroll back.png
data disappears completely.png

  Re: add zoom/scroll to finance chart c#
Posted by Peter Kwan on Sep-06-2013 02:19
| Reply | Monitor
Hi Mark,

Please remove the line:

viewer.syncDateAxisWithViewPort("x", mainPriceChart.xAxis());

The above line is not needed because the x-axis in a financial chart does not represent date/time, so the x-axis is not a date/time axis. The timeStamps are random and unpredictable and are just names for human reading, and has no other purpose. See:

http://www.chartdir.com/forum/download_thread.php?site=chartdir&bn=chartdir_support&thread=1378294006#N1378311309

If you are not zooming vertically, the following code are not necessary as well:

mainPriceChart.yAxis().setMargin(0, 0);
mainPriceChart.setClipping();

Hope this can help.

Regards
Peter Kwan

  Re: add zoom/scroll to finance chart c#
Posted by Mark on Sep-06-2013 19:04
| Reply | Monitor
Attachments:
Hi Peter,

Thank you so much - this works perfectly! One last question, how do i restrict the extent of
the zoom in function? I used the bit from the sample code:

// Set the maximum zoom to 10 points
viewer.ZoomInWidthLimit = 10.0 / timeStamps.Length;

But it doesn't seem to restrict the number of times i can zoom in (almost 15-16 clicks,
where 1 candle appears very large! see below).

Can i change anything to restrict this?

Let me know,
Thanks,
Mark
mychart.png

  Re: add zoom/scroll to finance chart c#
Posted by Peter Kwan on Sep-07-2013 01:14
| Reply | Monitor
Hi Mark,

Would you mind to clarify the exact code you are using?

In your earlier message, the code you are using is:

viewer.ZoomInWidthLimit = 10 / timeStamps.Length;

The above code will set the ZoomInWidthLimit to 0, so you can zoom indefinitely. In our sample code, and also in your latest message, the line you mentioned is:

viewer.ZoomInWidthLimit = 10.0 / timeStamps.Length;

Note that the above code is different from the actual code you posted in your previous message, and the above code will set the ZoomInWidthLimit to a value equal to 10 timestamps.

Another thing I noted is that in your original code, you use:

viewer.ZoomDirection = WinChartDirection.HorizontalVertical;

I am not sure if you have alrady changed it to:

viewer.ZoomDirection = WinChartDirection.Horizontal;

if you only want to zoom and scroll horizontally.

Please kindly let me know if the above can solve the problem.

Regards
Peter Kwan