What i want is to set borders between two series in StackedBar Like this image The bold black line between blue and green
I can not figure out any idea to specify the border, i tried to set the borders to the series throuh this code
chart.Series["series0"].BorderWidth = 2;
chart.Series["series0"].BorderColor = Color.Black;
chart.Series["series0"].BorderDashStyle = ChartDashStyle.Solid;
but this the result i got
Here's my code
double l = Convert.ToDouble(query1[i - 1][0]) - 10;
string n = query1[i - 1][1];
int count = 0;
for (double t = l; t < l + 10; t++)
{
//Next line Calc. the occurence of character in a text file
count = n.Split('C').Length - 1;
//Multiple the occurence by 10 so it become percent
chart.Series["series0"].Points.AddXY(t, count * 10);
chart.Series["series0"]["PointWidth"] = "1";
chart.Series["series0"].BorderWidth = 2;
chart.Series["series0"].BorderColor = Color.Black;
chart.Series["series0"].BorderDashStyle = ChartDashStyle.Solid;
count = n.Split('o').Length - 1;
chart.Series["series1"].Points.AddXY(t, count * 10);
chart.Series["series1"]["PointWidth"] = "1";
}
How to achieve the first pic effect using StackedBar ? , if i can not using StackedBar, what chart type you suggest to use ??
There are no built-in chart elements that could easily be made into a borderline between those two Series. (Creating LineAnnotations to achieve this would be a nightmare..)
So the way to add the lines is to draw them onto the surface of the Chart. This is most naturally done in the PostPaint event, provided just for such adornments.
Here the Axes have handy functions to convert between the data values and the pixel positions. We need the ValueToPixelPosition method.
I will take you through variations of Chart drawing that gradually get a little more complicated as we approach the final version..:
Let's start with a simple example: Let's build and adorn a StackedArea chart; here is the drawing code:
private void chart2_PostPaint(object sender, ChartPaintEventArgs e)
{
Series s = chart1.Series[0];
ChartArea ca = chart1.ChartAreas[0];
var pp = s.Points.Select(x=>
new PointF( (float)ca.AxisX.ValueToPixelPosition(x.XValue),
(float)ca.AxisY.ValueToPixelPosition(x.YValues[0]) ) );
if (s.Points.Count > 1)
using (Pen pen = new Pen(Color.DarkOliveGreen, 4f))
e.ChartGraphics.Graphics.DrawLines(pen, pp.ToArray());
}
The Points.Select is really just a shorthand for a loop; so after creating the pixel point list we simply draw it.
Now, as you can see, as StackedArea chart is pointy and doesn't look like a StackedBar or StackedColumn chart. So let's cheat and 'rectify' the area chart by adding a few extra points:
void rectifyArea(Series s)
{
for (int i = s.Points.Count - 1; i > 0; i--)
s.Points.InsertXY(i, i - 1, s.Points[i].YValues[0]);
}
Results:
Now that was not so hard; unfortunately you just can't turn a StackedArea to go from left to right instead of bottom-up. So we need to change the chart type to a Bar type eventually..
Here the challenge is to find the right upper and lower corners of those bars. We do have the DataPoint values, but these are in the middle of the bars. So we need to add/subtract half of the Bars' width to get the corners. For this we need the width.
While you have set it with the PointWidth property to 1, what we really need is the pixel width. We best get it by subtracting the pixel coordinates of two neighbouring points.
This makes the PostPaint event a little longer, but still not overly complicated; we will start with a StackedColumn chart, adding two corner points for each data point:
private void chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
Series s = chart1.Series[0];
ChartArea ca = chart1.ChartAreas[0];
if (s.Points.Count <= 0) return;
// calculate width of a column:
int pp1 = (int)ca.AxisX.ValueToPixelPosition(s.Points[0].XValue);
int pp2 = (int)ca.AxisX.ValueToPixelPosition(s.Points[1].XValue);
float w2 = Math.Abs(pp2 - pp1) / 2f;
List<PointF> points = new List<PointF>();
for (int i = 0; i < s.Points.Count; i++)
{
DataPoint dp = s.Points[i];
points.Add(new PointF( (int)ca.AxisX.ValueToPixelPosition(dp.XValue) - w2,
(int)ca.AxisY.ValueToPixelPosition(dp.YValues[0]) ));
points.Add(new PointF( (int)ca.AxisX.ValueToPixelPosition(dp.XValue) + w2,
(int)ca.AxisY.ValueToPixelPosition(dp.YValues[0]) ));
}
if (points.Count > 1)
using (Pen pen = new Pen(Color.DarkOliveGreen, 4f))
e.ChartGraphics.Graphics.DrawLines(pen, points.ToArray());
}
Now this looks pretty much identical to our fake version of the 'rectified area chart'. What will we need to change to apply this to a StackedBar chart? Almost nothing! The only two things we need to take care of are
the direction of the y-axis. Since the points move upward but the pixel coordinates of GDI+ graphhics move downwards we need to create the two cornerpoints in the reverse order.
And we need to reverse the x- and y coodinates, as the axes are reversed for all types of Bar charts.
Here are the two stacked charts with a border:
This is the loop for the StackBar chart:
for (int i = 0; i < s.Points.Count; i++)
{
points.Add(new PointF( (float)ca.AxisY.ValueToPixelPosition(s.Points[i].YValues[0]),
(float)ca.AxisX.ValueToPixelPosition(s.Points[i].XValue) + w2));
points.Add(new PointF( (float)ca.AxisY.ValueToPixelPosition(s.Points[i].YValues[0]),
(float)ca.AxisX.ValueToPixelPosition(s.Points[i].XValue) - w2));
}
Note that I am drawing with a fixed pen width of 4 pixels. To make it scale with the Chart you may want to calculate the pen width dynamically..
Update
To draw borders on top of several series you can put the code into a loop like this:
private void chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
Chart chart = chart1;
Series s0 = chart.Series[0];
ChartArea ca = chart.ChartAreas[0];
// calculate width of a bar:
int pp1 = (int)ca.AxisX.ValueToPixelPosition(s0.Points[0].XValue);
int pp2 = (int)ca.AxisX.ValueToPixelPosition(s0.Points[1].XValue);
float delta = Math.Abs(pp2 - pp1) / 2f;
for (int s = 0; s < chart.Series.Count; s++)
{
List<PointF> points = new List<PointF>();
for (int p = 0; p < chart.Series[s].Points.Count; p++)
{
DataPoint dp = chart.Series[s].Points[p];
double v = GetStackTopValue(chart, s, p);
points.Add(new PointF((float)ca.AxisY.ValueToPixelPosition(v),
(float)ca.AxisX.ValueToPixelPosition(dp.XValue) + delta));
points.Add(new PointF((float)ca.AxisY.ValueToPixelPosition(v),
(float)ca.AxisX.ValueToPixelPosition(dp.XValue) - delta));
}
using (Pen pen = new Pen(Color.DarkOliveGreen, 3f))
e.ChartGraphics.Graphics.DrawLines(pen, points.ToArray());
}
}
double GetStackTopValue(Chart chart, int series, int point)
{
double v = 0;
for (int i = 0; i < series + 1; i++)
v += chart.Series[i].Points[point].YValues[0];
return v;
}
Related
There is an input of points with size of n like below:
S = {x1,y1,x2,y2,...,xn,yn}
I want to display scatter graph of S sequence in a picture box. So for transforming them into picture box dimensions, I have normalized them and multiplied them by width and height of picture box with respecting picture box left and top:
waveData= wave.GetWaveData();
normalizedData = GetSignedNormalized();
n = normalizedData.Count;
picW = pictureBox1.Width;
picH = pictureBox1.Height;
picL = pictureBox1.Left;
picT = pictureBox1.Top;
normalizedInPictureBox = new List<float>();
for (int i=0;i< n; i +=2)
{
float px = normalizedData[i];
float py = normalizedData[i+1];
px = px * (picW - picL);
py = py * (picH - picT) ;
normalizedInPictureBox.Add(px);
normalizedInPictureBox.Add(py);
}
Normalize Method is also:
public List<float> GetSignedNormalized()
{
List<float> data = new List<float>();
short max = waveData.Max();
int m = waveData.Count;
for(int i=0;i< m; i++)
{
data.Add((float)waveData[i] / (float)max);
}
return data;
}
Now I am thinking normalizedInPictureBox List contains vertices in the range of picture box, and here is the code for drawing them on picture box:
In the paint method of picture box:
Graphics gr = e.Graphics;
gr.Clear(Color.Black);
for(int i=0;i< n; i +=2)
{
float x = normalizedInPictureBox[i] ;
float y = normalizedInPictureBox[i+1];
gr.FillEllipse(Brushes.Green, new RectangleF(x, y, 2.25f, 2.25f));
}
But the result is shown below:
I don't Know whats going wrong here , but I think the graph should be horizontal not diagonal ,the desire result is something like this:
I know that I can transform it to center of picture box after this. but How can change my own result to the desire one?
Thanks in advance.
I don't really know why your code doesn't work correctly without having a look at the actual data and playing around with it, but having done chart drawing before, I suggest you go the full way and clearly define your axis ranges and do proper interpolating. It get's much clearer from there.
Here is what I came up with
static Bitmap DrawChart(float[] Values, int Width, int Height)
{
var n = Values.Count();
if (n % 2 == 1) throw new Exception("Invalid data");
//Split the data into lists for easy access
var x = new List<float>();
var y = new List<float>();
for (int i = 0; i < n - 1; i += 2)
{
x.Add(Values[i]);
y.Add(Values[i + 1]);
}
//Chart axis limits, change here to get custom ranges like -1,+1
var minx = x.Min();
var miny = y.Min();
var maxx = x.Max();
var maxy = y.Max();
var dxOld = maxx - minx;
var dyOld = maxy - miny;
//Rescale the y-Range to add a border at the top and bottom
miny -= dyOld * 0.2f;
maxy += dyOld * 0.2f;
var dxNew = (float)Width;
var dyNew = (float)Height;
//Draw the data
Bitmap res = new Bitmap(Width, Height);
using (var g = Graphics.FromImage(res))
{
g.Clear(Color.Black);
for (int i = 0; i < x.Count; i++)
{
//Calculate the coordinates
var px = Interpolate(x[i], minx, maxx, 0, dxNew);
var py = Interpolate(y[i], miny, maxy, 0, dyNew);
//Draw, put the ellipse center around the point
g.FillEllipse(Brushes.ForestGreen, px - 1.0f, py - 1.0f, 2.0f, 2.0f);
}
}
return res;
}
static float Interpolate(float Value, float OldMin, float OldMax, float NewMin, float NewMax)
{
//Linear interpolation
return ((NewMax - NewMin) / (OldMax - OldMin)) * (Value - OldMin) + NewMin;
}
It should be relatively self explanatory. You may consider drawing lines instead of single points, that depends on the look and feel you want to achive. Draw other chart elements to your liking.
Important: The y-Axis is actually inversed in the code above, so positive values go down, negative go up, it is scaled like the screen coordinates. You'll figure out how to fix that :-)
Example with 5000 random-y points (x is indexed):
I have a chart with a point (those quadcopter images) and I want to draw a circle on that point with x radius. I cant figure out how to do it.
I want this
Code:
for (int i = 0; i < drone.Length; i++)
{
var pos_atual = drone[i].posicao_atual;
var pos_desej = drone[i].posicao_desejada;
chart.Series[i].Points.Clear();
chart.Series[i].Points.AddXY(drone[i].pos_atual().X, drone[i].pos_atual().Y);
}
}
You need to code one of the xxxPaint events, maybe like this:
private void chart_PostPaint(object sender, ChartPaintEventArgs e)
{
Series s = chart.Series[yourSeriesIndex];
int yourPointIndex = 4;
if (s.Points.Count < yourPointIndex) return;
DataPoint dp = s.Points[yourPointIndex];
ChartArea ca = chart.ChartAreas[0];
int x = (int) ca.AxisX.ValueToPixelPosition(dp.XValue);
int y = (int) ca.AxisY.ValueToPixelPosition(dp.YValues[0]);
// a circle with 20 pixels diameter
e.ChartGraphics.Graphics.DrawEllipse(Pens.Red, x-10, y-10, 20, 20);
}
As an alternative you can add a Marker with MarkerStyle Circle, Color Transparent and MarkerBorderColor Red to the DataPoint..:
Chart chart = TestChart;
Series s = chart.Series[0];
DataPoint dp = s.Points[5];
dp.MarkerStyle = MarkerStyle.Circle;
dp.MarkerSize = 20; // diameter in pixels
dp.MarkerColor = Color.Transparent;
dp.MarkerBorderColor = Color.Orange;
dp.MarkerBorderWidth = 2;
Update
From you comment I understand that you want is to set the size of the circle not in pixels but in data point values.
This is also possible and not really hard; however it does take some understanding of the Chart rules.
Here we go:
First we define the width and height we want. Note how my numbers are quite different from yours and how they are also not the same for width and height!!
double vx = 1d;
double vy = 20d;
Next we calculate the sizes; they are the difference (!) between zero and our values. This seems complicated, but look at my chart: The y-axis starts in the negative. So simply getting the pixels from one value will be quite offset..
int wx = (int) ( ca.AxisX.ValueToPixelPosition(vx) -
ca.AxisX.ValueToPixelPosition(0)) ;
int wy = (int) ( ca.AxisY.ValueToPixelPosition(vy) -
ca.AxisY.ValueToPixelPosition(0)) ;
With these numbers we can draw the circle:
e.ChartGraphics.Graphics.DrawEllipse(Pens.Red, x - wx / 2, y - wy / 2, wx, wy);
Note how we start the bounding rectangle of the circle offset left and top by half the size!
Now the size will follow the chart size:
I have following issue:
I need to show multiple columns in a chart control (about seven series in one chart area). Now when I have a chart of type "Column" all seven columns get shown side by side. What I want to do is to overlap them. Is this possible?
The following two solutions didn't help me:
Plotting overlapping column or bar chart
Chart control two data set bars overlapping
Thank you.
There is no built-in way to do that.
One workaround is to turn on 3-d, but that will completely change the look of the chart..
The other is to owner-draw the chart.
This is not exactly easy for column and bar types, since the sizeof the columns is not exposed.
Also note that overlapping columns do get somewhat harder to read, esp. when you also have Labels.
Here is an example of a owner-drawing column chart. It has several simplifications:
All Series have the same number of points and are aligned, all y-values are positive and there are no other adornments. They may all be overcome, but probably with some extra efforts..
private void chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
if (!checkBox2.Checked) return;
int sMax = chart1.Series.Count;
ChartArea ca = chart1.ChartAreas[0];
Axis ax = ca.AxisX;
Axis ay = ca.AxisY;
float py0 = (float)ay.ValueToPixelPosition(ay.Minimum);
Rectangle ipr = Rectangle.Round(InnerPlotPositionClientRectangle(chart1, ca));
int pMax = chart1.Series[0].Points.Count;
float shift = (overlap * sMax) / 2f;
float deltaX = 1f * ipr.Width / (pMax+1);
float colWidth = 1f * deltaX / sMax;
for (int j = 0; j < chart1.Series.Count; j++)
for (int i = 0; i < chart1.Series[j].Points.Count; i++)
{
DataPoint dp = chart1.Series[j].Points[i];
float px = (float)ax.ValueToPixelPosition(dp.XValue);
float py = (float)ay.ValueToPixelPosition(dp.YValues[0]);
using (SolidBrush brush = new SolidBrush(chart1.Series[j].Color))
e.ChartGraphics.Graphics.FillRectangle(brush,
px + j * colWidth - deltaX / 2 - overlap * j + shift, py,
colWidth, py0 - py );
}
}
It makes use of a function InnerPlotPositionClientRectangle which you can find here
Here is the result:
Note that to access the Series Colors you need to apply them to the Chart:
chart1.ApplyPaletteColors();
The Column width is set like this:
private void numericUpDown1_ValueChanged(object sender, EventArgs e)
{
for (int j = 0; j < chart1.Series.Count; j++)
chart1.Series[j]["PointWidth"] = numericUpDown1.Value.ToString();
}
At "0" the columns disappear.
Column Series has a CustomProperties named DrawSideBySide, set it to False will result columns drawing overlap.
series1.CustomProperties = "DrawSideBySide=False";
It can also be set in IDE, by going to Properties window, Series Collection Editor, then find CustomProperties, DrawSideBySide.
just wanna ask if How can I draw series of Numbers for every line of grid col and rows ...
can also be by use of label ...
something like this:
http://oi60.tinypic.com/aeblth.jpg
heres my code as for now for Grid of PictureBox:
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
Graphics g = e.Graphics;
int numOfCells = 200;
int cellSize = 5;
Pen p = new Pen(Color.Black);
for (int y = 0; y < numOfCells; ++y)
{
g.DrawLine(p, 0, y * cellSize, numOfCells * cellSize, y * cellSize);
}
for (int x = 0; x < numOfCells; ++x)
{
g.DrawLine(p, x * cellSize, 0, x * cellSize, numOfCells * cellSize);
}
}
Note that numbers in the bottom and right of chart Position and count
are depends on count and position of line of grid in picture .
thanks for the help . more power!
First you have to create a block of X and Y. In the given screen shot the block of Y is about 10 and the block of X is about 2. To create the block of axes you need maximum and minimum value of graph.
NOTE: This is not a complete example. This is just a logic to understand how you can draw graph line.
int iXMin = 0;
int iXMax = 52;
int iYMin = 49890;
int iYMax = 50000;
Then you should create the size of block.
int iXSize = 26;
int iYSize = 12;
Single fXBlock = (iXMax - iXMin) / iXSize;
Single fYBlock = (iYMax - iYMin) / iYSize;
Now, You will require a method to convert axes position into pixel position.
This method is used to get the point of axes.
Single fXPxlSize = (pic.ClientRectangle.Width / (iXMax-iXMin))); //Getting X pixle size between two value.
Single fYPxlSize = (pic.ClientRectangle.Height / (iYMax-iYMin)); //Getting Y pixle size between two value.
Now, You can point out the value in the PictureBox.
Suppose you have first value XValue=0,YValue=50000 then you can get pixel position by using following formula.
int iX = Convert.ToInt32((XValue - XMin) * fXPxlSize);
int iY = Convert.ToInt32((YValue - YMin) * fYPxlSize);
Point p = New Point(iX,iY);
Create two List then add all those points one by one into the list. First is used to draw Cyan Line and Second is used to draw Yellow Line
List<Point> lstPointsC = new List<Point>(); //Declaration should be class level.
List<Point> lstPointsY = new List<Point>(); //Declaration should be class level.
lstPointsC.Add(p);
if (lstPointsY.Count > 0)
lstPointsY.Add(new Point(iX, lstPointsY[lstPointsY.Count].Y));
lstPointsB.Add(p);
Create code for Lines.
Graphics g = pic.CreateGraphics(); //you can also use e.Graphics from pic_paint event.
g.DrawLines(Pens.Cyan, lstPointsC.ToArray());
g.DrawLines(Pens.Yellow, lstPointsY.ToArray());
This method is used to draw custom line graph in your own control or form. But, I would like to suggest you use any third party tool like Crystal Report or Devexpress Charts.
I want to draw the following red polygon:
The problem is if I use somethign like this:
Polygon poly = new Polygon();
poly.StrokeThickness = 2;
poly.Stroke = Brushes.Black;
PointCollection points = new PointCollection();
for (int i = 0; i < this.NumberOfMetrics; i++)
{
points.Add(new Point(MAX_VALUE - this.Metrics[n, i] * Math.Cos(DegreeToRadian(i * (360 / (this.NumberOfMetrics)))), MAX_Y_GUI - this.Metrics[n, i] * Math.Sin(DegreeToRadian(i * (360 / (this.NumberOfMetrics))))));
}
poly.Points = points;
Then the polygon is always "filled" and in the example above the red and green polygon is drawn.
I already tried to add the 4 "inner" points to the PointCollection, but then nothing is drawn. So how can I achieve that?
I tried the solution proposed by David:
for (int n = 0; n < this.NumberOfRevisions; n++)
{
Path path = new Path();
CombinedGeometry geometry = new CombinedGeometry();
geometry.GeometryCombineMode = GeometryCombineMode.Union;
Polygon poly = new Polygon();
PointCollection points = new PointCollection();
for (int i = 0; i < this.NumberOfMetrics; i++)
{
points.Add(new Point(MAX_VALUE - this.Metrics[n, i] * Math.Cos(DegreeToRadian(i * (360 / (this.NumberOfMetrics)))), MAX_Y_GUI - this.Metrics[n, i] * Math.Sin(DegreeToRadian(i * (360 / (this.NumberOfMetrics))))));
}
poly.Points = points;
geometry.Geometry1 = poly.RenderedGeometry;
geometry.Geometry2 = poly.RenderedGeometry;
path.Data = geometry;
polygons.Add(poly);
paths.Add(path);
}
This is just a test but I thougth so I should get the same result as before, but it isn't drawn anything. Is there something wrong with my code?
If you want to have 2 independent shapes, with the possibility of the green one to be transparent as you stated in your comment, the best way to do is to use a combined geometry:
http://msdn.microsoft.com/en-en/library/ms653071%28v=VS.85%29.aspx
with the help of this, you can first create the green geometry, then the red by subtracting the green (or a copy of it) from the red one to create the hole.
So basically:
red shape, PLAIN
green shape on top of it, PLAIN
Subtract green shape or copy of it from red shape >> hole in red shape
this way you get the effect you want
easier done in Xaml, a bit more complicated in C# but still doable.
Edit: set the Combined Geometry as a Path's Data:
Path myPath = new Path();
CombinedGeometry myCombinedGeometry = new CombinedGeometry()
// here you set the combinedGeometry's geometries to create the shape you want
myPath.Data = myCombinedGeometry;
myGrid.Children.Add(myPath);
by the way, the PATH will be the place where you set the Fill / Stroke attribute for the colors, not the inside geometries. (see the examples in xaml in the link above, you basically just have to translate the code into C#)
Edit2:
don't forget to set a Fill on the Path:
for (int n = 0; n < this.NumberOfRevisions; n++)
{
CombinedGeometry geometry = new CombinedGeometry() { GeometryCombineMode = GeometryCombineMode.Union };
PointCollection points = new PointCollection();
for (int i = 0; i < this.NumberOfMetrics; i++)
{
points.Add(new Point(MAX_VALUE - this.Metrics[n, i] * Math.Cos(DegreeToRadian(i * (360 / (this.NumberOfMetrics)))), MAX_Y_GUI - this.Metrics[n, i] * Math.Sin(DegreeToRadian(i * (360 / (this.NumberOfMetrics))))));
}
Polygon poly = new Polygon();
poly.Points = points;
geometry.Geometry1 = poly.RenderedGeometry;
geometry.Geometry2 = poly.RenderedGeometry;
polygons.Add(poly);
paths.Add(path = new Path() { Data = geometry, Fill = Brushes.Red, Stroke = Brushes.Transparent });
}