ChartDirector 7.0 (PHP Edition)

Surface Texture


    

This example demonstrates adding images on surface charts using SurfaceChart.setSurfaceTexture.

Surface image provides a very flexible way to mark or highlight the surface. The surface image can be a regular image or an image created by another chart. It can be semi-transparent so it would not block the underlying surface.

Source Code Listing

[File: phpdemo/surfacetexture.php]
<?php
require_once("../lib/phpchartdir.php");

# Use a bubble chart as the surface texture
function addBubbleTexture($sc) {
    # Set the original surface color to be from grey (0xbbbbbb) to light grey (0xeeeeee) based on
    # the z-value. This will become the background color of the surface.
    $sc->colorAxis->setColorGradient(true, array(0xbbbbbb, 0xeeeeee));

    # The data values for the red bubbles
    $dataX0 = array(-5, -2, 1, 7);
    $dataY0 = array(2, 4, -2, -6);
    $dataZ0 = array(20, 60, 50, 85);

    # The data values for the blue bubbles
    $dataX1 = array(5, -5, -3);
    $dataY1 = array(3, -4, 7);
    $dataZ1 = array(100, 85, 95);

    # Create a bubble chart of the same size as the surface XY size
    $c = new XYChart($sc->getPlotRegionWidth(), $sc->getPlotRegionDepth(), Transparent);
    $c->setPlotArea(0, 0, $c->getWidth(), $c->getHeight(), -1, -1, Transparent, Transparent);

    # Synchronize the bubble chart axis scale to the surface axis scale. As the surface axes are
    # visible, we can hide the bubble chart axes.
    $c->yAxis->syncAxis($sc->yAxis);
    $c->xAxis->syncAxis($sc->xAxis);
    $c->xAxis->setColors(Transparent);
    $c->yAxis->setColors(Transparent);

    # Add bubbles with the semi-transparent red color (0x7fff3333). Also add a matching legend entry
    # to the surface chart.
    $c->addScatterLayer($dataX0, $dataY0, "", CircleSymbol, 9, 0x7fff3333, 0x7fff3333
        )->setSymbolScale($dataZ0);
    $sc->getLegend()->addKey("Hot Zone", 0x7fff3333);

    # Add bubbles with the semi-transparent blue color (0x7f3333ff). Also add a matchine legend
    # entry to the surface chart
    $c->addScatterLayer($dataX1, $dataY1, "", CircleSymbol, 9, 0x7f3333ff, 0x7f3333ff
        )->setSymbolScale($dataZ1);
    $sc->getLegend()->addKey("Wet Zone", 0x7f3333ff);

    # Before we generate the bubble chart as texture, we must layout the surface chart first. It is
    # because the bubble chart axis scale depends on the surface chart axis scale.
    $sc->layout();

    # Output the bubble chart and save it as a resource
    $sc->setResource("texture", $c->makeChart3());
    # Use the resource as the texture
    $sc->setSurfaceTexture($sc->patternColor("@/texture"));
}

# Use a polar chart as the surface texture
function addPolarTexture($sc) {
    $sc->setSurfaceAxisGrid(Transparent, Transparent);

    $c = new PolarChart($sc->getPlotRegionWidth(), $sc->getPlotRegionDepth(), Transparent);

    $c->setPlotArea((int)($c->getWidth() / 2), (int)($c->getHeight() / 2), (int)($c->getWidth() / 2)
        );

    # Use alternative light grey/dark grey circular background color
    $c->setPlotAreaBg(0xaf000000, Transparent);

    # Set the grid style to circular grid
    $c->setGridStyle(false);

    # Set angular axis as 0 - 360, with a spoke every 30 units
    $c->angularAxis->setLinearScale(0, 360, 30);
    $c->angularAxis->setLabelStyle("normal", 8, Transparent);
    $c->radialAxis->setLinearScale(0, 10, 2);
    $c->radialAxis->setColors(Transparent, Transparent);

    # Output the polar chart and save it as a resource
    $sc->setResource("texture", $c->makeChart3());
    # Use the resource as the texture
    $sc->setSurfaceTexture($sc->patternColor("@/texture"));
}

