ChartDirector Ver 3.0 (C++ Edition)

Line with Error Symbols




The chart in the example is created by combining a line layer with a box-whisker layer.

The blue line and the yellow diamond symbols are from the line layer, creating using XYChart.addLineLayer2, Layer.addDataSet, and DataSet.setDataSymbol.

The brown error marks belong to the box-whisker layer, created using XYChart.addBoxWhiskerLayer. The data for the box and median parts of the box- whisker layer are set to empty arrays, so only the maximum and minimum marks are visible.

The maximum and minimum marks in this example is computed by adding/subtracting the error value to/from the data value using a ChartDirector utility class ArrayMath.

Source Code Listing

[The following project is available in "cppdemo/errline".]
#include "chartdir.h" int main(int argc, char *argv[]) { //The data with error information double data[] = {42, 49, 33, 38, 51, 46, 29, 41, 44, 57, 59, 52, 37, 34, 51, 56, 56, 60, 70, 76, 63, 67, 75, 64, 51}; 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.0, 6.6, 7.1, 5.3, 5.5, 7.9, 6.1}; //The labels for the chart const char *labels[] = {"0", "-", "-", "3", "-", "-", "6", "-", "-", "9", "-", "-", "12", "-", "-", "15", "-", "-", "18", "-", "-", "21", "-", "-", "24"}; //Create a XYChart object of size 600 x 300 pixels, with a light grey //(0xc0c0c0) background, a black border, and 1 pixel 3D border effect. XYChart *c = new XYChart(600, 300, 0xc0c0c0, 0, 1); //Set the plotarea at (55, 45) and of size 520 x 205 pixels, with white //background. Turn on both horizontal and vertical grid lines with light //grey color (0xc0c0c0) c->setPlotArea(55, 45, 520, 210, 0xffffff, -1, -1, 0xc0c0c0, 0xc0c0c0); //Add a title box to the chart using 13 pts Arial Bold Italic font. The //title is in CDML and includes embedded images for highlight. The text is //white (0xffffff) on a black background, with a 1 pixel 3D border. c->addTitle( "<*block,valign=absmiddle*><*img=star.png*><*img=star.png*> Molecular " "Temperature Control <*img=star.png*><*img=star.png*><*/*>", "arialbi.ttf", 13, 0xffffff)->setBackground(0x0, -1, 1); //Add a title to the y axis c->yAxis()->setTitle("Temperature"); //Add a title to the x axis using CMDL c->xAxis()->setTitle( "<*block,valign=absmiddle*><*img=clock.png*> Elapsed Time (hour)<*/*>") ; //Set the labels on the x axis c->xAxis()->setLabels(StringArray(labels, sizeof(labels)/sizeof(*labels))); //Set the axes width to 2 pixels c->xAxis()->setWidth(2); c->yAxis()->setWidth(2); //Add a line layer to the chart LineLayer *lineLayer = c->addLineLayer(); //Add a blue (0xff) data set to the line layer, with yellow (0xffff80) //diamond symbols lineLayer->addDataSet(DoubleArray(data, sizeof(data)/sizeof(*data)), 0xff )->setDataSymbol(DiamondSymbol, 12, 0xffff80); //Set the line width to 2 pixels lineLayer->setLineWidth(2); //Add a box whisker layer to the chart. Use only the upper and lower mark of //the box whisker layer to act as error zones. The upper and lower marks are //computed using the ArrayMath object. BoxWhiskerLayer *errLayer = c->addBoxWhiskerLayer(DoubleArray(), DoubleArray(), ArrayMath(DoubleArray(data, sizeof(data)/sizeof(*data)) ).add(DoubleArray(errData, sizeof(errData)/sizeof(*errData))), ArrayMath(DoubleArray(data, sizeof(data)/sizeof(*data))).sub( DoubleArray(errData, sizeof(errData)/sizeof(*errData))), DoubleArray(), Transparent, 0xbb6633); //Set the line width to 2 pixels errLayer->setLineWidth(2); //Set the error zone to occupy half the space between the symbols errLayer->setDataGap(0.5); //Add a custom CDML text at the bottom right of the plot area as the logo c->addText(575, 255, "<*block,valign=absmiddle*><*img=small_molecule.png*> <*block*>" "<*font=timesbi.ttf,size=10,color=804040*>Molecular\nEngineering<*/*>" )->setAlignment(BottomRight); //output the chart c->makeChart("errline.png"); //free up resources delete c; return 0; }