ListBox with GridLines - c#

I have already defined listBox with all the functionality (It is a Graph with a dragging points). Around ListBox I want to add "GridLines" on X and Y axis (I hope thats the right word - data info on X axis and data info on Y axis - example - hour times every half hour or so on X and 0-100% on Y axis).
So on X axis I like to have hour from 0:00 to 24:00 and on Y axis % from 0 - 100. I can use normal label or textblock and write number in is the simplest idea. But because grid of listbox will change depending on the data, I like to have manageable scaling. Start is always eg. 0 and end is also always eg. 100%. I like to scale infos that show infos every 20 units (0%, 20%, 40%, 60%, 80% and 100%) or every 25% (0%, 25%, 50%, 75%, 100%) or so.
I think do it with a Borders (for little marking line) and in next row with TextBlock define value. All this wrap in DataTemplate.
If something unclear or have any questions please ask.

It sounds like the hard part of your problem is determining what grid line intervals to use. I describe a nice algorithm here that produces ranges which are pleasing to a viewer.
With this, you can then divide the dimension into spaces and scale the values accordingly. Whatever logic you use for the positioning of points should also be updated.
For drawing lines, you can add Line shapes to your Canvas.

Related

C# Candlestick plot graph issue. No candle body visible. Candles plot like lines

I am trying to plot some sample data I got from an excel file and saved into arrays in a candlestick chart. The data I am trying (if it helps) is a forex pair(EUR/GBP ratio), in forex, pairs are quoted at the 4 decimal point.
The problem is that the body of the candle is not visible on the chart as I would've expected in the below graph(image is just a random example).
example candlestick chart
My candles plot like lines with barely any visible body.
my plotted candlestick chart
The Y axis minimum and maximum values are set by default to 0 and 1 so logically I assumed that the interval is the problem.(my sample data is around 0.8500 min and 0.9500 max) so naturally in order to see the candle body I tried to reduce the minimum and maximum interval in order to see any candle body, but this only caused my chart to plot blank, nothing there.
blank candle chart
Just to test things around i'm plotting 15 points.
To plot those 15 point
if (i < 15)
{
chart1.Series["Series1"].Points.AddXY(i, 0, 0, Open[i], Close[i]);
}
The plotting function takes 5 arguments, arg1 date, arg2 candle low, arg3 candle high, arg4 candle open price, arg5 candle close price.
If I had two candles with close prices of 0.8532 and 0.8539 and open prices 0.8530 and 0.8537 respectively I should've seen candle bodies like this
Expcted candle body
The only thing I tried to play around with was with Y minimum and maximum values but with no solution, and with the Y axis scaleview property again with no solution again.
The last thing I can think of is to make the chart to take into account the 4 decimal point as a main value for which it plots it's data (I don't know how to make sense of this), going with significance from right to left If this makes sense.
Is there something that I miss?
What can I do to properly see the body of the candle?
And why when I reduce the Y axis value interval my charts gets blank.
Thanks in advance, any suggestion would be helpful.
It all comes down to the numbers in your data.
The automatic axes scaling will allow for all values to show.
With high/low being 0/0 or 0/1 the range it needs to show goes from 0 to 0.8539 or from 0 to 1.
But the body only goes from 0.8530 to 0.8532.
So the body is ca 2/1000 of the axis range. To make it show you would need a rather large chart height.
Make sure to set suitable values in your data and help the chart along by setting the Minimum/Maximum values..:
var ca = chart1.ChartAreas[0];
ca.AxisY.Minimum = 0.8500;
ca.AxisY.Maximum = 0.8570;
chart1.Series["Series1"].Points.Clear();
chart1.Series["Series1"].Points.AddXY(2, 0.8532, 0.8530, 0.8532, 0.8530);
Result:

How to keep PointWidth fixed and add scrollbar in Range bar Chart

I have a gantt chart contrains tasks.
I declared the PointWidth as 0.25
GanttChart.Series["Tasks"]["PointWidth"] = "0.25";
this works good when I have few tasks but whenever I have more tasks the pointWidth (range) becomes smaller and smaller!
I want to keep it 0.25 and to put scrollbar when there are many tasks.
The CustomProperty PointWidth is in percent of the visible axis.
So with one point the bar or column is really fat and the more data points you add the thinner they will get.
If you want to keep a fixed width while changing the number of data points you need to use PixelPointWidth instead.
Note however that by default now the bars/columns get closer and closer to each other until the overlap.
To give them enough room and show scollbars instead, you need to enable the built-in zooming mechanism as MSChart will not use normal Scrollbars.
This should help:
Series s = chart1.Series[0];
s.SetCustomProperty("PixelPointWidth", "12"); // 12 pixels
var ca = chart1.ChartAreas[0];
ca.AxisX.ScrollBar.Enabled = true;
ca.AxisX.ScaleView.Size = 30; // show a value range of 30
chart1.Refresh(); // usally not needed, but we change a custom property
Note that the ScaleView.Size is in data values. This is the 3rd of the three coordinate system in the chart: percentages, pixels and values! Very powerful and rather tricky..

