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

Message ListMessage List     Post MessagePost Message

  Strange contour behaviour
Posted by Sam on Jun-29-2014 23:29
Attachments:
Hi, I have a contour with 4 points, each point has a value of between 47 and 48, why is the
contour red in between these points?

thanks
chartdirector_contour_problem.png

  Re: Strange contour behaviour
Posted by Peter Kwan on Jun-30-2014 03:47
Hi Sam,

I see that besides the 4 points marked as "X", there are some zero value (deep blue
color) outside of the 4 points. I suspect beside the 4 points, you also have a lot of zero
points. It is because ChartDirector will not draw such a zero boundary unless you really
have zero points along the boundary.

So for the 4 points "X", there are also some zero points very close to it. It means the
"slope" at the 4 points must be very steep. Because the 4 points are at 47 to 48, and
right outside them, there are zero points, so it must be a steep sloping upwards from the
outside towards the center. So it is natural and normal for "hilltop" at the center. Since
the slope is quite steep for your data (within a short distance, your data goes from 0 to
47), it is not surprising the hilltop is at 100.

There is a graphical explanation of why it can be normal that the center is higher than
the data points.

http://www.chartdir.com/forum/download_thread.php?
bn=chartdir_support&pattern=overshoot+interpolation&thread=1316002140#N1316017487

If the region bounded by the 4 points are at 47 to 48, then that region is nearly flat. So
the contour goes from a very steep slope suddenly to flat, and it would not be a very
smooth surface. This corresponds to the "linear interpolation" in the above page.

If you prefer linear interpolation, you may use ContourLayer.setSmoothInterpolation to
set smooth interpolation to false. In this way, the region bounded by the 4 points cannot
undershoot or overshoot the 4 points.

Hope this can help.

Regards
Peter Kwan

  Re: Strange contour behaviour
Posted by Sam on Jul-05-2014 18:59
Thanks for the reply, you are right we have fake points on the boundary set at below
minimum to control the shape. Does chartdirector have this functionality out of the box
(creating the shape based on the extreme boundary points) ?

If not, how could we get around this problem, if we had fake points that gradually
decreased to zero would that stop the red appearing in the middle ?

  Re: Strange contour behaviour
Posted by Peter Kwan on Jul-07-2014 19:01
Hi Sam,

ChartDirector cannot know which points are real and which points are fake, so it can only
shape the surface based on all the data points, and then plotted the surface as a contour
chart.

If you have "fake points" that gradually decrease to zero, it would stop the sharp peak at
the center. Note that "gradually decrease to zero" means the zero points are far away from
your "real points". If the zero points are near to your "real points", then it is a steep drop to
zero.

I am not exactly sure what is the purpose of your "fake points". If they are to create some
boundary, and the colors are not important, you can add another contour layer below your
real contour layer using just the fake points. So the "fake layer" will be everywhere zero and
you can see the boundary at the zero level color. The real contour layer in this case will
show the surface based on your real data only.

Another method is to use fake points with data values more suitable for your data (which
should not be zero).

Hope this can help.

Regards
Peter Kwan

  Re: Strange contour behaviour
Posted by Sam on Jul-12-2014 22:10
Attachments:
Thanks Peter, im trying to achieve chart_dir_1 (attached) I know it has more points and a
lot more is going on but you get the idea. Using multiple layers as per your suggestion I get
chart_dir_2 (attached) which is too rigid, with my fake points I get char_dir_3 essentially
I'm trying to model the shape of the points as best as possible as these are real world
coordinates. Is there any way I can achieve chart_dir_1 using chartdirector or at least as
close as possible? And if yes, can you show me an example in php?

Thanks for your help
chart_dir_1.png
chart_dir_2.PNG
chart_dir_3.PNG

  Re: Strange contour behaviour
Posted by Peter Kwan on Jul-14-2014 22:43
Hi Sam,

I can create a similar chart easily, but I need to know the details to know exactly what you
need.

Is the border of your chart just some "random border" that just need to look nice, or is it
some fixed pre-determined border? For example, something like a "contour line" is an
arbitrary border. It depends on the data and the algorithm that uses to compute it, and
everyone can use different data and different algorithm. On the other hand, the border of
an island is a fixed pre-determined border. It cannot be changed irrespective of what are
the data or the algorithm.

Does the blue color and white color at the border has any significance, or are they just for
"decoration"? For example, do the blue and white colors represent some pre-determined
numbers (such as the blue color must represent 0 and the white color -100)? Or is it that
the exact numbers represented by the blue and white colors not important? For example, if
the data are the altitude, and you know the surrounding altitude must be 0 (because they
are at sea level), then the blue or white color must be 0. On the other hand, if the data are
temperature, and you do not know what are the temperature at the border, but still want
to draw the border as blue color, then the blue color does not really represent any specific
data value.

Regards
Peter Kwan

  Re: Strange contour behaviour
Posted by Sam on Jul-15-2014 05:30
Thanks for the reply peter, the border is just to loosely represent the shape of the points, as
the points are real world coordinates the shape is to help the person put the points into
context, you can see from the first picture the shape is smooth and round whereas my one
using chart director is rigid and square.

The fading of the colours is from the colour of the point outwards to white in a smooth
fashion.

Thanks

  Re: Strange contour behaviour
Posted by Peter Kwan on Jul-16-2014 03:12
Attachments:
Hi Sam,

