//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 value to display on the meter
double value = 85;
// Create an AugularMeter object of size 70 x 90 pixels, using black background with a 2
// pixel 3D depressed border.
AngularMeter m = new AngularMeter(70, 90, 0, 0, -2);
// Use white on black color palette for default text and line colors
m.setColors(Chart.whiteOnBlackPalette);
// Set the meter center at (10, 45), with radius 50 pixels, and span from 135 to 45
// degrees
m.setMeter(10, 45, 50, 135, 45);
// Set meter scale from 0 - 100, with the specified labels
m.setScale2(0, 100, new string[] { "E", " ", " ", " ", "F" });
// Set the angular arc and major tick width to 2 pixels
m.setLineWidth(2, 2);
// Add a red zone at 0 - 15
m.addZone(0, 15, 0xff3333);
// Add an icon at (25, 35)
m.addText(25, 35, "<*img=gas.gif*>");
// Add a yellow (ffff00) pointer at the specified value
m.addPointer(value, 0xffff00);
// Output the chart
viewer.Chart = m;
}
//Main code for creating charts
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The data for the pyramid chart
double[] data = { 156, 123, 211, 179 };
// The colors for the pyramid layers
int[] colors = { 0x66aaee, 0xeebb22, 0xcccccc, 0xcc88ff };
// The layer gap
double gap = chartIndex * 0.01;
// Create a PyramidChart object of size 200 x 200 pixels, with white (ffffff) background
// and grey (888888) border
PyramidChart c = new PyramidChart(200, 200, 0xffffff, 0x888888);
// Set the pyramid center at (100, 100), and width x height to 60 x 120 pixels
c.setPyramidSize(100, 100, 60, 120);
// Set the layer gap
c.addTitle("Gap = " + gap, "Arial Italic", 15);
c.setLayerGap(gap);
// Set the elevation to 15 degrees
c.setViewAngle(15);
// Set the pyramid data
c.setData(data);
// Set the layer colors to the given colors
c.setColors2(Chart.DataColor, colors);
// 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 pyramid chart
double[] data = { 156, 123, 211, 179 };
// The labels for the pyramid chart
string[] labels = { "Funds", "Bonds", "Stocks", "Cash" };
// Create a PyramidChart object of size 360 x 360 pixels
PyramidChart c = new PyramidChart(360, 360);
// Set the pyramid center at (180, 180), and width x height to 150 x 180 pixels
c.setPyramidSize(180, 180, 150, 300);
// Set the pyramid data and labels
c.setData(data, labels);
// Add labels at the center of the pyramid layers using Arial Bold font. The labels will
// have two lines showing the layer name and percentage.
c.setCenterLabel("{label}\n{percent}%", "Arial Bold");
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{label}: US$ {value}M ({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 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 450 x 270 pixels
PieChart c = new PieChart(450, 270);
// Set the center of the pie at (150, 100) and the radius to 80 pixels
c.setPieSize(150, 135, 100);
// add a legend box where the top left corner is at (330, 50)
c.addLegend(330, 60);
// modify the sector label format to show percentages only
c.setLabelFormat("{percent}%");
// Set the pie data and the pie labels
c.setData(data, labels);
// Use rounded edge shading, with a 1 pixel white (FFFFFF) border
c.setSectorStyle(Chart.RoundedEdgeShading, 0xffffff, 1);
// 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 charts
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The data for the pyramid chart
double[] data = { 156, 123, 211, 179 };
// The semi-transparent colors for the pyramid layers
int[] colors = { 0x400000cc, 0x4066aaee, 0x40ffbb00, 0x40ee6622 };
// The rotation angle
int angle = chartIndex * 15;
// Create a PyramidChart object of size 200 x 200 pixels, with white (ffffff) background
// and grey (888888) border
PyramidChart c = new PyramidChart(200, 200, 0xffffff, 0x888888);
// Set the pyramid center at (100, 100), and width x height to 60 x 120 pixels
c.setPyramidSize(100, 100, 60, 120);
// Set the elevation to 15 degrees and use the given rotation angle
c.addTitle("Rotation = " + angle, "Arial Italic", 15);
c.setViewAngle(15, angle);
// Set the pyramid data
c.setData(data);
// Set the layer colors to the given colors
c.setColors2(Chart.DataColor, colors);
// Leave 1% gaps between layers
c.setLayerGap(0.01);
// 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 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 360 x 300 pixels
PieChart c = new PieChart(360, 300);
// Set the center of the pie at (180, 140) and the radius to 100 pixels
c.setPieSize(180, 140, 100);
// Set the pie data and the pie labels
c.setData(data, labels);
// 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 chartIndex is unused because this demo only has 1 chart.
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The value to display on the meter
double value = 66.77;
// Create an LinearMeter object of size 70 x 240 pixels with a very light grey
// (0xeeeeee) background, and a rounded 3-pixel thick light grey (0xbbbbbb) border
LinearMeter m = new LinearMeter(70, 240, 0xeeeeee, 0xbbbbbb);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// Set the scale region top-left corner at (28, 18), with size of 20 x 205 pixels. The
// scale labels are located on the left (default - implies vertical meter).
m.setMeter(28, 18, 20, 205);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Add a 5-pixel thick smooth color scale to the meter at x = 54 (right of meter scale)
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xffff00, 100,
0xff0000 };
m.addColorScale(smoothColorScale, 54, 5);
// Add a light blue (0x0088ff) bar from 0 to the data value with glass effect and 4
// pixel rounded corners
m.addBar(0, value, 0x0088ff, Chart.glassEffect(Chart.NormalGlare, Chart.Left), 4);
// Output the chart
viewer.Chart = m;
}
//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 chart
double[] data = { 90, 60, 65, 75, 40 };
// The labels for the chart
string[] labels = { "Speed", "Reliability", "Comfort", "Safety", "Efficiency" };
// Create a PolarChart object of size 450 x 350 pixels
PolarChart c = new PolarChart(450, 350);
// Set center of plot area at (225, 185) with radius 150 pixels
c.setPlotArea(225, 185, 150);
// Add an area layer to the polar chart
c.addAreaLayer(data, 0x9999ff);
// Set the labels to the angular axis as spokes
c.angularAxis().setLabels(labels);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", "title='{label}: score = {value}'")
;
}
//
// Initialize the WPFChartViewer
//
private void initChartViewer(WPFChartViewer viewer)
{
// WPFChartViewer is set up in XAML, so no init code here.
// Initially set the mouse usage to "Pointer" mode (Drag to Scroll)
pointerPB.IsChecked = true;
}
//
// Draw track cursor when mouse is moving over plotarea
//
private void WPFChartViewer1_MouseMovePlotArea(object sender, MouseEventArgs e)
{
WPFChartViewer viewer = (WPFChartViewer)sender;
trackLineLegend((XYChart)viewer.Chart, viewer.PlotAreaMouseX);
viewer.updateDisplay();
}
//
// Draw track cursor when mouse is moving over plotarea
//
private void WPFChartViewer1_MouseMovePlotArea(object sender, MouseEventArgs e)
{
WPFChartViewer viewer = (WPFChartViewer)sender;
trackFinance((MultiChart)viewer.Chart, viewer.PlotAreaMouseX);
viewer.updateDisplay();
}
//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 value to display on the meter
double value = 75.35;
// Create an LinearMeter object of size 260 x 66 pixels with a very light grey
// (0xeeeeee) background, and a rounded 3-pixel thick light grey (0xaaaaaa) border
LinearMeter m = new LinearMeter(260, 66, 0xeeeeee, 0xaaaaaa);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// Set the scale region top-left corner at (18, 24), with size of 222 x 20 pixels. The
// scale labels are located on the top (implies horizontal meter)
m.setMeter(18, 24, 222, 20, Chart.Top);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Add a 5-pixel thick smooth color scale to the meter at y = 48 (below the meter scale)
double[] smoothColorScale = { 0, 0x0000ff, 25, 0x0088ff, 50, 0x00ff00, 75, 0xffff00, 100,
0xff0000 };
m.addColorScale(smoothColorScale, 48, 5);
// Add a light blue (0x0088ff) bar from 0 to the data value with glass effect and 4
// pixel rounded corners
m.addBar(0, value, 0x0088ff, Chart.glassEffect(Chart.NormalGlare, Chart.Top), 4);
// Output the chart
viewer.Chart = m;
}
//
// Draw the full thumbnail chart and display it in the given ViewPortControl
//
private void drawFullChart(WPFViewPortControl vpc, WPFChartViewer viewer)
{
// Create an XYChart object of the same size as the Viewport Control
XYChart c = new XYChart((int)vpc.ActualWidth, (int)vpc.ActualHeight);
// Set the plotarea to cover the entire chart. Disable grid lines by setting their colors
// to transparent. Set 4 quadrant coloring, where the colors of the quadrants alternate
// between lighter and deeper grey (dddddd/eeeeee).
c.setPlotArea(0, 0, c.getWidth() - 1, c.getHeight() - 1, -1, -1, 0xff0000, Chart.Transparent,
Chart.Transparent).set4QBgColor(0xdddddd, 0xeeeeee, 0xdddddd, 0xeeeeee, 0x000000);
// Set 4 quadrant mode, with both x and y axes symetrical around the origin
c.setAxisAtOrigin(Chart.XYAxisAtOrigin, Chart.XAxisSymmetric + Chart.YAxisSymmetric);
// The x and y axis scales reflect the full range of the view port
c.xAxis().setLinearScale(viewer.getValueAtViewPort("x", 0), viewer.getValueAtViewPort("x", 1),
Chart.NoValue);
c.yAxis().setLinearScale(viewer.getValueAtViewPort("y", 0), viewer.getValueAtViewPort("y", 1),
Chart.NoValue);
// Add scatter layer, using 3 pixels red (ff33333) X shape symbols
c.addScatterLayer(dataX0, dataY0, "Group A", Chart.Cross2Shape(), 3, 0xff3333, 0xff3333);
// Add scatter layer, using 3 pixels green (33ff33) circle symbols
c.addScatterLayer(dataX1, dataY1, "Group B", Chart.CircleShape, 3, 0x33ff33, 0x33ff33);
// Add scatter layer, using 3 pixels blue (3333ff) triangle symbols
c.addScatterLayer(dataX2, dataY2, "Group C", Chart.TriangleSymbol, 3, 0x3333ff, 0x3333ff);
// Set the chart image to the ViewPortControl
vpc.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 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 250 x 250 pixels
XYChart c = new XYChart(250, 250);
// Set the plotarea at (30, 20) and of size 200 x 200 pixels
c.setPlotArea(30, 20, 200, 200);
// Add an area chart layer using the given data
c.addAreaLayer(data);
// 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);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Hour {xLabel}: Traffic {value} GBytes'");
}
//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 value to display on the meter
double value = 74.35;
// Create an LinearMeter object of size 70 x 240 pixels with a very light grey
// (0xeeeeee) background, and a rounded 3-pixel thick light grey (0xcccccc) border
LinearMeter m = new LinearMeter(70, 240, 0xeeeeee, 0xcccccc);
m.setRoundedFrame(Chart.Transparent);
m.setThickFrame(3);
// Set the scale region top-left corner at (28, 18), with size of 20 x 205 pixels. The
// scale labels are located on the left (default - implies vertical meter).
m.setMeter(28, 18, 20, 205);
// Set meter scale from 0 - 100, with a tick every 10 units
m.setScale(0, 100, 10);
// Add a smooth color scale to the meter
double[] smoothColorScale = { 0, 0x6666ff, 25, 0x00bbbb, 50, 0x00ff00, 75, 0xffff00, 100,
0xff0000 };
m.addColorScale(smoothColorScale);
// Add a blue (0x0000cc) pointer at the specified value
m.addPointer(value, 0x0000cc);
// Output the chart
viewer.Chart = m;
}
//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[] data = { 85, 156, 179.5, 211, 123 };
// The labels for the bar chart
string[] labels = { "Mon", "Tue", "Wed", "Thu", "Fri" };
// Create a XYChart object of size 250 x 250 pixels
XYChart c = new XYChart(250, 250);
// Set the plotarea at (30, 20) and of size 200 x 200 pixels
c.setPlotArea(30, 20, 200, 200);
// Add a bar chart layer using the given data
c.addBarLayer(data);
// Set the labels on the x axis.
c.xAxis().setLabels(labels);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", "title='{xLabel}: {value} GBytes'")
;
}
//Main code for creating charts
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The data for the chart
double[] data = { 100, 125, 260, 147, 67 };
string[] labels = { "Mon", "Tue", "Wed", "Thu", "Fri" };
// Create a XYChart object of size 200 x 180 pixels
XYChart c = new XYChart(200, 180);
// Set the plot area at (30, 10) and of size 140 x 130 pixels
c.setPlotArea(30, 10, 140, 130);
// Ise log scale axis if required
if (chartIndex == 1)
{
c.yAxis().setLogScale3();
}
// Set the labels on the x axis
c.xAxis().setLabels(labels);
// Add a color bar layer using the given data. Use a 1 pixel 3D border for the bars.
c.addBarLayer3(data).setBorderColor(-1, 1);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Mileage on {xLabel}: {value} miles'");
}
/// <summary>
/// Creates a dummy chart to show an error message.
/// </summary>
/// <param name="viewer">The WPFChartViewer to display the error message.</param>
/// <param name="msg">The error message</param>
protected void errMsg(WPFChartViewer viewer, string msg)
{
MultiChart m = new MultiChart(400, 200);
m.addTitle2(Chart.Center, msg, "Arial", 10).setMaxWidth(m.getWidth());
viewer.Chart = m;
}
//
// Update other controls when the view port changed
//
private void updateControls(WPFChartViewer viewer)
{
// Update the scroll bar to reflect the view port position and width.
hScrollBar1.Value = viewer.ViewPortLeft;
hScrollBar1.Maximum = 1 - viewer.ViewPortWidth;
hScrollBar1.LargeChange = hScrollBar1.ViewportSize = viewer.ViewPortWidth;
hScrollBar1.SmallChange = hScrollBar1.LargeChange * 0.1;
}
//
// Initialize the WinChartViewer
//
private void initChartViewer(WPFChartViewer viewer)
{
// Enable mouse wheel zooming
viewer.MouseWheelZoomRatio = 1.1;
// Initially set the mouse usage to "Pointer" mode (Drag to Scroll mode)
pointerPB.IsChecked = true;
}
//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 chart
double[] dataY0 = { 4, 4.5, 5, 5.25, 5.75, 5.25, 5, 4.5, 4, 3, 2.5, 2.5 };
DateTime[] dataX0 = { new DateTime(1997, 1, 1), new DateTime(1998, 6, 25), new DateTime(
1999, 9, 6), new DateTime(2000, 2, 6), new DateTime(2000, 9,21), new DateTime(2001,
3, 4), new DateTime(2001, 6, 8), new DateTime(2002,2, 4),new DateTime(2002, 5, 19
), new DateTime(2002, 8, 16), new DateTime(2002, 12, 1), new DateTime(2003, 1, 1) };
double[] dataY1 = { 7, 6.5, 6, 5, 6.5, 7, 6, 5.5, 5, 4, 3.5, 3.5 };
DateTime[] dataX1 = { new DateTime(1997, 1, 1), new DateTime(1997, 7, 1), new DateTime(
1997, 12, 1), new DateTime(1999, 1,15), new DateTime(1999, 6,9), new DateTime(
2000, 3, 3), new DateTime(2000, 8,13), new DateTime(2001, 5,5), new DateTime(2001,
9, 16), new DateTime(2002, 3, 16), new DateTime(2002,6, 1),new DateTime(2003, 1, 1
) };
// Create a XYChart object of size 500 x 270 pixels, with a pale blue (e0e0ff)
// background, black border, 1 pixel 3D border effect and rounded corners
XYChart c = new XYChart(600, 300, 0xe0e0ff, 0x000000, 1);
c.setRoundedFrame();
// Set the plotarea at (55, 60) and of size 520 x 200 pixels, with white (ffffff)
// background. Set horizontal and vertical grid lines to grey (cccccc).
c.setPlotArea(50, 60, 525, 200, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
// Add a legend box at (55, 32) (top of the chart) with horizontal layout. Use 9pt Arial
// Bold font. Set the background and border color to Transparent.
c.addLegend(55, 32, false, "Arial Bold", 9).setBackground(Chart.Transparent);
// Add a title box to the chart using 15pt Times Bold Italic font. The text is white
// (ffffff) on a deep blue (000088) background, with soft lighting effect from the right
// side.
c.addTitle("Long Term Interest Rates", "Times New Roman Bold Italic", 15, 0xffffff
).setBackground(0x000088, -1, Chart.softLighting(Chart.Right));
// Set the y axis label format to display a percentage sign
c.yAxis().setLabelFormat("{value}%");
// Add a red (ff0000) step line layer to the chart and set the line width to 2 pixels
StepLineLayer layer0 = c.addStepLineLayer(dataY0, 0xff0000, "Country AAA");
layer0.setXData(dataX0);
layer0.setLineWidth(2);
// Add a blue (0000ff) step line layer to the chart and set the line width to 2 pixels
StepLineLayer layer1 = c.addStepLineLayer(dataY1, 0x0000ff, "Country BBB");
layer1.setXData(dataX1);
layer1.setLineWidth(2);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{dataSetName} change to {value}% on {x|mmm dd, yyyy}'");
}
//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}'");
}
//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 XY points for the scatter chart
double[] dataX = { 150, 400, 300, 1500, 800 };
double[] dataY = { 0.6, 8, 5.4, 2, 4 };
// The labels for the points
string[] labels = { "Nano\n100", "SpeedTron\n200 Lite", "SpeedTron\n200",
"Marathon\nExtra", "Marathon\n2000" };
// Create a XYChart object of size 450 x 400 pixels
XYChart c = new XYChart(450, 400);
// Set the plotarea at (55, 40) and of size 350 x 300 pixels, with a light grey border
// (0xc0c0c0). Turn on both horizontal and vertical grid lines with light grey color
// (0xc0c0c0)
c.setPlotArea(55, 40, 350, 300, 0xffffff, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a title to the chart using 18pt Times Bold Itatic font.
c.addTitle("Product Comparison Chart", "Times New Roman Bold Italic", 18);
// Add a title to the y axis using 12pt Arial Bold Italic font
c.yAxis().setTitle("Capacity (tons)", "Arial Bold Italic", 12);
// Add a title to the x axis using 12pt Arial Bold Italic font
c.xAxis().setTitle("Range (miles)", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.xAxis().setWidth(3);
c.yAxis().setWidth(3);
// Add the data as a scatter chart layer, using a 15 pixel circle as the symbol
ScatterLayer layer = c.addScatterLayer(dataX, dataY, "", Chart.GlassSphereShape, 15,
0xff3333, 0xff3333);
// Add labels to the chart as an extra field
layer.addExtraField(labels);
// Set the data label format to display the extra field
layer.setDataLabelFormat("{field0}");
// Use 8pt Arial Bold to display the labels
ChartDirector.TextBox textbox = layer.setDataLabelStyle("Arial Bold", 8);
// Set the background to purple with a 1 pixel 3D border
textbox.setBackground(0xcc99ff, Chart.Transparent, 1);
// Put the text box 4 pixels to the right of the data point
textbox.setAlignment(Chart.Left);
textbox.setPos(4, 0);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Range = {x} miles, Capacity = {value} tons'");
}
//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)
{
// Data for the chart
double[] data0 = { 100, 125, 245, 147, 67, 96, 160, 145, 97, 167, 220, 125 };
double[] data1 = { 85, 156, 179, 211, 123, 225, 127, 99, 111, 260, 175, 156 };
double[] data2 = { 97, 87, 56, 267, 157, 157, 67, 156, 77, 87, 197, 87 };
string[] labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sept",
"Oct", "Nov", "Dec" };
// Create a XYChart object of size 560 x 280 pixels.
XYChart c = new XYChart(560, 280);
// Add a title to the chart using 14pt Arial Bold Italic font
c.addTitle(" Average Weekly Network Load", "Arial Bold Italic", 14);
// Set the plotarea at (50, 50) and of 500 x 200 pixels in size. Use alternating light
// grey (f8f8f8) / white (ffffff) background. Set border to transparent and use grey
// (CCCCCC) dotted lines as horizontal and vertical grid lines
c.setPlotArea(50, 50, 500, 200, 0xffffff, 0xf8f8f8, Chart.Transparent, c.dashLineColor(
0xcccccc, Chart.DotLine), c.dashLineColor(0xcccccc, Chart.DotLine));
// Add a legend box at (50, 22) using horizontal layout. Use 10 pt Arial Bold Italic
// font, with transparent background
c.addLegend(50, 22, false, "Arial Bold Italic", 10).setBackground(Chart.Transparent);
// Set the x axis labels
c.xAxis().setLabels(labels);
// Draw the ticks between label positions (instead of at label positions)
c.xAxis().setTickOffset(0.5);
// Add axis title
c.yAxis().setTitle("Throughput (MBytes Per Hour)");
// Set axis line width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// Add a multi-bar layer with 3 data sets
BarLayer layer = c.addBarLayer2(Chart.Side);
layer.addDataSet(data0, 0xff0000, "Server #1");
layer.addDataSet(data1, 0x00ff00, "Server #2");
layer.addDataSet(data2, 0x0000ff, "Server #3");
// Set bar shape to circular (cylinder)
layer.setBarShape(Chart.CircleShape);
// Configure the bars within a group to touch each others (no gap)
layer.setBarGap(0.2, Chart.TouchBar);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{dataSetName} on {xLabel}: {value} MBytes/hour'");
}
//
// Draw the chart and display it in the given viewer.
//
private void drawChart2(WPFChartViewer viewer)
{
// Create an XYChart object 600 x 270 pixels in size, with light grey (f4f4f4)
// background, black (000000) border, 1 pixel raised effect, and with a rounded frame.
XYChart c = new XYChart(600, 270, 0xf4f4f4, 0x000000, 1);
c.setRoundedFrame(0xffffff);
// Set the plotarea at (55, 62) and of size 520 x 175 pixels. Use white (ffffff)
// background. Enable both horizontal and vertical grids by setting their colors to
// grey (cccccc). Set clipping mode to clip the data lines to the plot area.
c.setPlotArea(55, 62, 520, 175, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
c.setClipping();
// Add a title to the chart using 15 pts Times New Roman Bold Italic font, with a light
// grey (dddddd) background, black (000000) border, and a glass like raised effect.
c.addTitle("Fast Fourier Transform", "Times New Roman Bold Italic", 15
).setBackground(0xdddddd, 0x000000, Chart.glassEffect());
// Add a legend box at the top of the plot area with 9pts Arial Bold font. We set the
// legend box to the same width as the plot area and use grid layout (as opposed to
// flow or top/down layout). This distributes the 3 legend icons evenly on top of the
// plot area.
LegendBox b = c.addLegend2(55, 33, 1, "Arial Bold", 9);
b.setBackground(Chart.Transparent, Chart.Transparent);
b.setWidth(520);
// Configure the y-axis with a 10pts Arial Bold axis title
c.yAxis().setTitle("Magnitude", "Arial Bold", 10);
// Configure the x-axis to auto-scale with at least 75 pixels between major tick and 15
// pixels between minor ticks. This shows more minor grid lines on the chart.
c.xAxis().setTickDensity(75, 15);
// Set the axes width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// c.yAxis().setDateScale(0, 600);
// Set the x-axis label format
//c.xAxis().setLabelFormat("{0:0.##}");
// Create a line layer to plot the lines
LineLayer layer = c.addLineLayer2();
// Perform FFT if the option is chosen
if (this.ShowFFT)
{
this.fftBuffer = this.computeNormalizedFFT(this.fftLength, this.fftOutLength);
}
// Add data to the layer
layer.addDataSet(this.fftBuffer, 0xff0000);
// Assign the chart to the WinChartViewer
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 pie chart
double[] data = { 72, 18, 15, 12 };
// The depths for the sectors
double[] depths = { 30, 20, 10, 10 };
// The labels for the pie chart
string[] labels = { "Sunny", "Cloudy", "Rainy", "Snowy" };
// The icons for the sectors
string[] icons = { "sun.png", "cloud.png", "rain.png", "snowy.png" };
// Create a PieChart object of size 400 x 300 pixels
PieChart c = new PieChart(400, 300);
// Use the semi-transparent palette for this chart
c.setColors(Chart.transparentPalette);
// Set the background to metallic light blue (CCFFFF), with a black border and 1 pixel
// 3D border effect,
c.setBackground(Chart.metalColor(0xccccff), 0x000000, 1);
// Set donut center at (200, 175), and outer/inner radii as 100/50 pixels
c.setDonutSize(200, 175, 100, 50);
// Add a title box using 15pt Times Bold Italic font and metallic blue (8888FF)
// background color
c.addTitle("Weather Profile in Wonderland", "Times New Roman Bold Italic", 15
).setBackground(Chart.metalColor(0x8888ff));
// Set the pie data and the pie labels
c.setData(data, labels);
// Add icons to the chart as a custom field
c.addExtraField(icons);
// Configure the sector labels using CDML to include the icon images
c.setLabelFormat(
"<*block,valign=absmiddle*><*img={field0}*> <*block*>{label}\n{percent}%<*/*><*/*>")
;
// Draw the pie in 3D with variable 3D depths
c.set3D2(depths);
// Set the start angle to 225 degrees may improve layout when the depths of the sector
// are sorted in descending order, because it ensures the tallest sector is at the back.
c.setStartAngle(225);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{label}: {value} days ({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 chart
double[] data0 = { 100, 100, 100, 100, 100 };
double[] data1 = { 90, 85, 85, 80, 70 };
double[] data2 = { 80, 65, 65, 75, 45 };
// The labels for the chart
string[] labels = { "Population<*br*><*font=Arial*>6 millions",
"GDP<*br*><*font=Arial*>120 billions", "Export<*br*><*font=Arial*>25 billions",
"Import<*br*><*font=Arial*>24 billions",
"Investments<*br*><*font=Arial*>20 billions" };
// Create a PolarChart object of size 480 x 460 pixels. Set background color to silver,
// with 1 pixel 3D border effect
PolarChart c = new PolarChart(480, 460, Chart.silverColor(), 0x000000, 1);
// Add a title to the chart using 15pt Times Bold Italic font. The title text is white
// (ffffff) on a deep green (008000) background
c.addTitle("Economic Growth", "Times New Roman Bold Italic", 15, 0xffffff
).setBackground(0x008000);
// Set plot area center at (240, 270), with 150 pixels radius
c.setPlotArea(240, 270, 150);
// Use 1 pixel width semi-transparent black (c0000000) lines as grid lines
c.setGridColor(unchecked ((int)0xc0000000), 1, unchecked ((int)0xc0000000), 1);
// Add a legend box at top-center of plot area (240, 35) using horizontal layout. Use
// 10pt Arial Bold font, with silver background and 1 pixel 3D border effect.
LegendBox b = c.addLegend(240, 35, false, "Arial Bold", 10);
b.setAlignment(Chart.TopCenter);
b.setBackground(Chart.silverColor(), Chart.Transparent, 1);
// Add area layers of different colors to represent the data
c.addAreaLayer(data0, 0xcc8880, "Year 2004");
c.addAreaLayer(data1, 0xffd080, "Year 1994");
c.addAreaLayer(data2, 0xa0bce0, "Year 1984");
// Set the labels to the angular axis as spokes.
c.angularAxis().setLabels(labels);
// Set radial axis from 0 - 100 with a tick every 20 units
c.radialAxis().setLinearScale(0, 100, 20);
// Just show the radial axis as a grid line. Hide the axis labels by setting the label
// color to Transparent
c.radialAxis().setColors(unchecked ((int)0xc0000000), Chart.Transparent);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Current {label}: {value}% in {dataSetName}'");
}
//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)
{
// Use random table to generate a random series. The random table is set to 1 col x 51
// rows, with 9 as the seed
RanTable rantable = new RanTable(9, 1, 51);
// Set the 1st column to start from 100, with changes between rows from -5 to +5
rantable.setCol(0, 100, -5, 5);
// Get the 1st column of the random table as the data set
double[] data = rantable.getCol(0);
// Create a XYChart object of size 600 x 300 pixels
XYChart c = new XYChart(600, 300);
// Set the plotarea at (50, 35) and of size 500 x 240 pixels. Enable both the horizontal
// and vertical grids by setting their colors to grey (0xc0c0c0)
c.setPlotArea(50, 35, 500, 240).setGridColor(0xc0c0c0, 0xc0c0c0);
// Add a title to the chart using 18 point Times Bold Itatic font.
c.addTitle("LOWESS Generic Curve Fitting Algorithm", "Times New Roman Bold Italic", 18);
// Set the y axis line width to 3 pixels
c.yAxis().setWidth(3);
// Add a title to the x axis using 12pt Arial Bold Italic font
c.xAxis().setTitle("Server Load (TPS)", "Arial Bold Italic", 12);
// Set the x axis line width to 3 pixels
c.xAxis().setWidth(3);
// Set the x axis scale from 0 - 50, with major tick every 5 units and minor tick every
// 1 unit
c.xAxis().setLinearScale(0, 50, 5, 1);
// Add a blue layer to the chart
LineLayer layer = c.addLineLayer2();
// Add a red (0x80ff0000) data set to the chart with square symbols
layer.addDataSet(data, unchecked ((int)0x80ff0000)).setDataSymbol(Chart.SquareSymbol);
// Set the line width to 2 pixels
layer.setLineWidth(2);
// Use lowess for curve fitting, and plot the fitted data using a spline layer with line
// width set to 3 pixels
c.addSplineLayer(new ArrayMath(data).lowess().result(), 0x0000ff).setLineWidth(3);
// Set zero affinity to 0 to make sure the line is displayed in the most detail scale
c.yAxis().setAutoScale(0, 0, 0);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", "title='({x}, {value|2})'");
}
//
// Update the image map
//
private void updateImageMap(WPFChartViewer viewer)
{
// Include tool tip for the chart
if ((viewer.ImageMap == null) && (viewer.Chart != null))
{
viewer.ImageMap = viewer.Chart.getHTMLImageMap("clickable", "",
"title='[{dataSetName}] Alpha = {x}, Beta = {value}'");
}
}
//
// Update the image map
//
private void updateImageMap(WPFChartViewer viewer)
{
// Include tool tip for the chart
if (viewer.ImageMap == null)
{
viewer.ImageMap = viewer.Chart.getHTMLImageMap("", "",
"title='[{dataSetName}] {x|mmm dd, yyyy}: USD {value|2}'");
}
}
