ChartDirector Ver 3.0 (C++ Edition)

X Zone Colors




This example demonstates using x zone colors - colors that change at certain x value thresholds.

In this example, x zone colors are used as the color of the line, and as the fill color of the band the surrounds the line.

The x zone color for the line is configured to change from blue to a red dash line color upon reaching a certain x value threshold. The x zone color for the band is configured to change from semi-transparent blue to semi-transparent red upon reaching the same threshold.

X zone colors are created using Layer.xZoneColor. You can use a x zone color in any ChartDirector API that expects a color. For instance, you can use a x zone color as background color, fill color of data sets, line color, etc.

A single x zone color can support one threshold value and change between two colors. The two colors can be any colors, including another x zone colors. You may create x zone colors with multiple thresholds by cascading multiple x zone colors this way.

Source Code Listing

[The following project is available in "cppdemo/xzonecolor".]
#include "chartdir.h" int main(int argc, char *argv[]) { //The data for the chart double data[] = {50, 55, 47, 34, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59, 73, 77, 84, 82, 80, 84, 89}; //The error data representing the error band around the data points double errData[] = {5, 6, 5.1, 6.5, 6.6, 8, 5.4, 5.1, 4.6, 5.0, 5.2, 6.0, 4.9, 5.6, 4.8, 6.2, 7.4, 7.1, 6.5, 9.6, 12.1, 15.3, 18.5, 20.9, 24.1}; //The labels for the chart const char *labels[] = {"Jan 01", "-", "-", "Apr", "-", "-", "Jul", "-", "-", "Oct", "-", "-", "Jan 02", "-", "-", "Apr", "-", "-", "Jul", "-", "-", "Oct", "-", "-", "Jan 03"}; //Create a XYChart object of size 550 x 220 pixels XYChart *c = new XYChart(550, 220); //Set the plot area at (50, 5) and of size 480 x 180 pixels. Enabled both //vertical and horizontal grids by setting their colors to light grey //(0xc0c0c0) c->setPlotArea(50, 5, 480, 180)->setGridColor(0xc0c0c0, 0xc0c0c0); //Add a legend box (50, 5) (top of plot area) using horizontal layout. Use 8 //pts Arial font. Disable bounding box (set border to transparent). LegendBox *legendBox = c->addLegend(50, 5, false, "", 8); legendBox->setBackground(Transparent); //Add keys to the legend box to explain the color zones legendBox->addKey("Historical", 0x9999ff); legendBox->addKey("Forecast", 0xff9966); //Add a title to the y axis. c->yAxis()->setTitle("Energy Consumption"); //Set the labels on the x axis c->xAxis()->setLabels(StringArray(labels, sizeof(labels)/sizeof(*labels))); //Add a line layer to the chart LineLayer *layer = c->addLineLayer(); //Create the color to draw the data line. The line is blue (0x333399) to the //left of x = 18, and become a red (0xd04040) dash line to the right of x = //18. int lineColor = layer->xZoneColor(18, 0x333399, c->dashLineColor(0xd04040, DashLine)); //Add the data line layer->addDataSet(DoubleArray(data, sizeof(data)/sizeof(*data)), lineColor); //Create the color to draw the err zone. The color is semi-transparent blue //(0x809999ff) to the left of x = 18, and become semi-transparent red //(0x80ff9966) to the right of x = 18. int errColor = layer->xZoneColor(18, 0x809999ff, 0x80ff9966); //Add the upper border of the err zone layer->addDataSet(ArrayMath(DoubleArray(data, sizeof(data)/sizeof(*data)) ).add(DoubleArray(errData, sizeof(errData)/sizeof(*errData))), errColor) ; //Add the lower border of the err zone layer->addDataSet(ArrayMath(DoubleArray(data, sizeof(data)/sizeof(*data)) ).sub(DoubleArray(errData, sizeof(errData)/sizeof(*errData))), errColor) ; //Set the default line width to 2 pixels layer->setLineWidth(2); //Color the region between the err zone lines c->addInterLineLayer(layer->getLine(1), layer->getLine(2), errColor); //output the chart c->makeChart("xzonecolor.png"); //free up resources delete c; return 0; }