For your attached chart, the color transitions are smooth everywhere (not just between the
blue and white colors). ChartDirector also supports smooth color gradient (as opposed to
"step colors"). See the "Continuous Contour Coloring" sample code.

I believe in your chart there is no border between the blue and white colors. Instead, the
white color is just part of the gradient just like any other colors. The true border is probably
somewhere far outside, or may be even not inside your chart. For example, it can be a
rectangle outside and surrounding your chart. It could be just as rigid as the border in
ChartDirector, but you cannot see it because it is outside or chart or is also white in color.

To create the similar chart in ChartDirector, you can create a border outside the chart
rectangle, and set it to a z-level somewhat below the minimum z-level of your chart. You
can configure the color gradient so that the underflow color is white, and the minimum color
is also white, and the next color is deep blue. The key is to estimate a reasonable z-level
for the border. I have attached an example for your reference.

Regards
Peter Kwan
example.png
scattercontour.php
<?php
require_once("../lib/phpchartdir.php");

# The (x, y, z) coordinates of the scattered data
$dataX = array(5.5, 4.9, 2.0, 8.9, 6.8, 5.9, 3.6, 6.8, 3.0, 6.4, 3.9);
$dataY = array(3.3, 3.7, 4.0, 9.3, 4.5, 8.4, 2.8, 2.8, 8.0, 5.7, 4.6);
$dataZ = array(7.5, 9.4, 6.2, 9.6, 13.6, 13.9, 6.2, 6.9, 7.5, 8.7, 9.5);

#create a dummy chart to auto-scale the axis using the z-data, so we can obtain 
#a reasonable  minimum z value and the tick increment for the color axis.
$c = new XYChart(1, 1);
$c->setPlotArea(0, 0, 10, 320);
$c->addLineLayer($dataZ);
$c->yAxis->setAutoScale(0, 0, 0);
$c->layoutAxes();
$ticks = $c->yAxis->getTicks();

$minZScale = $ticks[0];
$maxZScale = $ticks[count($ticks) - 1];
$zInc = $ticks[1] - $ticks[0];

#the border is somewhat below the minimum data value
$borderZ = $minZScale - $zInc * 2;

#create the border outside the chart
for ($i = -1; $i < 11; ++$i)
{
	$dataX[] = -1;
	$dataY[] = $i;
	$dataZ[] = $borderZ;
	
	$dataX[] = 11;
	$dataY[] = $i + 1;
	$dataZ[] = $borderZ;
	
	$dataY[] = -1;
	$dataX[] = $i + 1;
	$dataZ[] = $borderZ;
	
	$dataY[] = 11;
	$dataX[] = $i;
	$dataZ[] = $borderZ;
}
	
# Create a XYChart object of size 450 x 540 pixels
$c = new XYChart(550, 540);

# Add a title to the chart using 15 points Arial Italic font
#$c->addTitle("      Contour Chart with Scattered Data", "ariali.ttf", 15);

# Set the plotarea at (65, 40) and of size 360 x 360 pixels. Use semi-transparent
# black (c0000000) for both horizontal and vertical grid lines
$c->setPlotArea(65, 40, 360, 360, -1, -1, -1, 0xc0000000, -1);
$c->setClipping();

# Set x-axis and y-axis title using 12 points Arial Bold Italic font
$c->xAxis->setTitle("X-Axis Title Place Holder", "arialbi.ttf", 10);
$c->yAxis->setTitle("Y-Axis Title Place Holder", "arialbi.ttf", 10);

# Set x-axis and y-axis labels to use Arial Bold font
$c->xAxis->setLabelStyle("arialbd.ttf");
$c->yAxis->setLabelStyle("arialbd.ttf");

# When x-axis and y-axis color to transparent
$c->xAxis->setColors(Transparent);
$c->yAxis->setColors(Transparent);
$c->xAxis->setLinearScale(0, 10, 1);
$c->yAxis->setLinearScale(0, 10, 1);

# Add a scatter layer to the chart to show the position of the data points
$c->addScatterLayer($dataX, $dataY, "", Cross2Shape(0.2), 7, 0x000000);

# Add a contour layer using the given data
$layer = $c->addContourLayer($dataX, $dataY, $dataZ);

# Set the contour color to transparent
$layer->setContourColor(Transparent);
#$layer->setSmoothInterpolation(false);

# Move the grid lines in front of the contour layer
$plotAreaObj = $c->getPlotArea();
$plotAreaObj->moveGridBefore($layer);

# Add a color axis (the legend) in which the top center is anchored at (245, 455).
# Set the length to 330 pixels and the labels on the top side.
$cAxis = $layer->setColorAxis(450, 40, TopLeft, 330, Right);

# Add a bounding box to the color axis using the default line color as border.
$cAxis->setBoundingBox(Transparent, LineColor);

# Set color axis labels to use Arial Bold font
$cAxis->setLabelStyle("arialbd.ttf");

# The color axis scale
$cAxis->setLinearScale($minZScale - $zInc, $maxZScale, $zInc);

# The color gradient includes the white color as the minimum color.
$cAxis->setColorGradient(true, array(0xffffff, 0xC0, 0x60FF, 0xC0FF, 0x00FFFF, 0x30FFC0, 
			0x60FF90, 0x90FF60, 0xC0FF30, 0xFFFF00, 0xFFCC00, 0xFF8800, 0xFF5500, 0xFF0000));

# Output the chart
header("Content-type: image/png");
print($c->makeChart2(PNG));
?>