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

Message ListMessage List     Post MessagePost Message

  how should i do to realize the attached graph file
Posted by park ki tae on Oct-15-2016 23:06
| Reply | Monitor
Attachments:

Hello! If someone can help me.
How should i do to realize with the attached graph.
Each chart is sharing the X-axis, but has own Y-axis.
multi.png

  Re: how should i do to realize the attached graph file
Posted by Peter Kwan on Oct-18-2016 00:33
| Reply | Monitor
Attachments:
Hi Park Ki Tae,

There are several methods. May be you can add multiple y-axis to the chart. The axis length and position can be configured by using Axis.setMargin, and each data series can be configured to use one of the y-axis.

I have attached an example for your reference. This example is modified from the original "MultiLine Chart (2)" sample code. I used C++ to create this example.


//===================================


// In this example, we simply use random data for the 3 data series.
RanSeries *r = new RanSeries(129);
DoubleArray data0 = r->getSeries(100, 100, -15, 15);
DoubleArray data1 = r->getSeries(100, 160, -15, 15);
DoubleArray data2 = r->getSeries(100, 220, -15, 15);
DoubleArray timeStamps = r->getDateSeries(100, Chart::chartTime(2014, 1, 1), 86400);

// Create a XYChart object of size 600 x 350 pixels
XYChart *c = new XYChart(600, 350);

// Set the plotarea at (70, 20) and of size 500 x 300 pixels, with transparent background and
// border and light grey (0xcccccc) horizontal grid lines
c->setPlotArea(70, 20, 500, 300, Chart::Transparent, -1, 0x888888);

// Set the major and minor grid line colors
c->getPlotArea()->setGridColor(0x888888, 0xcccccc, 0xcccccc, 0xcccccc);

// Configure the x-axis
c->xAxis()->setLabelStyle("arial.ttf", 12);
c->xAxis()->setColors(Chart::Transparent, Chart::TextColor, Chart::TextColor, 0xaaaaaa);
c->xAxis()->setTickLength(10, 0);
c->xAxis()->setTickDensity(80);

// Add a line layer to the chart with 3-pixel line width
LineLayer *layer = c->addLineLayer();
layer->setLineWidth(3);

// The x-coordinates for the line layer
layer->setXData(timeStamps);

// Set the labels for the y-axis
const char *labels[] = {"AAAA", "BBBB", "CCCC"};
int labelCount = 3;
c->yAxis()->setLabels(StringArray(labels, labelCount));

// Make the y-axis labels into a table
CDMLTable *table = c->yAxis()->makeLabelTable();
table->getStyle()->setBackground(Chart::Transparent, 0x888888);
table->getStyle()->setFontSize(12);
table->getStyle()->setFontStyle("arial.ttf");

// Add grid lines in the center of each label cell
for (double i = 0; i < labelCount; ++i)
c->yAxis()->addMark(i, 0xcccccc);

//
// Add 3 data series to the line layer, each with its own y-axis which
// occupies 1/3 of the plot area height
//
int plotAreaHeight = c->getPlotArea()->getHeight();

Axis *axis = c->addAxis(Chart::Left, 0);
axis->setMargin(plotAreaHeight * (labelCount - 1) / labelCount, plotAreaHeight * 0 / labelCount);
axis->setColors(Chart::Transparent, Chart::Transparent);
layer->addDataSet(data0, 0x5588cc, "Alpha")->setUseYAxis(axis);

axis = c->addAxis(Chart::Left, 0);
axis->setMargin(plotAreaHeight * (labelCount - 2) / labelCount, plotAreaHeight * 1 / labelCount);
axis->setColors(Chart::Transparent, Chart::Transparent);
layer->addDataSet(data1, 0xee9944, "Beta")->setUseYAxis(axis);

axis = c->addAxis(Chart::Left, 0);
axis->setMargin(plotAreaHeight * (labelCount - 3) / labelCount, plotAreaHeight * 2 / labelCount);
axis->setColors(Chart::Transparent, Chart::Transparent);
layer->addDataSet(data2, 0x99bb55, "Gamma")->setUseYAxis(axis);

// Output the chart
c->makeChart("test.png");

//free up resources
delete r;
delete c;

//============================================


Hope this can help.

Regards
Peter Kwan
test.png