MSChart axis moves depending on text size

Does anybody now how to prevent the Y-axis from moving (horizontally) when the text area increases (for example when displaying 100 instead of 1 on a label on the Y-axis).
The following image illustrates the problem; when a decimal is added to the number on the labels, the diagram is resized and the Y-axis is moved to the right:
The reason the Axis and other a few other ChartElements may move is that their Positions are set to Automatic by default; so when the lables need more space they get it and the inner portion is reduced.
So if you want to prevent that you need to set an explicit values for the X values of its Position.
Note that the values are in percent of the respective containers.
Unless you set a special Crossing value, the primary axes are always drawn to the left and bottom of the InnerPlotArea.
So you want to set the position, maybe like this:
ChartArea ca = chart1.ChartAreas[0];
ca.InnerPlotPosition.X = 10;
Note however, that this means: The Y-Axis will start at 10% of the whole ChartArea.Width, which usually means something like 'almost 10%' of the whole Chart.Width. (The Legend and some white space will usually take some space, too).
So if you resize your chart the axis may sit a little too much to the right.. You may want ot play with the number and maybe code an extra line in the Resize event of the Chart.

How to change drawing line size in TeeChart

I am working with TeeChart fro .net, I would like to increase the size of drawing line in the chart. presently it is drawing very thin line which is not visible for all people. How to increase size of drawing line in TeeChart.
I have attached a simple chart image from my application. I would like to draw the line with more or equal size to axis lines. presently it seems drawing line size less that axis line size. I mean i want to draw line more thick.
2) How to assign axis scale more reliably, i mean presently if i have axis minimum and maximum values from 0 to 6, then it is showing on the axis like 0,2,4,6. I would like to see like 0,1,2,3,4,5,6 like that i mean with 1 scale increment. Please help me with the above two things.
1) How to increase drawing line size?
2) How to assign scale of axis more convenient?
The chart's features mention support for Csharp .NET charting control.
http://www.steema.com/teechart/net
Microsoft has pages with information about the chart controls:
http://msdn.microsoft.com/en-us/library/dd456632.aspx
Looks like you will find how to do the things you want there.
1) How to increase drawing line size?
You can set Line or FastLine Pen.Width like this:
line1.LinePen.Width = tChart1.Axes.Left.AxisPen.Width;
2) How to assign scale of axis more convenient?
TeeChart will automatically set axis scales to the minimum increment possible provided labels don't overlap. To get a fixed axis increment you should set axis Increment property. Labels won't be allowed to overlap though.
tChart1.Axes.Bottom.Increment = 1;
For more information on axis settings please read tutorial 4. Tutorials can be found at TeeChart's program group.

Snake in C# - player can scale window - dividing manual-scaled window into identical squares

As part of my self-education of programming I decided to make a snake in C#. The problem I have is about the client size of the game form.
I want player to be able to scale the window of the game, which is divided into 25 x 25 grid (every coordinate is like "one pixel") - it means, that at any moment, the window is divided into 25 x 25 identical squares.
The problem I get is near this code:
int SquareSide = (ClientSize.Width / 25);
When I set the ClientSize strictly to for example 600 x 600, which is a multiple of 25, everything goes OK. But when I don't (for example by manual resizing, which can change the size to, for example, 711 x 711), it creates at the right side a 'strip', which seems to be the rest of pixels, which can't be used because we are dividing to integer number.
My question is - is there any not-extremely-hard way to achieve dividing ANY client size of form into 25 x 25 grid without this problem? I tried using double, but FillRectangle method doesn't accept it.
I hope my question is understandable and thank you for replies.
To tell you the truth, there is
g.FillRectangle(Brush b, RectangleF rect)
RectangleF is a rectangle whose coordinates are float.
So you can use:
float SquareSide = (ClientSize.Width * 1f / 25);
I would try to simply handle OnResize event of the window, and at the moment user finishes rezise it, force the size that program need for perfect fit of the grid.
So for example at the moment user releases mouse and you figure out that one dimensions of the window 711x711, bring it to nearest correct fit 700x700.
In this way you guarantee good user experience on different monitor resolutions and for you guarantee a correct fit of the grid you draw.
Hope this helps.
Switch to float coordinates for everything. Make sure your game looks OK when lines do not have whole pixel coordinates. Make sure you "find next cell" code also works with floats, including mouse position detection if needed.
The other approach is to be happy with integer coordinates (and cells of the same size) and make page layout flexible to accomodate some unused space for odd 711x711 layouts (i.e. just center the field and keep some variable width border).

Categories