//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// Sample data for the Box-Whisker chart. Represents the minimum, 1st quartile, medium,
// 3rd quartile and maximum values of some quantities
double[] Q0Data = { 40, 45, 40, 30, 20, 50, 25, 44 };
double[] Q1Data = { 55, 60, 50, 40, 38, 60, 51, 60 };
double[] Q2Data = { 62, 70, 60, 50, 48, 70, 62, 70 };
double[] Q3Data = { 70, 80, 65, 60, 53, 78, 69, 76 };
double[] Q4Data = { 80, 90, 75, 70, 60, 85, 80, 84 };
// The labels for the chart
string[] labels = { "A", "B", "C", "D", "E", "F", "G", "H" };
// Create a XYChart object of size 450 x 400 pixels
XYChart c = new XYChart(450, 400);
// Set the plotarea at (50, 30) and of size 380 x 340 pixels, with transparent
// background and border and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(50, 30, 380, 340, Chart.Transparent, -1, Chart.Transparent, 0xcccccc);
// Add a title box using grey (0x555555) 18pt Arial font
ChartDirector.TextBox title = c.addTitle(" Pattern Recognition Accuracy", "Arial",
18, 0x555555);
// Set the x and y axis stems to transparent and the label font to 12pt Arial
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
c.xAxis().setLabelStyle("Arial", 12);
c.yAxis().setLabelStyle("Arial", 12);
// Set the labels on the x axis
c.xAxis().setLabels(labels);
// For the automatic y-axis labels, set the minimum spacing to 30 pixels.
c.yAxis().setTickDensity(30);
// Add a box whisker layer using light blue (0x99ccee) for the fill color and blue
// (0x6688aa) for the whisker color. Set line width to 2 pixels. Use rounded corners and
// bar lighting effect.
BoxWhiskerLayer b = c.addBoxWhiskerLayer(Q3Data, Q1Data, Q4Data, Q0Data, Q2Data,
0x99ccee, 0x6688aa);
b.setLineWidth(2);
b.setRoundedCorners();
b.setBorderColor(Chart.Transparent, Chart.barLighting());
// Adjust the plot area to fit under the title with 10-pixel margin on the other three
// sides.
c.packPlotArea(10, title.getHeight(), c.getWidth() - 10, c.getHeight() - 10);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='[{xLabel}] min/med/max = {min}/{med}/{max}\nInter-quartile range: " +
"{bottom} to {top}'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// In this example, the data points are unevenly spaced on the x-axis
double[] dataY = { 4.7, 4.7, 6.6, 2.2, 4.7, 4.0, 4.0, 5.1, 4.5, 4.5, 6.8, 4.5, 4, 2.1, 3, 2.5,
2.5, 3.1 };
DateTime[] dataX = { new DateTime(1999, 7, 1), new DateTime(2000, 1, 1), new DateTime(2000, 2,
1), new DateTime(2000, 4, 1), new DateTime(2000, 5, 8), new DateTime(2000, 7, 5),
new DateTime(2001, 3, 5), new DateTime(2001, 4, 7), new DateTime(2001, 5, 9),
new DateTime(2002, 2, 4), new DateTime(2002, 4, 4), new DateTime(2002, 5, 8),
new DateTime(2002, 7, 7), new DateTime(2002, 8, 30), new DateTime(2003, 1, 2),
new DateTime(2003, 2, 16), new DateTime(2003, 11, 6), new DateTime(2004, 1, 4) };
// Data points are assigned different symbols based on point type
double[] pointType = { 0, 1, 0, 1, 2, 1, 0, 0, 1, 1, 2, 2, 1, 0, 2, 1, 2, 0 };
// Create a XYChart object of size 480 x 320 pixels. Use a vertical gradient color from pale
// blue (e8f0f8) to sky blue (aaccff) spanning half the chart height as background. Set
// border to blue (88aaee). Use rounded corners. Enable soft drop shadow.
XYChart c = new XYChart(480, 320);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, 0xe8f0f8, 0xaaccff),
0x88aaee);
c.setRoundedFrame();
c.setDropShadow();
// Add a title to the chart using 15 points Arial Italic font. Set top/bottom margins to 12
// pixels.
ChartDirector.TextBox title = c.addTitle("Multi-Symbol Line Chart Demo", "Arial Italic", 15);
title.setMargin2(0, 0, 12, 12);
// Tentatively set the plotarea to 50 pixels from the left edge to allow for the y-axis, and
// to just under the title. Set the width to 65 pixels less than the chart width, and the
// height to reserve 90 pixels at the bottom for the x-axis and the legend box. Use pale blue
// (e8f0f8) background, transparent border, and grey (888888) dotted horizontal and vertical
// grid lines.
c.setPlotArea(50, title.getHeight(), c.getWidth() - 65, c.getHeight() - title.getHeight() -
90, 0xe8f0f8, -1, Chart.Transparent, c.dashLineColor(0x888888, Chart.DotLine), -1);
// Add a legend box where the bottom-center is anchored to the 12 pixels above the
// bottom-center of the chart. Use horizontal layout and 8 points Arial font.
LegendBox legendBox = c.addLegend(c.getWidth() / 2, c.getHeight() - 12, false, "Arial Bold",
8);
legendBox.setAlignment(Chart.BottomCenter);
// Set the legend box background and border to pale blue (e8f0f8) and bluish grey (445566)
legendBox.setBackground(0xe8f0f8, 0x445566);
// Use rounded corners of 5 pixel radius for the legend box
legendBox.setRoundedCorners(5);
// Set the y axis label format to display a percentage sign
c.yAxis().setLabelFormat("{value}%");
// Set y-axis title to use 10 points Arial Bold Italic font
c.yAxis().setTitle("Axis Title Placeholder", "Arial Bold Italic", 10);
// Set axis labels to use Arial Bold font
c.yAxis().setLabelStyle("Arial Bold");
c.xAxis().setLabelStyle("Arial Bold");
// We add the different data symbols using scatter layers. The scatter layers are added
// before the line layer to make sure the data symbols stay on top of the line layer.
// We select the points with pointType = 0 (the non-selected points will be set to NoValue),
// and use yellow (ffff00) 15 pixels high 5 pointed star shape symbols for the points. (This
// example uses both x and y coordinates. For charts that have no x explicitly coordinates,
// use an empty array as dataX.)
c.addScatterLayer(Chart.CTime(dataX), new ArrayMath(dataY).selectEQZ(pointType, Chart.NoValue
).result(), "Point Type 0", Chart.StarShape(5), 15, 0xffff00);
// Similar to above, we select the points with pointType - 1 = 0 and use green (ff00) 13
// pixels high six-sided polygon as symbols.
c.addScatterLayer(Chart.CTime(dataX), new ArrayMath(dataY).selectEQZ(new ArrayMath(pointType
).sub(1).result(), Chart.NoValue).result(), "Point Type 1", Chart.PolygonShape(6), 13,
0x00ff00);
// Similar to above, we select the points with pointType - 2 = 0 and use red (ff0000) 13
// pixels high X shape as symbols.
c.addScatterLayer(Chart.CTime(dataX), new ArrayMath(dataY).selectEQZ(new ArrayMath(pointType
).sub(2).result(), Chart.NoValue).result(), "Point Type 2", Chart.Cross2Shape(), 13,
0xff0000);
// Finally, add a blue (0000ff) line layer with line width of 2 pixels
LineLayer layer = c.addLineLayer(dataY, 0x0000ff);
layer.setXData(Chart.CTime(dataX));
layer.setLineWidth(2);
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 10 pixels
// from the left edge, just below the title, 25 pixels from the right edge, and 8 pixels
// above the legend box.
c.packPlotArea(10, title.getHeight(), c.getWidth() - 25, c.layoutLegend().getTopY() - 8);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='{x|mmm dd, yyyy}: {value}%'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the chart
double[] data = { 40, 15, 7, 5, 2 };
// The labels for the chart
string[] labels = { "Hard Disk", "PCB", "Printer", "CDROM", "Keyboard" };
// In the pareto chart, the line data are just the accumulation of the raw data, scaled to a
// range of 0 - 100%
ArrayMath lineData = new ArrayMath(data);
lineData.acc();
double scaleFactor = lineData.max() / 100;
if (scaleFactor == 0)
{
// Avoid division by zero error for zero data
scaleFactor = 1;
}
lineData.div2(scaleFactor);
// Create a XYChart object of size 480 x 300 pixels. Set background color to brushed silver,
// with a grey (bbbbbb) border and 2 pixel 3D raised effect. Use rounded corners. Enable soft
// drop shadow.
XYChart c = new XYChart(400, 300, Chart.brushedSilverColor(), 0xbbbbbb, 2);
c.setRoundedFrame();
c.setDropShadow();
// Add a title to the chart using 15 points Arial Italic. Set top/bottom margins to 12
// pixels.
ChartDirector.TextBox title = c.addTitle("Pareto Chart Demonstration", "Arial Italic", 15);
title.setMargin2(0, 0, 12, 12);
// Tentatively set the plotarea at (50, 40). Set the width to 100 pixels less than the chart
// width, and the height to 80 pixels less than the chart height. Use pale grey (f4f4f4)
// background, transparent border, and dark grey (444444) dotted grid lines.
c.setPlotArea(50, 40, c.getWidth() - 100, c.getHeight() - 80, 0xf4f4f4, -1,
Chart.Transparent, c.dashLineColor(0x444444, Chart.DotLine));
// Add a line layer for the pareto line
LineLayer lineLayer = c.addLineLayer2();
// Add the pareto line using deep blue (0000ff) as the color, with circle symbols
lineLayer.addDataSet(lineData.result(), 0x0000ff).setDataSymbol(Chart.CircleShape, 9,
0x0000ff, 0x0000ff);
// Set the line width to 2 pixel
lineLayer.setLineWidth(2);
// Bind the line layer to the secondary (right) y-axis.
lineLayer.setUseYAxis2();
// Tool tip for the line layer
lineLayer.setHTMLImageMap("", "", "title='Top {={x}+1} items: {value|2}%'");
// Add a multi-color bar layer using the given data.
BarLayer barLayer = c.addBarLayer3(data);
// Set soft lighting for the bars with light direction from the right
barLayer.setBorderColor(Chart.Transparent, Chart.softLighting(Chart.Right));
// Tool tip for the bar layer
barLayer.setHTMLImageMap("", "", "title='{xLabel}: {value} pieces'");
// Set the labels on the x axis.
c.xAxis().setLabels(labels);
// Set the secondary (right) y-axis scale as 0 - 100 with a tick every 20 units
c.yAxis2().setLinearScale(0, 100, 20);
// Set the format of the secondary (right) y-axis label to include a percentage sign
c.yAxis2().setLabelFormat("{value}%");
// Set the relationship between the two y-axes, which only differ by a scaling factor
c.yAxis().syncAxis(c.yAxis2(), scaleFactor);
// Set the format of the primary y-axis label foramt to show no decimal point
c.yAxis().setLabelFormat("{value|0}");
// Add a title to the primary y-axis
c.yAxis().setTitle("Frequency");
// Set all axes to transparent
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
c.yAxis2().setColors(Chart.Transparent);
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 10 pixels
// from the left edge, just below the title, 10 pixels from the right edge, and 20 pixels
// from the bottom edge.
c.packPlotArea(10, title.getHeight(), c.getWidth() - 10, c.getHeight() - 20);
// Output the chart
viewer.Image = c.makeWebImage(Chart.JPG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The data for the bar chart
double[] data = { 1350, 1600, 1950, 2300, 2700 };
// The labels for the bar chart
string[] labels = { "2001", "2002", "2003", "2004", "2005" };
// The colors for the bars
int[] colors = { 0xcc0000, 0x66aaee, 0xeebb22, 0xcccccc, 0xcc88ff };
// Create a PieChart object of size 600 x 380 pixels.
XYChart c = new XYChart(600, 380);
// Use the white on black palette, which means the default text and line colors are white
c.setColors(Chart.whiteOnBlackPalette);
// Use a vertical gradient color from blue (0000cc) to deep blue (000044) as background. Use
// rounded corners of 30 pixels radius for the top-left and bottom-right corners.
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight(), 0x0000cc, 0x000044));
c.setRoundedFrame(0xffffff, 30, 0, 30, 0);
// Add a title using 18pt Times New Roman Bold Italic font. Add 6 pixels top and bottom
// margins to the title.
ChartDirector.TextBox title = c.addTitle("Annual Revenue for Star Tech",
"Times New Roman Bold Italic", 18);
title.setMargin2(0, 0, 6, 6);
// Add a separator line in white color just under the title
c.addLine(20, title.getHeight(), c.getWidth() - 21, title.getHeight(), 0xffffff);
// Tentatively set the plotarea at (70, 80) and of 480 x 240 pixels in size. Use transparent
// border and white grid lines
c.setPlotArea(70, 80, 480, 240, -1, -1, Chart.Transparent, 0xffffff);
// Swap the axis so that the bars are drawn horizontally
c.swapXY();
// Add a multi-color bar chart layer using the supplied data. Use bar gradient lighting with
// the light intensity from 0.75 to 2.0
c.addBarLayer3(data, colors).setBorderColor(Chart.Transparent, Chart.barLighting(0.75, 2.0));
// Set the labels on the x axis.
c.xAxis().setLabels(labels);
// Show the same scale on the left and right y-axes
c.syncYAxis();
// Set the bottom y-axis title using 10pt Arial Bold font
c.yAxis().setTitle("USD (millions)", "Arial Bold", 10);
// Set y-axes to transparent
c.yAxis().setColors(Chart.Transparent);
c.yAxis2().setColors(Chart.Transparent);
// Disable ticks on the x-axis by setting the tick color to transparent
c.xAxis().setTickColor(Chart.Transparent);
// Set the label styles of all axes to 8pt Arial Bold font
c.xAxis().setLabelStyle("Arial Bold", 8);
c.yAxis().setLabelStyle("Arial Bold", 8);
c.yAxis2().setLabelStyle("Arial Bold", 8);
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 30 pixels
// from the left edge, 25 pixels below the title, 50 pixels from the right edge, and 25
// pixels from the bottom edge.
c.packPlotArea(30, title.getHeight() + 25, c.getWidth() - 50, c.getHeight() - 25);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "", "title='Year {xLabel}: US$ {value}M'");
}
//Main code for creating chart.
//Note: the argument img is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, string img)
{
// The data for the pie chart
double[] data = { 25, 18, 15, 12, 8, 30, 35 };
// The labels for the pie chart
string[] labels = { "Labor", "Licenses", "Taxes", "Legal", "Insurance",
"Facilities", "Production" };
// Create a PieChart object of size 600 x 320 pixels. Set background
// color to brushed silver, with a 2 pixel 3D border. Use rounded corners
// of 20 pixels radius.
PieChart c = new PieChart(600, 320, Chart.brushedSilverColor(),
Chart.Transparent, 2);
c.setRoundedFrame(0xffffff, 20);
// Add a title using 18 pts Times New Roman Bold Italic font. #Set
// top/bottom margins to 8 pixels.
ChartDirector.TextBox title = c.addTitle("Donut Chart Demonstration",
"Times New Roman Bold Italic", 18);
title.setMargin2(0, 0, 8, 8);
// Add a 2 pixels wide separator line just under the title
c.addLine(10, title.getHeight(), c.getWidth() - 11, title.getHeight(),
Chart.LineColor, 2);
// Set donut center at (160, 175), and outer/inner radii as 110/55 pixels
c.setDonutSize(160, 175, 110, 55);
// Set the pie data and the pie labels
c.setData(data, labels);
// Use ring shading effect for the sectors
c.setSectorStyle(Chart.RingShading);
// Use the side label layout method, with the labels positioned 16 pixels
// from the donut bounding box
c.setLabelLayout(Chart.SideLayout, 16);
// Show only the sector number as the sector label
c.setLabelFormat("{={sector}+1}");
// Set the sector label style to Arial Bold 10pt, with a dark grey
// (444444) border
c.setLabelStyle("Arial Bold", 10).setBackground(Chart.Transparent,
0x444444);
// Add a legend box, with the center of the left side anchored at (330,
// 175), and using 10 pts Arial Bold Italic font
LegendBox b = c.addLegend(330, 175, true, "Arial Bold Italic", 10);
b.setAlignment(Chart.Left);
// Set the legend box border to dark grey (444444), and with rounded
// conerns
b.setBackground(Chart.Transparent, 0x444444);
b.setRoundedCorners();
// Set the legend box margin to 16 pixels, and the extra line spacing
// between the legend entries as 5 pixels
b.setMargin(16);
b.setKeySpacing(0, 5);
// Set the legend text to show the sector number, followed by a 120
// pixels wide block showing the sector label, and a 40 pixels wide block
// showing the percentage
b.setText(
"<*block,valign=top*>{={sector}+1}.<*advanceTo=22*>" +
"<*block,width=120*>{label}<*/*><*block,width=40,halign=right*>" +
"{percent}<*/*>%");
// Output the chart
viewer.Image = c.makeImage();
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{label}: US${value}K ({percent}%)'");
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The data for the bar chart
double[] data0 = { 100, 125, 245, 147, 67 };
double[] data1 = { 85, 156, 179, 211, 123 };
double[] data2 = { 97, 87, 56, 267, 157 };
// The labels for the bar chart
string[] labels = { "Mon", "Tue", "Wed", "Thu", "Fri" };
// Create a XYChart object of size 500 x 320 pixels. Use a vertical gradient color from
// pale blue (e8f0f8) to sky blue (aaccff) spanning half the chart height as background.
// Set border to blue (88aaee). Use rounded corners. Enable soft drop shadow.
XYChart c = new XYChart(500, 320);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, 0xe8f0f8, 0xaaccff),
0x88aaee);
c.setRoundedFrame();
c.setDropShadow();
// Add a title to the chart using 15 points Arial Italic. Set top/bottom margins to 15
// pixels.
ChartDirector.TextBox title = c.addTitle("Weekly Product Sales", "Arial Italic", 15);
title.setMargin2(0, 0, 15, 15);
// Tentatively set the plotarea to 50 pixels from the left edge, and to just under the
// title. Set the width to 60% of the chart width, and the height to 50 pixels from the
// bottom edge. Use pale blue (e8f0f8) background, transparent border, and grey (aaaaaa)
// grid lines.
c.setPlotArea(50, title.getHeight(), c.getWidth() * 6 / 10, c.getHeight() -
title.getHeight() - 50, 0xe8f0f8, -1, Chart.Transparent, 0xaaaaaa);
// Add a legend box where the top-right corner is anchored at 10 pixels from the right
// edge, and just under the title. Use vertical layout and 8 points Arial font.
LegendBox legendBox = c.addLegend(c.getWidth() - 10, title.getHeight(), true, "Arial", 8
);
legendBox.setAlignment(Chart.TopRight);
// Set the legend box background and border to transparent
legendBox.setBackground(Chart.Transparent, Chart.Transparent);
// Set the legend box icon size to 16 x 32 pixels to match with custom icon size
legendBox.setKeySize(16, 32);
// Set axes to transparent
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
// Set the labels on the x axis
c.xAxis().setLabels(labels);
// Add a percentage bar layer
BarLayer layer = c.addBarLayer2(Chart.Percentage);
// Add the three data sets to the bar layer, using icons images with labels as data set
// names
layer.addDataSet(data0, 0x66aaee,
"<*block,valign=absmiddle*><*img=service.png*> Service<*/*>");
layer.addDataSet(data1, 0xeebb22,
"<*block,valign=absmiddle*><*img=software.png*> Software<*/*>");
layer.addDataSet(data2, 0xcc88ff,
"<*block,valign=absmiddle*><*img=computer.png*> Hardware<*/*>");
// Use soft lighting effect with light direction from top
layer.setBorderColor(Chart.Transparent, Chart.softLighting(Chart.Top));
// Enable data label at the middle of the the bar
layer.setDataLabelStyle().setAlignment(Chart.Center);
// For a vertical stacked chart with positive data only, the last data set is always on
// top. However, in a vertical legend box, the last data set is at the bottom. This can
// be reversed by using the setLegend method.
layer.setLegend(Chart.ReverseLegend);
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 15
// pixels from the left edge, just below the title, 10 pixels to the right of the legend
// box, and 15 pixels from the bottom edge.
c.packPlotArea(15, title.getHeight(), c.layoutLegend().getLeftX() - 10, c.getHeight() -
15);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{dataSetName} revenue on {xLabel}: US${value}K ({percent}%)'");
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The data for the pie chart
double[] data = { 20, 10, 15, 12 };
// The labels for the pie chart
string[] labels = { "Labor", "Licenses", "Facilities", "Production" };
// The colors to use for the sectors
int[] colors = { 0x66aaee, 0xeebb22, 0xcccccc, 0xcc88ff };
// Create a PieChart object of size 600 x 320 pixels. Use a vertical gradient color from
// deep blue (000066) to blue (0000cc) as background. Use rounded corners of 20 pixels
// radius.
PieChart c = new PieChart(600, 320);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight(), 0x000066, 0x0000cc));
c.setRoundedFrame(0xffffff, 20);
// Add a title using 18pt Times New Roman Bold Italic font in white (ffffff) color. Set
// top/bottom margins to 8 pixels.
ChartDirector.TextBox title = c.addTitle("Donut Chart Demonstration",
"Times New Roman Bold Italic", 18, 0xffffff);
title.setMargin2(0, 0, 8, 8);
// Add a separator line in white color just under the title
c.addLine(10, title.getHeight(), c.getWidth() - 11, title.getHeight(), 0xffffff);
// Set donut center at (300, 170), and outer/inner radii as 120/60 pixels
c.setDonutSize(300, 170, 120, 60);
// Draw the pie in 3D with a pie thickness of 25 pixels
c.set3D(25);
// Set the pie data and the pie labels
c.setData(data, labels);
// Set the sector colors
c.setColors2(Chart.DataColor, colors);
// Use local gradient shading for the sectors
c.setSectorStyle(Chart.LocalGradientShading);
// Set sector border color to same as fill color. Set label join line color to white
// (ffffff)
c.setLineColor(Chart.SameAsMainColor, 0xffffff);
// Use the side label layout method, with the labels positioned 16 pixels from the donut
// bounding box
c.setLabelLayout(Chart.SideLayout, 16);
// Set the sector label format. The label consists of two lines. The first line is the
// sector name in Times Bold Italic font and is underlined. The second line shows the
// data value and percentage.
c.setLabelFormat(
"<*block,halign=left*><*font=Times New Roman Bold Italic,size=12,underline=1*>" +
"{label}<*/font*><*br*>US$ {value}K ({percent}%)");
// Set the label box background color the same as the sector color. Use soft lighting
// effect with light direction from right. Use rounded corners.
ChartDirector.TextBox t = c.setLabelStyle();
t.setBackground(Chart.SameAsMainColor, Chart.Transparent, Chart.softLighting(Chart.Right
));
t.setRoundedCorners();
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{label}: US${value}K ({percent}%)'");
}
//Main code for creating chart.
//Note: the argument img is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, string img)
{
// 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 };
string[] labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct", "Nov", "Dec" };
// Create a XYChart object of size 600 x 400 pixels
XYChart c = new XYChart(600, 400);
// Add a title to the chart using 18 pts Times Bold Italic font
ChartDirector.TextBox title = c.addTitle("Product Line Global Revenue",
"Times New Roman Bold Italic", 18);
// Tentatively set the plotarea at (50, 55) and of (chart_width - 100) x
// (chart_height - 120) pixels in size. Use a vertical gradient color
// from sky blue (aaccff) t0 light blue (f9f9ff) as background. Set both
// horizontal and vertical grid lines to dotted semi-transprent black
// (aa000000).
PlotArea plotArea = c.setPlotArea(50, 55, c.getWidth() - 100,
c.getHeight() - 120, c.linearGradientColor(0, 55, 0, 55 +
c.getHeight() - 120, 0xaaccff, 0xf9fcff), -1, -1, c.dashLineColor(
unchecked ((int)0xaa000000), Chart.DotLine), -1);
// Add a legend box and anchored the top center at the horizontal center
// of the chart, just under the title. Use 10pts Arial Bold as font, with
// transparent background and border.
LegendBox legendBox = c.addLegend(c.getWidth() / 2, title.getHeight(),
false, "Arial Bold", 10);
legendBox.setAlignment(Chart.TopCenter);
legendBox.setBackground(Chart.Transparent, Chart.Transparent);
// Set y-axis title using 10 points Arial Bold Italic font, label style
// to 8 points Arial Bold, and axis color to transparent
c.yAxis().setTitle("Revenue (USD millions)", "Arial Bold Italic", 10);
c.yAxis().setLabelStyle("Arial Bold", 8);
c.yAxis().setColors(Chart.Transparent);
// Set y-axis tick density to 30 pixels. ChartDirector auto-scaling will
// use this as the guideline when putting ticks on the y-axis.
c.yAxis().setTickDensity(30);
// Add a line layer to the chart
LineLayer layer = c.addLineLayer2();
// 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);
// Set the x axis labels
c.xAxis().setLabels(labels);
// Convert the labels on the x-axis to a CDMLTable
CDMLTable table = c.xAxis().makeLabelTable();
// Set the default top/bottom margins of the cells to 3 pixels
table.getStyle().setMargin2(0, 0, 3, 3);
// Use Arial Bold as the font for the first row
table.getRowStyle(0).setFontStyle("Arial Bold");
//
// We can add more information to the table. In this sample code, we add
// the data series and the legend icons to the table.
//
// Add 3 more rows to the table. Set the background of the 1st and 3rd
// rows to light grey (eeeeee).
table.appendRow().setBackground(0xeeeeee, Chart.LineColor);
table.appendRow();
table.appendRow().setBackground(0xeeeeee, Chart.LineColor);
// Put the values of the 3 data series to the cells in the 3 rows
for (int i = 0; i < data0.Length; ++i)
{
table.setText(i, 1, (data0[i]).ToString());
table.setText(i, 2, (data1[i]).ToString());
table.setText(i, 3, (data2[i]).ToString());
}
// Insert a column on the left for the legend icons. Use 5 pixels
// left/right margins and 3 pixels top/bottom margins for the cells in
// this column.
table.insertCol(0).setMargin2(5, 5, 3, 3);
// The top cell is set to transparent, so it is invisible
table.getCell(0, 0).setBackground(Chart.Transparent, Chart.Transparent);
// The other 3 cells are set to the legend icons of the 3 data series
table.setText(0, 1, layer.getLegendIcon(0));
table.setText(0, 2, layer.getLegendIcon(1));
table.setText(0, 3, layer.getLegendIcon(2));
// Layout legend box first, so we can get its size
c.layoutLegend();
// 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, legendBox.getTopY() + legendBox.getHeight(),
c.getWidth() - 3, c.getHeight() - 3);
// After determining the exact plot area position, we may adjust the
// legend box and the title positions so that they are centered relative
// to the plot area (instead of the chart)
legendBox.setPos(plotArea.getLeftX() + (plotArea.getWidth() -
legendBox.getWidth()) / 2, legendBox.getTopY());
title.setPos(plotArea.getLeftX() + (plotArea.getWidth() - title.getWidth(
)) / 2, title.getTopY());
// Output the chart
viewer.Image = c.makeImage();
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Revenue of {dataSetName} in {xLabel}: US$ {value}M'");
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The data for the chart
double[] data0 = { 42, 49, Chart.NoValue, 38, 64, 56, 29, 41, 44, 57 };
double[] data1 = { 65, 75, 47, 34, 42, 49, 73, Chart.NoValue, 90, 69, 66, 78 };
double[] data2 = { Chart.NoValue, Chart.NoValue, 25, 28, 38, 20, 22, Chart.NoValue, 25,
33, 30, 24 };
string[] labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct",
"Nov", "Dec" };
// Create a XYChart object of size 600 x 360 pixels. Set background color to brushed
// silver, with a 2 pixel 3D border. Use rounded corners.
XYChart c = new XYChart(600, 360, Chart.brushedSilverColor(), Chart.Transparent, 2);
c.setRoundedFrame();
// Add a title using 18pt Times New Roman Bold Italic font. #Set top/bottom margins to 6
// pixels.
ChartDirector.TextBox title = c.addTitle("Product Line Global Revenue",
"Times New Roman Bold Italic", 18);
title.setMargin2(0, 0, 6, 6);
// Add a separator line just under the title
c.addLine(10, title.getHeight(), c.getWidth() - 11, title.getHeight(), Chart.LineColor);
// Add a legend box where the top-center is anchored to the horizontal center of the
// chart, just under the title. Use horizontal layout and 10 points Arial Bold font, and
// transparent background and border.
LegendBox legendBox = c.addLegend(c.getWidth() / 2, title.getHeight(), false,
"Arial Bold", 10);
legendBox.setAlignment(Chart.TopCenter);
legendBox.setBackground(Chart.Transparent, Chart.Transparent);
// Tentatively set the plotarea at (70, 75) and of 460 x 240 pixels in size. Use
// transparent border and black (000000) grid lines
c.setPlotArea(70, 75, 460, 240, -1, -1, Chart.Transparent, 0x000000, -1);
// Set the x axis labels
c.xAxis().setLabels(labels);
// Show the same scale on the left and right y-axes
c.syncYAxis();
// Set y-axis tick density to 30 pixels. ChartDirector auto-scaling will use this as the
// guideline when putting ticks on the y-axis.
c.yAxis().setTickDensity(30);
// Set all axes to transparent
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
c.yAxis2().setColors(Chart.Transparent);
// Set the x-axis margins to 15 pixels, so that the horizontal grid lines can extend
// beyond the leftmost and rightmost vertical grid lines
c.xAxis().setMargin(15, 15);
// Set axis label style to 8pt Arial Bold
c.xAxis().setLabelStyle("Arial Bold", 8);
c.yAxis().setLabelStyle("Arial Bold", 8);
c.yAxis2().setLabelStyle("Arial Bold", 8);
// Add axis title using 10pt Arial Bold Italic font
c.yAxis().setTitle("Revenue in USD millions", "Arial Bold Italic", 10);
c.yAxis2().setTitle("Revenue in USD millions", "Arial Bold Italic", 10);
// Add the first line. The missing data will be represented as gaps in the line (the
// default behaviour)
LineLayer layer0 = c.addLineLayer2();
layer0.addDataSet(data0, 0xff0000, "Quantum Computer").setDataSymbol(
Chart.GlassSphere2Shape, 11);
layer0.setLineWidth(3);
// Add the second line. The missing data will be represented by using dash lines to
// bridge the gap
LineLayer layer1 = c.addLineLayer2();
layer1.addDataSet(data1, 0x00ff00, "Atom Synthesizer").setDataSymbol(
Chart.GlassSphere2Shape, 11);
layer1.setLineWidth(3);
layer1.setGapColor(c.dashLineColor(0x00ff00));
// Add the third line. The missing data will be ignored - just join the gap with the
// original line style.
LineLayer layer2 = c.addLineLayer2();
layer2.addDataSet(data2, 0xff6600, "Proton Cannon").setDataSymbol(
Chart.GlassSphere2Shape, 11);
layer2.setLineWidth(3);
layer2.setGapColor(Chart.SameAsMainColor);
// layout the legend so we can get the height of the legend box
c.layoutLegend();
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 15
// pixels from the left edge, just under the legend box, 16 pixels from the right edge,
// and 25 pixels from the bottom edge.
c.packPlotArea(15, legendBox.getTopY() + legendBox.getHeight(), c.getWidth() - 16,
c.getHeight() - 25);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Revenue of {dataSetName} in {xLabel}: US$ {value}M'");
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The data for the chart
double[] dataY = { 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1 };
DateTime[] dataX = { new DateTime(2008, 7, 1, 0, 0, 0), new DateTime(2008, 7, 1, 2, 17, 2
), new DateTime(2008, 7, 1, 8, 5, 30), new DateTime(2008, 7, 1, 10, 54, 10),
new DateTime(2008, 7, 1, 15, 40, 0), new DateTime(2008, 7, 1, 18, 22, 20),
new DateTime(2008, 7, 1, 22, 17, 14), new DateTime(2008, 7, 2, 2, 55, 50),
new DateTime(2008, 7, 2, 8, 17, 14), new DateTime(2008, 7, 2, 11, 55, 50),
new DateTime(2008, 7, 2, 13, 17, 14), new DateTime(2008, 7, 2, 17, 55, 50),
new DateTime(2008, 7, 2, 20, 17, 14), new DateTime(2008, 7, 3, 0, 0, 0) };
// In this example, we only use position 1, 3, 5 for the data series. Positions 0, 2, 4,
// 6 are empty and serve as gaps.
string[] labels = { "", "ON Only Filling", "",
"<*font,color=cc2200*>ON<*/font*> / <*font,color=00aa22*>OFF<*/font*> Filling", "",
"Logic Line", "" };
// Create a XYChart object of size 600 x 180 pixels
XYChart c = new XYChart(600, 180);
// Add a title to the chart using 10 points Arial Bold font. Set top/bottom margins to
// 12 pixels.
ChartDirector.TextBox title = c.addTitle("Binary Data Series Demonstration",
"Arial Bold", 10);
// Tentatively set the plotarea at (100, 30) and of size 470 x 120 pixels. Use
// transparent border. Use grey (888888) solid line and light grey (ccccc) dotted line
// as major and minor vertical grid lines.
c.setPlotArea(100, 30, 470, 120, -1, -1, Chart.Transparent).setGridColor(
Chart.Transparent, 0x888888, Chart.Transparent, c.dashLineColor(0xcccccc,
Chart.DotLine));
// Set axes to transparent
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
// Set the y axis labels
c.yAxis().setLabels(labels);
// Set y-axis label style to 8pt Arial Bold
c.yAxis().setLabelStyle("Arial Bold", 8);
// Set x-axis major and minor tick density to 50 and 5 pixels. ChartDirector
// auto-scaling will use this as the guideline when putting ticks on the x-axis.
c.xAxis().setTickDensity(50, 5);
// Use "<*font=Arial Bold*>{value|mmm dd}" for the first label of an hour, and
// "{value|hh:nn}" for all other labels.
c.xAxis().setMultiFormat(Chart.StartOfDayFilter(), "<*font=Arial Bold*>{value|mmm dd}",
Chart.AllPassFilter(), "{value|hh:nn}");
//
// A Logic Line can be achieved using a StepLineLayer in ChartDirector
//
// Shift the data by 4.5, so instead of 0 - 1, it is now 4.5 to 5.5, or fluctuate around
// the y = 5 (Logic Line label) position.
double[] shiftedLine0 = new ArrayMath(dataY).add(4.5).result();
// Add step lines using the original and the reversed data
StepLineLayer layer0 = c.addStepLineLayer(shiftedLine0, 0x0000ff);
layer0.setXData(dataX);
//
// To perform ON/OFF filling, we draw the logic line, and its reverse, and fill the
// region in between
//
// Shift the data by 2.5, so instead of 0 - 1, it is now 2.5 to 3.5, or fluctuate around
// the y = 3 (ON/OFF Filing label) position.
double[] shiftedLine1 = new ArrayMath(dataY).add(2.5).result();
// Reverse the data, so the 0 becomes 1 and 1 becomes 0, and shift it as well.
double[] reverseShiftedLine1 = new ArrayMath(dataY).mul(-1).add(3.5).result();
// Add step lines using the original and the reversed data
StepLineLayer layer1 = c.addStepLineLayer(shiftedLine1, Chart.Transparent);
layer1.addDataSet(reverseShiftedLine1, Chart.Transparent);
layer1.setXData(dataX);
// Fill the region between the two step lines with green (00aa22) or red (cc2200),
// depending on whether the original or the reserve is higher.
c.addInterLineLayer(layer1.getLine(0), layer1.getLine(1), 0x00aa22, 0xcc2200);
//
// The ON Only filling is the same as ON/OFF filling, except the OFF filling color is
// transparent
//
// Shift the data by 0.5, so instead of 0 - 1, it is now 0.5 to 1.5, or fluctuate around
// the y = 1 (ON Only Filing label) position.
double[] shiftedLine2 = new ArrayMath(dataY).add(0.5).result();
// Reverse the data, so the 0 becomes 1 and 1 becomes 0, and shift it as well.
double[] reverseShiftedLine2 = new ArrayMath(dataY).mul(-1).add(1.5).result();
// Add step lines using the original and the reversed data
StepLineLayer layer2 = c.addStepLineLayer(shiftedLine2, Chart.Transparent);
layer2.addDataSet(reverseShiftedLine2, Chart.Transparent);
layer2.setXData(dataX);
// Fill the region between the two step lines with green (00aa22) or transparent,
// depending on whether the original or the reserve is higher.
c.addInterLineLayer(layer2.getLine(0), layer2.getLine(1), 0x00aa22, Chart.Transparent);
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 10
// pixels from the left edge, 10 pixels below the title, 30 pixels from the right edge,
// and 10 pixels above the bottom edge.
c.packPlotArea(10, title.getHeight() + 10, c.getWidth() - 30, c.getHeight() - 10);
// Output the chart
viewer.Chart = c;
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The data for the bars and the marks
double[] barData = { 100, 125, 245, 147, 67, 96, 160, 145, 97, 167, 220, 125 };
double[] markData = { 85, 156, 220, 120, 80, 110, 140, 130, 111, 180, 175, 100 };
// The labels for the bar chart
string[] labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept",
"Oct", "Nov", "Dec" };
// Create a XYChart object of size 480 x 360 pixels. Use a vertical gradient color from
// pale blue (e8f0f8) to sky blue (aaccff) spanning half the chart height as background.
// Set border to blue (88aaee). Use rounded corners. Enable soft drop shadow.
XYChart c = new XYChart(480, 360);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight() / 2, 0xe8f0f8, 0xaaccff),
0x88aaee);
c.setRoundedFrame();
c.setDropShadow();
// Add a title to the chart using 15 points Arial Italic font. Set top/bottom margins to
// 12 pixels.
ChartDirector.TextBox title = c.addTitle("Bars with Marks Demonstration",
"Arial Italic", 15);
title.setMargin2(0, 0, 12, 12);
// Tentatively set the plotarea to 50 pixels from the left edge to allow for the y-axis,
// and to just under the title. Set the width to 65 pixels less than the chart width,
// and the height to reserve 90 pixels at the bottom for the x-axis and the legend box.
// Use pale blue (e8f0f8) background, transparent border, and grey (888888) dotted
// horizontal grid lines.
c.setPlotArea(50, title.getHeight(), c.getWidth() - 65, c.getHeight() - title.getHeight(
) - 90, 0xe8f0f8, -1, Chart.Transparent, c.dashLineColor(0x888888, Chart.DotLine));
// Add a legend box where the bottom-center is anchored to the 15 pixels above the
// bottom-center of the chart. Use horizontal layout and 8 points Arial font.
LegendBox legendBox = c.addLegend(c.getWidth() / 2, c.getHeight() - 15, false, "Arial",
8);
legendBox.setAlignment(Chart.BottomCenter);
// Set the legend box background and border to pale blue (e8f0f8) and bluish grey
// (445566)
legendBox.setBackground(0xe8f0f8, 0x445566);
// Use rounded corners of 5 pixel radius for the legend box
legendBox.setRoundedCorners(5);
// Use line style legend key
legendBox.setLineStyleKey();
// Set axes to transparent
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
// Set the labels on the x axis
c.xAxis().setLabels(labels);
// Add a box-whisker layer with just the middle mark visible for the marks. Use red
// (ff0000) color for the mark, with a line width of 2 pixels and 10% horizontal gap
BoxWhiskerLayer markLayer = c.addBoxWhiskerLayer(null, null, null, null, markData, -1,
0xff0000);
markLayer.setLineWidth(2);
markLayer.setDataGap(0.1);
// Add the legend key for the mark line
legendBox.addKey("Target", 0xff0000, 2);
// Tool tip for the mark layer
markLayer.setHTMLImageMap("", "", "title='Target at {xLabel}: {med}'");
// Add a blue (0066cc) bar layer using the given data.
BarLayer barLayer = c.addBarLayer(barData, 0x0066cc, "Actual");
// Use soft lighting effect for the bars with light direction from left.
barLayer.setBorderColor(Chart.Transparent, Chart.softLighting(Chart.Left));
// Tool tip for the bar layer
barLayer.setHTMLImageMap("", "", "title='{dataSetName} at {xLabel}: {value}'");
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 10
// pixels from the left edge, just below the title, 15 pixels from the right edge, and
// 10 pixels above the legend box.
c.packPlotArea(10, title.getHeight(), c.getWidth() - 15, c.layoutLegend().getTopY() - 10
);
// Output the chart
viewer.Chart = c;
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable");
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The (x, y, z) coordinates of the scattered data
double[] dataX = { 0.5, 1.9, 4.9, 1.0, 8.9, 9.8, 5.9, 2.9, 6.8, 9.0, 0.0, 8.9, 1.9, 4.8,
2.4, 3.4, 7.9, 7.5, 4.8, 7.5, 9.5, 0.4, 8.9, 0.9, 5.4, 9.4, 2.9, 8.9, 0.9, 8.9,
10.0, 1.0, 6.8, 3.8, 9.0, 5.3, 6.4, 4.9, 4.5, 2.0, 5.4, 0.0, 10.0, 3.9, 5.4, 5.9,
5.8, 0.3, 4.4, 8.3 };
double[] dataY = { 3.3, 3.0, 0.7, 1.0, 9.3, 4.5, 8.4, 0.1, 0.8, 0.1, 9.3, 1.8, 4.3, 1.3,
2.3, 5.4, 6.9, 9.0, 9.8, 7.5, 1.8, 1.4, 4.5, 7.8, 3.8, 4.0, 2.9, 2.4, 3.9, 2.9, 2.3,
9.3, 2.0, 3.4, 4.8, 2.3, 3.4, 2.3, 1.5, 7.8, 4.5, 0.9, 6.3, 2.4, 6.9, 2.8, 1.3, 2.9,
6.4, 6.3 };
double[] dataZ = { 6.6, 12.5, 7.4, 6.2, 9.6, 13.6, 19.9, 2.2, 6.9, 3.4, 8.7, 8.4, 7.8,
8.0, 9.4, 11.9, 9.6, 15.7, 12.0, 13.3, 9.6, 6.4, 9.0, 6.9, 4.6, 9.7,10.6, 9.2, 7.0,
6.9, 9.7, 8.6, 8.0, 13.6, 13.2, 5.9, 9.0, 3.2, 8.3, 9.7, 8.2, 6.1, 8.7, 5.6, 14.9,
9.8, 9.3, 5.1, 10.8, 9.8 };
// Create a SurfaceChart object of size 680 x 550 pixels. Set background to brushed
// silver and border to grey (888888). Set the top-left and bottom-right corners to
// rounded corners with 20 pixels radius.
SurfaceChart c = new SurfaceChart(680, 550, Chart.brushedSilverColor(), 0x888888);
c.setRoundedFrame(0xffffff, 20, 0, 20, 0);
// Add a title to the chart using 20 points Times New Roman Italic font. Set top/bottom
// margin to 8 pixels.
ChartDirector.TextBox title = c.addTitle("Surface Created Using Scattered Data Points",
"Times New Roman Italic", 20);
title.setMargin2(0, 0, 8, 8);
// Add a 2 pixel wide black (000000) separator line under the title
c.addLine(10, title.getHeight(), c.getWidth() - 10, title.getHeight(), 0x000000, 2);
// Set the center of the plot region at (290, 235), and set width x depth x height to
// 360 x 360 x 180 pixels
c.setPlotRegion(290, 235, 360, 360, 180);
// Set the elevation and rotation angles to 45 and -45 degrees
c.setViewAngle(45, -45);
// Set the perspective level to 30
c.setPerspective(30);
// Set the data to use to plot the chart
c.setData(dataX, dataY, dataZ);
// Add a color axis (the legend) in which the top right corner is anchored at (660, 80).
// Set the length to 200 pixels and the labels on the right side.
ColorAxis cAxis = c.setColorAxis(660, 80, Chart.TopRight, 200, Chart.Right);
// Set the color axis title with 12 points Arial Bold font
cAxis.setTitle("Z Title Placeholder", "Arial Bold", 12);
// Add a bounding box with light grey (eeeeee) background and grey (888888) border. Set
// the top-left and bottom-right corners to rounded corners of 10 pixels radius.
cAxis.setBoundingBox(0xeeeeee, 0x888888);
cAxis.setRoundedCorners(10, 0, 10, 0);
// Set surface grid lines to semi-transparent black (cc000000)
c.setSurfaceAxisGrid(unchecked ((int)0xcc000000));
// Set contour lines to semi-transparent white (80ffffff)
c.setContourColor(unchecked ((int)0x80ffffff));
// Set the walls to black in color
c.setWallColor(0x000000);
// Set the xyz major wall grid lines to white (ffffff), and minor wall grid lines to
// grey (888888)
c.setWallGrid(0xffffff, 0xffffff, 0xffffff, 0x888888, 0x888888, 0x888888);
// Set the wall thickness to 0
c.setWallThickness(0, 0, 0);
// Show only the xy wall, and hide the yz and zx walls.
c.setWallVisibility(true, false, false);
// Set the x, y and z axis titles using 12 points Arial Bold font
c.xAxis().setTitle("X Title\nPlaceholder", "Arial Bold", 12);
c.yAxis().setTitle("Y Title\nPlaceholder", "Arial Bold", 12);
// Output the chart
viewer.Chart = c;
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The data for the line chart
double[] data0 = { 410, 420, 500, 590 };
double[] data1 = { 500, 370, 680, 850 };
string[] labels = { "Q1", "Q2", "Q3", "Q4" };
// Create a XYChart object of size 600 x 400 pixels
XYChart c = new XYChart(600, 400);
// Add a title to the chart using 18pt Times Bold Italic font
ChartDirector.TextBox title = c.addTitle("Product Line Global Revenue",
"Times New Roman Bold Italic", 18);
// Tentatively set the plotarea at (50, 55) and of (chart_width - 100) x (chart_height -
// 150) pixels in size. Use a vertical gradient color from sky blue (aaccff) t0 light
// blue (f9f9ff) as background. Set both horizontal and vertical grid lines to dotted
// semi-transprent black (aa000000).
PlotArea plotArea = c.setPlotArea(50, 55, c.getWidth() - 100, c.getHeight() - 150,
c.linearGradientColor(0, 55, 0, 55 + c.getHeight() - 150, 0xaaccff, 0xf9fcff), -1,
-1, c.dashLineColor(unchecked ((int)0xaa000000), Chart.DotLine), -1);
// Set y-axis title using 12 points Arial Bold Italic font, and set its position 10
// pixels from the axis.
c.yAxis().setTitle("Revenue (USD millions)", "Arial Bold Italic", 12);
c.yAxis().setTitlePos(Chart.Left, 10);
// Set y-axis label style to 10 points Arial Bold and axis color to transparent
c.yAxis().setLabelStyle("Arial Bold", 10);
c.yAxis().setColors(Chart.Transparent);
// Set y-axis tick density to 30 pixels. ChartDirector auto-scaling will use this as the
// guideline when putting ticks on the y-axis.
c.yAxis().setTickDensity(30);
// Add a bar layer to the chart with side layout
BarLayer layer = c.addBarLayer2(Chart.Side);
// Add two data sets to the bar layer
layer.addDataSet(data0, 0xff6600, "FY 2007");
layer.addDataSet(data1, 0x0088ff, "FY 2008");
// Use soft lighting effect with light direction from the left
layer.setBorderColor(Chart.Transparent, Chart.softLighting(Chart.Left));
// Set the x axis labels
c.xAxis().setLabels(labels);
// Convert the labels on the x-axis to a CDMLTable
CDMLTable table = c.xAxis().makeLabelTable();
// Set the default left/right margins to 5 pixels and top/bottom margins to 3 pixels.
// Set the default font size to 10 points
ChartDirector.TextBox cellStyle = table.getStyle();
cellStyle.setMargin2(5, 5, 4, 3);
cellStyle.setFontSize(10);
// Set the first row to use Arial Bold font, with a light grey (eeeeee) background.
ChartDirector.TextBox firstRowStyle = table.getRowStyle(0);
firstRowStyle.setFontStyle("Arial Bold");
firstRowStyle.setBackground(0xeeeeee, Chart.LineColor);
//
// We can add more information to the table. In this sample code, we add the data series
// and the legend icons to the table.
//
// Add 3 more rows to the table. Set the background of the 2nd row to light grey
// (eeeeee).
table.appendRow();
table.appendRow().setBackground(0xeeeeee, Chart.LineColor);
table.appendRow();
// Put the values of the 2 data series in the first 2 rows. Put the percentage
// differences in the 3rd row.
for (int i = 0; i < data0.Length; ++i)
{
table.setText(i, 1, (data0[i]).ToString());
table.setText(i, 2, (data1[i]).ToString());
double percentageDiff = 100.0 * (data1[i] - data0[i]) / data0[i];
// Use red or green color depending on whether the difference is positive or
// negative
string formatString = "<*color=008800*>+{value|1}%";
if (percentageDiff < 0)
{
formatString = "<*color=cc0000*>{value|1}%";
}
table.setText(i, 3, c.formatValue(percentageDiff, formatString));
}
// Insert a column on the left for the legend icons using Arial Bold font.
table.insertCol(0).setFontStyle("Arial Bold");
// The top cell is set to transparent, so it is invisible
table.getCell(0, 0).setBackground(Chart.Transparent, Chart.Transparent);
// The next 2 cells are set to the legend icons and names of the 2 data series
table.setText(0, 1, layer.getLegendIcon(0) + " FY 2007");
table.setText(0, 2, layer.getLegendIcon(1) + " FY 2008");
// The last cell is set to "Change"
table.setText(0, 3, "Change");
// Append a column on the right for the total values.
table.appendCol();
// Put "Total" in the top cell as the heading of this column
table.setText(table.getColCount() - 1, 0, "Total");
// The next two cells are the total of the data series
double total0 = new ArrayMath(data0).sum();
double total1 = new ArrayMath(data1).sum();
table.setText(table.getColCount() - 1, 1, (total0).ToString());
table.setText(table.getColCount() - 1, 2, (total1).ToString());
// The last cell is the percentage differences of the total
double totalPercentageDiff = (total1 - total0) / total0 * 100;
// Use red or green color depending on whether the difference is positive or negative
string totalFormatString = "<*color=008800*>+{value|1}%";
if (totalPercentageDiff < 0)
{
totalFormatString = "<*color=cc0000*>{value|1}%";
}
table.setText(table.getColCount() - 1, 3, c.formatValue(totalPercentageDiff,
totalFormatString));
//
// We now demonstrate how to adjust the plot area positions, to allow space for the
// newly inserted left and right columns in the table.
//
// We layout the axis first in order to get the axis metrics (including table metrics)
c.layoutAxes();
// If the first column is wider than the left y-axis, we need to reserve for some left
// margin to ensure the first column stays within the chart.
int leftMargin = 0;
if (table.getColWidth(0) > c.yAxis().getThickness())
{
leftMargin = table.getColWidth(0) - c.yAxis().getThickness();
}
// Similarly, we need to reserve some right margin for the last column
int rightMargin = table.getColWidth(table.getColCount() - 1);
// Adjust the plot area size, such that the bounding box (inclusive of axes) using the
// given left and right margin, plus 2 more pixels. Put the plot area 10 pixels below
// the title and use 2 pixels as the bottom margin. from the left, right and bottom
// edge, and is just under the legend box.
c.packPlotArea(leftMargin + 2, title.getHeight() + 10, c.getWidth() - 3 - rightMargin,
c.getHeight() - 3);
// After determining the exact plot area position, we may adjust title position so that
// it is centered relative to the plot area (instead of the chart)
title.setPos(plotArea.getLeftX() + (plotArea.getWidth() - title.getWidth()) / 2,
title.getTopY());
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Revenue in {xLabel} {dataSetName}: US$ {value}M'");
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The data for the line chart
double[] data0 = { 70, 73, 80, 90, 95, 93, 82, 77, 82, 101, 111, 115 };
double[] data1 = { 90, 96, 89, 77, 82, 96, 109, 109, 99, 108, 96, 91 };
double[] data2 = { 58, 34, 25, 49, 64, 10, 16, 40, 25, 49, 40, 22 };
// The labels for the line chart
string[] labels = { "2008-01", "2008-02", "2008-03", "2008-04", "2008-05", "2008-06",
"2008-07", "2008-08", "2008-09", "2008-10", "2008-11", "2008-12" };
// Create a XYChart object of size 450 x 450 pixels
XYChart c = new XYChart(450, 450);
// Add a title to the chart using 15pt Arial Italic font.
ChartDirector.TextBox title = c.addTitle("Inter-line Coloring", "Arial Italic", 15);
// Add a legend box where the top-center is anchored to the horizontal center of the
// chart, just under the title. Use horizontal layout and 10 points Arial Bold font, and
// transparent background and border. Use line style legend key.
LegendBox legendBox = c.addLegend(c.getWidth() / 2, title.getHeight(), false,
"Arial Bold Italic", 10);
legendBox.setBackground(Chart.Transparent, Chart.Transparent);
legendBox.setAlignment(Chart.TopCenter);
legendBox.setLineStyleKey();
// Tentatively set the plotarea at (70, 65) and of (chart_width - 100) x (chart_height -
// 110) in size. Use light grey (c0c0c0) border and horizontal and vertical grid lines.
PlotArea plotArea = c.setPlotArea(70, 65, c.getWidth() - 100, c.getHeight() - 110, -1,
-1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a title to the y axis using 12pt Arial Bold Italic font
c.yAxis().setTitle("Axis Title Placeholder", "Arial Bold Italic", 12);
// Add a title to the x axis using 12pt Arial Bold Italic font
c.xAxis().setTitle("Axis Title Placeholder", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.xAxis().setWidth(3);
c.yAxis().setWidth(3);
// Set the labels on the x axis.
c.xAxis().setLabels(labels);
// Use 8 points Arial rotated by 90 degrees as the x-axis label font
c.xAxis().setLabelStyle("Arial", 8, Chart.TextColor, 90);
// Add a spline curve to the chart
SplineLayer layer0 = c.addSplineLayer(data0, 0xff0000, "Data Set 0");
layer0.setLineWidth(2);
// Add a normal line to the chart
LineLayer layer1 = c.addLineLayer(data1, 0x008800, "Data Set 1");
layer1.setLineWidth(2);
// Color the region between the above spline curve and normal line. Use the
// semi-transparent red (80ff000000) if the spline curve is higher than the normal line,
// otherwise use semi-transparent green (80008800)
c.addInterLineLayer(layer0.getLine(), layer1.getLine(), unchecked ((int)0x80ff0000),
unchecked ((int)0x80008800));
// Add another normal line to the chart
LineLayer layer2 = c.addLineLayer(data2, 0x0000ff, "Data Set 2");
layer2.setLineWidth(2);
// Add a horizontal mark line to the chart at y = 40
Mark mark = c.yAxis().addMark(40, -1, "Threshold");
mark.setLineWidth(2);
// Set the mark line to purple (880088) dash line. Use white (ffffff) for the mark
// label.
mark.setMarkColor(c.dashLineColor(0x880088), 0xffffff);
// Put the mark label at the left side of the mark, with a purple (880088) background.
mark.setAlignment(Chart.Left);
mark.setBackground(0x880088);
// Color the region between the above normal line and mark line. Use the
// semi-transparent blue (800000ff) if the normal line is higher than the mark line,
// otherwise use semi-transparent purple (80880088)
c.addInterLineLayer(layer2.getLine(), mark.getLine(), unchecked ((int)0x800000ff),
unchecked ((int)0x80880088));
// Layout the legend box, so we can get its height
c.layoutLegend();
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 10
// pixels from the left edge, just under the legend box, 25 pixels from the right edge,
// and 10 pixels from the bottom edge.
c.packPlotArea(10, legendBox.getTopY() + legendBox.getHeight(), c.getWidth() - 25,
c.getHeight() - 10);
// After determining the exact plot area position, we may adjust the legend box and the
// title positions so that they are centered relative to the plot area (instead of the
// chart)
legendBox.setPos(plotArea.getLeftX() + (plotArea.getWidth() - legendBox.getWidth()) / 2,
legendBox.getTopY());
title.setPos(plotArea.getLeftX() + (plotArea.getWidth() - title.getWidth()) / 2,
title.getTopY());
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{dataSetName} in {xLabel}: {value}'");
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The data for the area chart
double[] data = { 30, 28, 40, 55, 75, 68, 54, 60, 50, 62, 75, 65, 75, 89, 60, 55, 53, 35,
50, 66, 56, 48, 52, 65, 62 };
// The labels for the area chart
string[] labels = { "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12",
"13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24" };
// Create a XYChart object of size 600 x 360 pixels, with a brushed silver background, 1
// pixel 3D border effect, rounded corners and soft drop shadow.
XYChart c = new XYChart(600, 360, Chart.brushedSilverColor(), Chart.Transparent, 1);
c.setRoundedFrame();
c.setDropShadow();
// Add a title box to the chart using 18pt Times Bold Italic font.
ChartDirector.TextBox title = c.addTitle(
"<*block,valign=absmiddle*><*img=@/images/star.png*><*img=@/images/star.png*> " +
"Performance Enhancer <*img=@/images/star.png*><*img=@/images/star.png*><*/*>",
"Times New Roman Bold Italic", 18);
//
// Use a text box with a depressed 3D border to create the inner depressed region
//
// The width of the frame border
int frameWidth = 5;
// Set the depressed region position
ChartDirector.TextBox contentBox = c.addText(frameWidth, title.getHeight(), "");
contentBox.setSize(c.getDrawArea().getWidth() - 1 - frameWidth * 2, c.getDrawArea(
).getHeight() - title.getHeight() - frameWidth - 1);
// Use -1 as the rasied effect to create a depressed region
contentBox.setBackground(Chart.Transparent, Chart.Transparent, -1);
// Set rounded corners, and put the text box at the back of the chart
contentBox.setRoundedCorners(10);
contentBox.setZOrder(Chart.ChartBackZ);
// Tentatively set the plotarea to 50 pixels from the left depressed edge, and 25 pixels
// under the top depressed edge. Set the width to 75 pixels less than the depressed
// region width, and the height to 75 pixels less than the depressed region height. Use
// white (ffffff) background, transparent border, and grey (cccccc) horizontal and
// vertical grid lines.
PlotArea plotArea = c.setPlotArea(50 + contentBox.getLeftX(), contentBox.getTopY() + 25,
contentBox.getWidth() - 75, contentBox.getHeight() - 75, 0xffffff, -1, -1, 0xcccccc,
-1);
// Add a title to the y axis
c.yAxis().setTitle("Energy Concentration (KJ per liter)");
// Set the labels on the x axis.
c.xAxis().setLabels(labels);
// Display 1 out of 3 labels on the x-axis.
c.xAxis().setLabelStep(3);
// Add a title to the x axis using CDML
c.xAxis().setTitle(
"<*block,valign=absmiddle*><*img=@/images/clock.png*> Elapsed Time (hour)<*/*>");
// Set the axes width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// Add an area layer to the chart using a gradient color that changes vertically from
// semi-transparent red (60ff0000) to semi-transparent white (60ffffff)
c.addAreaLayer(data, c.linearGradientColor(0, contentBox.getTopY() + 20, 0,
contentBox.getTopY() + contentBox.getHeight() - 50, 0x60ff0000, 0x60ffffff));
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 15
// pixels from the left depressed edge, 25 pixels below the top depressed edge, 25
// pixels from the right depressed edge, and 15 pixels above the bottom depressed edge.
c.packPlotArea(contentBox.getLeftX() + 15, contentBox.getTopY() + 25,
contentBox.getLeftX() + contentBox.getWidth() - 25, contentBox.getTopY() +
contentBox.getHeight() - 15);
// Add a custom CDML text with the bottom right corner is anchored to the bootom right
// corner of the plot area, with 5 pixels margin.
c.addText(plotArea.getLeftX() + plotArea.getWidth() - 5, plotArea.getTopY() +
plotArea.getHeight() - 5,
"<*block,valign=absmiddle*><*img=@/images/small_molecule.png*> <*block*>" +
"<*font=Times New Roman Bold Italic,size=10,color=804040*>Molecular\nEngineering" +
"<*/*>").setAlignment(Chart.BottomRight);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Hour {xLabel}: {value} KJ/liter'");
}
private static XYChart GetChart(int width, int height, string xTitle, string yTitle, int fontSize,
Dictionary <string, LineChartInfo> lineInfos, List <LineChartPoint> points)
{
//Chart.setLicenseCode("XXXXX");
XYChart c = new XYChart(width, height);
List <string> labels = new List <string>();
foreach (LineChartPoint point in points)
{
labels.Add(point.XValue.ToString());
}
var labelStep = 2;
while (Math.Round(labels.Count / (double)labelStep) > 10)
{
labelStep = labelStep * 5;
}
c.xAxis().setLabels(labels.ToArray());
c.xAxis().setLabelStep(labelStep);
List <string> lineNames = lineInfos.Keys.ToList();
foreach (string lineName in lineNames)
{
LineChartInfo lineInfo = lineInfos[lineName];
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(lineInfo.LineWidth);
List <double> yValues = points.ConvertAll(o => o.YValues[lineName]);
int color = lineInfo.Color;
DataSet ds;
if (lineInfo.LineStyle == LineStyle.Continuous)
{
ds = layer.addDataSet(yValues.ToArray(), color, lineName);
}
else
{
ds = layer.addDataSet(yValues.ToArray(), c.dashLineColor(color, Chart.DashLine), lineName);
}
if (!lineInfo.IsSpecialStar)
{
ds.setDataSymbol(lineInfo.Symbol, lineInfo.SymbolSize, lineInfo.Color);
}
else
{
ds.setDataSymbol(GetStar(), lineInfo.SymbolSize, lineInfo.Color, lineInfo.Color);
}
}
ChartDirector.TextBox tbXTitle = c.xAxis().setTitle(xTitle, "", fontSize);
ChartDirector.TextBox tbYTitle = c.yAxis().setTitle(yTitle, "", fontSize);
//c.xAxis().setLinearScale(minX, maxX);
//GenericMethods.SetRangeY(c, maxY, minY);
SetFontSize(c, fontSize);
SetOptions(c, width, height, fontSize, 20 + tbXTitle.getHeight(), 10 + tbYTitle.getHeight());
return(c);
}
