Help With Creating Web Bar Graphs

R

robert.q.johnson

Help. I am trying to create a web page in C# to display two rows of
data
with bar graphs (an image 1px). I get the max value of the row and use

the following formula to size the height of the image, but the bar
graphs are not sizing correctly. Can anyone provide me with a solution

or any ideas.

rowValue / maxRowValue * maxBarHeight


Here is my current code. The bars are showing a blank image if the
value is the same as the maxvalue which makes since since 60/60 = 0.
The maxHieght is a constant of 120. The other graphs don't size
correctly to the data value 4 value / 60 maxValue * 120 = 8 but the
image is close to the top of the cell. Image width is a constant of
30.

Here is my current code. The bars are showing a blank image if the
value is the same as the maxvalue which makes since since 60/60 = 0.
The maxHieght is a constant of 120. The other graphs don't size
correctly to the data value 4 value / 60 maxValue * 120 = 8 but the
image is close to the top of the cell. Image width is a constant of
30.
private void PaintPlacements(DataTable dtPlacements)
{
DataRow[] rows = dtPlacements.Select();
double maxPlacements = Double.Parse(dtPlacements.Compute
("Max(PLACEMENTS_NBR)", "").ToString());
double maxPerformer = Double.Parse(dtPlacements.Compute
("Max(BEST_PERFORMER_NBR)", "").ToString());
double[] maxValue = {maxPlacements, maxPerformer};
tblPlacements.Rows.Add(AddPlacementGraphs(rows, maxValue,
ScorecardData.ImageWidth));
}

private TableRow AddPlacementGraphs(DataRow[] rows, double[] maxValue,
int barWidth)
{
double graphData;
double graphHeight;
TableRow tr = new TableRow();
foreach(DataRow row in rows)
{
TableCell tc = new TableCell();
graphData = Double.Parse(row["PLACEMENTS_NBR"].ToString());
graphHeight = (graphData / maxValue[0] *
ScorecardData.MaximumHeight);
tc.Text = "<img border=0 src=../images/spacer1.gif" +
" height=" + Math.Round(graphHeight, 0) +
" width=" + barWidth + ">";
tc.BackColor = Color.FromName("Blue");
tc.VerticalAlign = VerticalAlign.Top;
tr.Cells.Add(tc);
tc = null;

tc = new TableCell();
graphData = Double.Parse(row["BEST_PERFORMER_NBR"].ToString());
graphHeight = (graphData / maxValue[1] *
ScorecardData.MaximumHeight);
tc.Text = "<img border=0 src=../images/spacer1.gif" +
" height=" + Math.Round(graphHeight, 0) +
" width=" + barWidth + ">";
tc.BackColor = Color.FromName("CornflowerBlue");
tc.VerticalAlign = VerticalAlign.Top;
tr.Cells.Add(tc);
tc = null;
}
return tr;
 
K

Kevin Spencer

Hi Robert,

It's hard to say for sure, but I can offer a few tips:

1. Cast or convert *all* values to doubles until you're ready to set a pixel
height.

For example, is ScoreCardData.ImageWidth a double? If not, cast it as a
double for all of your calculations. All data should be doubles for the
purpose of doing your calculations.

2. Once you've reached the double value for your pixel height, you need to
determine how you want your rounding to occur (if it is very important that
a 1-pixel difference matters. You have several options:

a. CAST as int - this truncates the floating points, rounding down to
the nearest integer.
b. Use Math.Celing - this rounds UP to the nearest integer.
c. Use Math.Round(double, MidPointRounding) - this gives you
more control over how your Rounding is done.
MidPointRounding.AwayFromZero - casts UP from 5 or greater,
DOWN for 4 or smaller.
d.Use Math.Round(double) - casts UP from 5 or greater, if the
integer part of the number is odd, DOWN if the integer
part of the number is even.

--
HTH,

Kevin Spencer
Microsoft MVP
Ministry of Software Development
http://unclechutney.blogspot.com

If you have little, is that your lot?


Help. I am trying to create a web page in C# to display two rows of
data
with bar graphs (an image 1px). I get the max value of the row and use

the following formula to size the height of the image, but the bar
graphs are not sizing correctly. Can anyone provide me with a solution

or any ideas.

rowValue / maxRowValue * maxBarHeight


Here is my current code. The bars are showing a blank image if the
value is the same as the maxvalue which makes since since 60/60 = 0.
The maxHieght is a constant of 120. The other graphs don't size
correctly to the data value 4 value / 60 maxValue * 120 = 8 but the
image is close to the top of the cell. Image width is a constant of
30.

Here is my current code. The bars are showing a blank image if the
value is the same as the maxvalue which makes since since 60/60 = 0.
The maxHieght is a constant of 120. The other graphs don't size
correctly to the data value 4 value / 60 maxValue * 120 = 8 but the
image is close to the top of the cell. Image width is a constant of
30.
private void PaintPlacements(DataTable dtPlacements)
{
DataRow[] rows = dtPlacements.Select();
double maxPlacements = Double.Parse(dtPlacements.Compute
("Max(PLACEMENTS_NBR)", "").ToString());
double maxPerformer = Double.Parse(dtPlacements.Compute
("Max(BEST_PERFORMER_NBR)", "").ToString());
double[] maxValue = {maxPlacements, maxPerformer};
tblPlacements.Rows.Add(AddPlacementGraphs(rows, maxValue,
ScorecardData.ImageWidth));
}

private TableRow AddPlacementGraphs(DataRow[] rows, double[] maxValue,
int barWidth)
{
double graphData;
double graphHeight;
TableRow tr = new TableRow();
foreach(DataRow row in rows)
{
TableCell tc = new TableCell();
graphData = Double.Parse(row["PLACEMENTS_NBR"].ToString());
graphHeight = (graphData / maxValue[0] *
ScorecardData.MaximumHeight);
tc.Text = "<img border=0 src=../images/spacer1.gif" +
" height=" + Math.Round(graphHeight, 0) +
" width=" + barWidth + ">";
tc.BackColor = Color.FromName("Blue");
tc.VerticalAlign = VerticalAlign.Top;
tr.Cells.Add(tc);
tc = null;

tc = new TableCell();
graphData = Double.Parse(row["BEST_PERFORMER_NBR"].ToString());
graphHeight = (graphData / maxValue[1] *
ScorecardData.MaximumHeight);
tc.Text = "<img border=0 src=../images/spacer1.gif" +
" height=" + Math.Round(graphHeight, 0) +
" width=" + barWidth + ">";
tc.BackColor = Color.FromName("CornflowerBlue");
tc.VerticalAlign = VerticalAlign.Top;
tr.Cells.Add(tc);
tc = null;
}
return tr;
Click to expand...
 
Top