//Main code for creating charts
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 72.55;
// Create an AngularMeter object of size 240 x 170 pixels with very light grey
// (0xeeeeee) background, and a rounded 4-pixel thick light grey (0xcccccc) border
AngularMeter m = new AngularMeter(240, 170, 0xeeeeee, 0xcccccc);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(4);
// Set the default text and line colors to dark grey (0x222222)
m.setColor(Chart.TextColor, 0x222222);
m.setColor(Chart.LineColor, 0x222222);
// Center at (120, 145), scale radius = 128 pixels, scale angle -60 to +60 degrees
m.setMeter(120, 145, 128, -60, 60);
// Meter scale is 0 - 100, with major/minor/micro ticks every 20/10/5 units
m.setScale(0, 100, 20, 10, 5);
// Set the scale label style to 14pt Arial Italic. Set the major/minor/micro tick
// lengths to 16/16/10 pixels pointing inwards, and their widths to 2/1/1 pixels.
m.setLabelStyle("Arial Italic", 14);
m.setTickLength(-16, -16, -10);
m.setLineWidth(0, 2, 1, 1);
// Demostrate different types of color scales and putting them at different positions
double[] smoothColorScale = { 0, 0x3333ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xdddd00, 100,
0xff0000 };
double[] stepColorScale = { 0, 0x00cc00, 60, 0xffdd00, 80, 0xee0000, 100 };
double[] highLowColorScale = { 0, 0x00ff00, 70, Chart.Transparent, 100, 0xff0000 };
if (chartIndex == 0)
{
// Add the smooth color scale at the default position
m.addColorScale(smoothColorScale);
}
else if (chartIndex == 1)
{
// Add the smooth color scale starting at radius 128 with zero width and ending at
// radius 128 with 16 pixels inner width
m.addColorScale(smoothColorScale, 128, 0, 128, -16);
}
else if (chartIndex == 2)
{
// Add the smooth color scale starting at radius 70 with zero width and ending at
// radius 60 with 20 pixels outer width
m.addColorScale(smoothColorScale, 70, 0, 60, 20);
}
else if (chartIndex == 3)
{
// Add the high/low color scale at the default position
m.addColorScale(highLowColorScale);
}
else if (chartIndex == 4)
{
// Add the step color scale at the default position
m.addColorScale(stepColorScale);
}
else
{
// Add the smooth color scale at radius 60 with 15 pixels outer width
m.addColorScale(smoothColorScale, 60, 15);
}
// Add a text label centered at (120, 120) with 15pt Arial Italic font
m.addText(120, 120, "CPU", "Arial Italic", 15, Chart.TextColor, Chart.BottomCenter);
// Add a red (0xff0000) pointer at the specified value
m.addPointer2(value, 0xff0000);
// Add a semi-transparent light grey (0x3fcccccc) rectangle at (0, 120) and of size 240
// x 60 pixels to cover the bottom part of the meter for decoration
ChartDirector.TextBox cover = m.addText(0, 120, "");
cover.setSize(240, 60);
cover.setBackground(0x3fcccccc);
// Output the chart
viewer.Chart = 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 age groups
string[] labels = { "0 - 4", "5 - 9", "10 - 14", "15 - 19", "20 - 24",
"24 - 29", "30 - 34", "35 - 39", "40 - 44", "44 - 49","50 - 54",
"55 - 59", "60 - 64", "65 - 69", "70 - 74", "75 - 79","80+" };
// The male population (in thousands)
double[] male = { 215, 238, 225, 236, 235, 260, 286, 340, 363, 305, 259,
164, 135, 127, 102, 68, 66 };
// The female population (in thousands)
double[] female = { 194, 203, 201, 220, 228, 271, 339, 401, 384, 304, 236,
137, 116, 122, 112, 85, 110 };
//=============================================================
// Draw the right bar chart
//=============================================================
// Create a XYChart object of size 320 x 300 pixels
XYChart c = new XYChart(320, 300);
// Set the plotarea at (50, 0) and of size 250 x 255 pixels. Use pink
// (0xffdddd) as the background.
c.setPlotArea(50, 0, 250, 255, 0xffdddd);
// Add a custom text label at the top right corner of the right bar chart
c.addText(300, 0, "Female", "Times New Roman Bold Italic", 12, 0xa07070
).setAlignment(Chart.TopRight);
// Add the pink (0xf0c0c0) bar chart layer using the female data
BarLayer femaleLayer = c.addBarLayer(female, 0xf0c0c0, "Female");
// Swap the axis so that the bars are drawn horizontally
c.swapXY(true);
// Set the bar to touch each others
femaleLayer.setBarGap(Chart.TouchBar);
// Set the border style of the bars to 1 pixel 3D border
femaleLayer.setBorderColor(-1, 1);
// Add a Transparent line layer to the chart using the male data. As it
// is Transparent, only the female bar chart can be seen. We need to put
// both male and female data in both left and right charts, because we
// want auto-scaling to produce the same scale for both chart.
c.addLineLayer(male, Chart.Transparent);
// Set the y axis label font to Arial Bold
c.yAxis().setLabelStyle("Arial Bold");
// Set the labels between the two bar charts, which can be considered as
// the x-axis labels for the right chart
ChartDirector.TextBox tb = c.xAxis().setLabels(labels);
// Use a fix width of 50 for the labels (height = automatic) with center
// alignment
tb.setSize(50, 0);
tb.setAlignment(Chart.Center);
// Set the label font to Arial Bold
tb.setFontStyle("Arial Bold");
// Disable ticks on the x-axis by setting the tick length to 0
c.xAxis().setTickLength(0);
//=============================================================
// Draw the left bar chart
//=============================================================
// Create a XYChart object of size 280 x 300 pixels with a transparent
// background.
XYChart c2 = new XYChart(280, 300, Chart.Transparent);
// Set the plotarea at (20, 0) and of size 250 x 255 pixels. Use pale
// blue (0xddddff) as the background.
c2.setPlotArea(20, 0, 250, 255, 0xddddff);
// Add a custom text label at the top left corner of the left bar chart
c2.addText(20, 0, "Male", "Times New Roman Bold Italic", 12, 0x7070a0);
// Add the pale blue (0xaaaaff) bar chart layer using the male data
BarLayer maleLayer = c2.addBarLayer(male, 0xaaaaff, "Male");
// Swap the axis so that the bars are drawn horizontally
c2.swapXY(true);
// Reverse the direction of the y-axis so it runs from right to left
c2.yAxis().setReverse();
// Set the bar to touch each others
maleLayer.setBarGap(Chart.TouchBar);
// Set the border style of the bars to 1 pixel 3D border
maleLayer.setBorderColor(-1, 1);
// Add a Transparent line layer to the chart using the female data. As it
// is Transparent, only the male bar chart can be seen. We need to put
// both male and female data in both left and right charts, because we
// want auto-scaling to produce the same scale for both chart.
c2.addLineLayer(female, Chart.Transparent);
// Set the y axis label font to Arial Bold
c2.yAxis().setLabelStyle("Arial Bold");
// Set the x-axis labels for tool tip purposes.
c2.xAxis().setLabels(labels);
// Hide the x-axis labels by setting them to Transparent. We only need to
// display the x-axis labels for the right chart.
c2.xAxis().setColors(0x000000, Chart.Transparent, -1, Chart.Transparent);
//=============================================================
// Use a MultiChart to contain both bar charts
//=============================================================
// Create a MultiChart object of size 590 x 320 pixels.
MultiChart m = new MultiChart(590, 320);
// Add a title to the chart using Arial Bold Italic font
m.addTitle("Demographics Hong Kong Year 2002", "Arial Bold Italic");
// Add another title at the bottom using Arial Bold Italic font
m.addTitle2(Chart.Bottom, "Population (in thousands)",
"Arial Bold Italic", 10);
// Put the right chart at (270, 25)
m.addChart(270, 25, c);
// Put the left chart at (0, 25)
m.addChart(0, 25, c2);
// Output the chart
viewer.Image = m.makeImage();
//include tool tip for the chart
viewer.ImageMap = m.getHTMLImageMap("clickable", "",
"title='{dataSetName} (Age {xLabel}): Population {value}K'");
}
//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'");
}
public void createChart(WinChartViewer viewer, double[] data, string img)
{
// The data for the chart
Chart.setLicenseCode("DEVP-2LSU-B4LX-YCTY-2DF2-77EE");
//double[] data = {16, 15, 9.7, 5.2, 3};
// double[] data1 = { Chart.NoValue, -131, 35, 46 };
// The labels for the chart
// string[] labels = _strLabel;
//int[] _colors = { 3394815, 0x33ccff, 0x33ccff, 0x33ccff, 28864 };
double dMax = NulltoZeroDouble(_dt_chart.Rows[_dt_chart.Rows.Count - 3][viewer.Name.Replace("chart_", "")]);
double dMin = NulltoZeroDouble(_dt_chart.Rows[_dt_chart.Rows.Count - 2][viewer.Name.Replace("chart_", "")]);
double dIncr = NulltoZeroDouble(_dt_chart.Rows[_dt_chart.Rows.Count - 1][viewer.Name.Replace("chart_", "")]);
// 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);
XYChart c = new XYChart(viewer.Width, viewer.Height);
c.setBorder(10);
// Add a title to the chart using 15 points Arial Italic. Set top/bottom
// margins to 12 pixels.
ChartDirector.TextBox title = c.addTitle(Chart.Top, _dt_chart.Rows[0][viewer.Name.Replace("chart_", "") + "_CNAME"].ToString(),
"Arial Bold", 12);
title.setMargin2(10, 10, 6, 12);
title.setPos(10, 3);
title.setSize(viewer.Width - 20, 30);
// 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(70, 50, c.getWidth() - 110, c.getHeight() - 100, 0xffffff,
-1, Chart.Transparent, c.dashLineColor(0xffffff, Chart.Transparent));
// Add a line layer for the pareto line
// ArrayMath li = new ArrayMath(data1);
ArrayMath am = new ArrayMath(data);
//LineLayer lineLayer = c.addLineLayer2();
//lineLayer.addDataSet(li.mul(_cnt / 100.0).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();
//lineLayer.setDataLabelFormat("{value}%");
// Add a multi-color bar layer using the given data
BarLayer barLayer = c.addBarLayer3(am.mul(_cnt / 100.0).result(), _colors);
barLayer.setBorderColor(Chart.Transparent);
barLayer.setAggregateLabelStyle();
c.xAxis().setLabelStyle("Arial Bold", 11);
c.yAxis().setLabelStyle("Arial Bold", 11);
// c.yAxis2().setLabelStyle("Arial Bold", 9);
// Set the labels on the x axis.
c.xAxis().setLabels(_strLabel);
// Set the secondary (right) y-axis scale as 0 - 100 with a tick every 20
// units
c.yAxis().setLinearScale(dMin, dMax, dIncr);
// c.yAxis2().setLinearScale(-140, 60, 20);
// Set the format of the secondary (right) y-axis label to include a
// percentage sign
// c.yAxis2().setLabelFormat("{value}%");
// Set the format of the primary y-axis label foramt to show no decimal
// point
c.yAxis().setLabelFormat("{value|0}");
c.setNumberFormat(',');
// Output the chart
viewer.Chart = c;
}
public void createChart4(WinChartViewer viewer, string img)
{
// The data for the chart
Chart.setLicenseCode("DEVP-2LSU-B4LX-YCTY-2DF2-77EE");
double[] data = data_w4;
// The labels for the chart
string[] labels = label_w4;
// 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);
XYChart c = new XYChart(viewer.Width, viewer.Height);
c.setBorder(10);
// 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(Chart.Top, _txtTit4,
"Arial Bold", 12, 0xffffff, 0x1c86ee);
title.setMargin2(10, 10, 6, 12);
title.setPos(10, 3);
title.setSize(viewer.Width - 20, 30);
// 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));
c.setPlotArea(50, 50, c.getWidth() - 110, c.getHeight() - 250, 0xf4f4f4,
-1, Chart.Transparent, c.dashLineColor(0xffffff, Chart.Transparent));
// 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
ArrayMath li = new ArrayMath(lineData.result());
ArrayMath am = new ArrayMath(data);
//lineLayer.addDataSet(li.mul(_cnt / 100.0).result(), 0x0000ff).setDataSymbol(
// Chart.CircleShape, 9, 0x0000ff, 0x0000ff);
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.addBarLayer(data, 0xfc8a8a);
// BarLayer barLayer = c.addBarLayer(am.mul(_cnt / 100.0).result(), 0xfc8a8a);
// Set soft lighting for the bars with light direction from the right
barLayer.setBorderColor(Chart.Transparent, Chart.softLighting(Chart.Right
));
c.xAxis().setLabelStyle("Arial Bold", 8).setFontAngle(70);
c.yAxis().setLabelStyle("Arial Bold", 9);
c.yAxis2().setLabelStyle("Arial Bold", 9);
// 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, 10);
// 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().setLinearScale(0, 1600, 160);
//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}");
c.setNumberFormat(',');
// 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.Chart = c;
// Include tool tip for the chart
// viewer.ImageMap = c.getHTMLImageMap("clickable");
}