function createChart($viewer, $chartIndex)
{
    # The x and y coordinates of the grid
    $dataX = array(-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
    $dataY = array(-10, -9, -8, -7, -6, -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

    # The values at the grid points. In this example, we will compute the values using the formula z
    # = x * y.
    $dataZ = array_fill(0, count($dataX) * count($dataY), 0);
    for($yIndex = 0; $yIndex < count($dataY); ++$yIndex) {
        for($xIndex = 0; $xIndex < count($dataX); ++$xIndex) {
            $dataZ[$yIndex * count($dataX) + $xIndex] = $dataX[$xIndex] * $dataY[$yIndex];
        }
    }

    # Create a SurfaceChart object of size 480 x 450 pixels
    $c = new SurfaceChart(480, 450);

    # Set the center of the plot region at (240, 210), and set width x depth x height to 240 x 240 x
    # 200 pixels
    $c->setPlotRegion(240, 210, 240, 240, 200);

    # Set the elevation and rotation angles to 30 and 15 degrees
    $c->setViewAngle(30, 15);

    # Set the data to use to plot the chart
    $c->setData($dataX, $dataY, $dataZ);

    # Spline interpolate data to a 80 x 80 grid for a smooth surface
    $c->setInterpolation(80, 80);

    # Reserve 50 pixels at the bottom of the z-axis to allow for the XY projection
    $c->zAxis->setMargin(0, 50);

    # Add XY projection
    $c->addXYProjection();

    # Use semi-transparent black (0xc0000000) for x and y major surface grid lines. Use dotted style
    # for x and y minor surface grid lines.
    $majorGridColor = 0xc0000000;
    $minorGridColor = $c->dashLineColor($majorGridColor, DotLine);
    $c->setSurfaceAxisGrid($majorGridColor, $majorGridColor, $minorGridColor, $minorGridColor);

    # Get the surface texture
    if ($chartIndex == 0) {
        # Surface texture is a bubble chart
        $c->addTitle("<*underline=2*>Bubble Chart Texture", "Arial Bold", 16);

        # This texture uses the legend box, so we need to add a legend box to the chart at (490,
        # 200).
        $b = $c->addLegend(490, 200, true, "Arial Bold", 10);
        $b->setBackground(Transparent, Transparent);
        $b->setMaxWidth($c->getWidth() - 490 - 1);

        # Add the texture
        addBubbleTexture($c);
    } else if ($chartIndex == 1) {
        # Surface Texture is a polar chart
        $c->addTitle("<*underline=2*>Polar Chart Texture", "Arial Bold", 16);

        # This texture uses the color axis, so we add the color axis at (420, 75)
        $cAxis = $c->setColorAxis(420, 75, TopLeft, 200, Right);

        # By default, the color axis synchronizes with the z-axis. We cancel the synchronization so
        # that the color axis will auto-scale independently.
        $cAxis->syncAxis(null);

        # Add the texture
        addPolarTexture($c);
    } else {
        # Surface Texture is an image
        $c->addTitle("<*underline=2*>Image Texture", "Arial Bold", 16);

        # Use a DrawArea to load the image
        $d = new DrawArea();

        # Set directory for loading images to current script directory
        # Need when running under Microsoft IIS
        $d->setSearchPath(dirname(__FILE__));

        # Load image and resize it to fit the plot region
        $d->load("maptexture.png");
        $d->resize($c->getPlotRegionWidth(), $c->getPlotRegionDepth());

        # Set the DrawArea as a resource
        $c->setResource("texture", $d);
        # Use the resource as the texture
        $c->setSurfaceTexture($c->patternColor("@/texture"));
    }

    # Set contour lines to semi-transparent white (7fffffff)
    $c->setContourColor(0x7fffffff);

    # Set the x, y and z axis titles using 10 pt Arial Bold font
    $c->xAxis->setTitle("X Title<*br*>Placeholder", "Arial Bold", 10);
    $c->yAxis->setTitle("Y Title<*br*>Placeholder", "Arial Bold", 10);
    $c->zAxis->setTitle("Z Title Placeholder", "Arial Bold", 10);

    # Output the chart
    $viewer->setChart($c, SVG);
}

# This example includes 3 charts
$viewers = array();
for ($i = 0; $i < 3; ++$i) {
    $viewers[$i] = new WebChartViewer("chart$i");
    createChart($viewers[$i], $i);
}
?>

<!DOCTYPE html>
<html>
<head>
    <title>Surface Texture</title>
    <!-- Include ChartDirector Javascript Library to support chart interactions -->
    <script type="text/javascript" src="cdjcv.js"></script>
</head>
<body style="margin:5px 0px 0px 5px">
    <div style="font:bold 18pt verdana;">
        Surface Texture
    </div>
    <hr style="border:solid 1px #000080; background:#000080" />
    <div style="font:10pt verdana; margin-bottom:1.5em">
        <a href="viewsource.php?file=<?=basename(__FILE__)?>">View Chart Source Code</a>
    </div>
    <!-- ****** Here are the chart images ****** -->
    <?php
        for ($i = 0; $i < count($viewers); ++$i) {
            echo $viewers[$i]->renderHTML(), " ";
        }
    ?>
</body>
</html>