C# winform advance chart

Question

I want to make a chart control like this in C# winform

But I can't find any component which can add multiple XY values like this. How can I make this stuff ? I've tried using Dev XtraChart. But cannot add multiple xy values.

Answer 1

If you can use third party charting libraries, may be you can consider ChartDirector. It allows the axis labels to be treated as a table, and you can insert extra rows and columns to the table.

The chart above is modified from one of the sample code included in the ChartDirector distribution. The original sample code is at http://www.advsofteng.com/doc/cdnet.htm#datatable.htm. The modified code is as follows.

// The data for the line chart
double[] data0 = { 42, 49, 33, 38, 64, 56, 29, 41, 44, 57, 59, 42 };
double[] data1 = { 65, 75, 47, 34, 42, 49, 73, 62, 90, 69, 66, 78 };
double[] data2 = { 36, 28, 25, 28, 38, 20, 22, 30, 25, 33, 30, 24 };

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

// Tentatively set the plotarea at (50, 10) and of (chart_width - 100) x (chart_height - 80)
// pixels in size. Set both horizontal and vertical grid lines to dotted semi-transprent black
// (aa000000).
PlotArea plotArea = c.setPlotArea(50, 10, c.getWidth() - 100, c.getHeight() - 80,
    -1, -1, -1, c.dashLineColor(unchecked((int)0xaa000000), Chart.DotLine), -1);

// y-axis labels
string[] yLabels = { "50", "100", "150", "50", "100", "150", "50", "100", "150", "50", "100", "150" };
c.yAxis().setLabels(yLabels);

// Convert the y-axis labels to a table
CDMLTable yTable = c.yAxis().makeLabelTable();
yTable.getStyle().setMargin(5, 5, 0, 0);

// Right alignment for the first and only column in the table
yTable.getColStyle(0).setAlignment(Chart.Right);

// Insert one more column
yTable.insertCol(0);
for (int i = 0; i < 4; ++i)
    yTable.setCell(0, i * 3, 1, 3, "" + (i + 2) + "(A)");

// x-axis labels
string[] xLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };
c.xAxis().setLabels(xLabels);

// Convert the x-axis labels to a table
CDMLTable xTable = c.xAxis().makeLabelTable();
xTable.getStyle().setMargin2(0, 0, 3, 3);

// Set the colors of the first and only row, and also that of the plot area background
int[] colors = { 0xffdddd, 0xddffdd, 0xddddff };
for (int i = 0; i < 3; ++i)
{
    for (int j = i * 4; j < (i + 1) * 4; ++j)
        xTable.getCell(j, 0).setBackground(colors[i], 0x000000);
    c.xAxis().addZone(i * 4 - 0.5, (i + 1) * 4 - 0.5, colors[i]);
}

// Add one more row
xTable.appendRow();
xTable.setCell(0, 1, 3, 1, "Q1");
xTable.setCell(3, 1, 3, 1, "Q2").setBackground(0xff99ff, 0x000000);
xTable.setCell(6, 1, 3, 1, "Q3");
xTable.setCell(9, 1, 3, 1, "Q4").setBackground(0xff9900, 0x000000);

// Add another row
xTable.appendRow();
xTable.setCell(0, 2, 4, 1, "Alpha").setBackground(0xffff00, 0x000000);
xTable.setCell(4, 2, 6, 1, "Beta").setBackground(0x99cc99, 0x000000);
xTable.setCell(10, 2, 2, 1, "Gamma").setBackground(0x99ccff, 0x000000);

// Insert a column on the left for the row names
xTable.insertCol(0).setMargin2(5, 5, 0, 0);
xTable.setText(0, 0, "Name 1");
xTable.setText(0, 1, "Name 2");
xTable.setText(0, 2, "Name 3");

// Set the width of the row names column to the same width as the y-axis table
xTable.getColStyle(0).setWidth(yTable.getWidth());

// Add a line layer to the chart
LineLayer layer = c.addLineLayer2();
layer.setUseYAxis2();
c.yAxis2().setLinearScale(0, 100, 10);
c.yAxis2().setColors(Chart.Transparent, Chart.Transparent);

// Set the line width to 3 pixels
layer.setLineWidth(3);

// Add the three data sets to the line layer, using circles, diamands and X shapes as symbols
layer.addDataSet(data0, 0xff0000, "Quantum Computer").setDataSymbol(Chart.CircleSymbol, 9);
layer.addDataSet(data1, 0x00ff00, "Atom Synthesizer").setDataSymbol(Chart.DiamondSymbol, 11);
layer.addDataSet(data2, 0xff6600, "Proton Cannon").setDataSymbol(Chart.Cross2Shape(), 11);

// Adjust the plot area size, such that the bounding box (inclusive of axes) is 2 pixels from
// the left, right and bottom edge, and is just under the legend box.
c.packPlotArea(2, 10, c.getWidth() - 3, c.getHeight() - 3);

// Output the chart
viewer.Chart = c;

//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", "title='[{dataSetName}] {xLabel}: {value}'");