//
// 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 img is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, string img)
{
// The XYZ points for the bubble chart
double[] dataX0 = { 170, 300, 1000, 1700 };
double[] dataY0 = { 16, 69, 16, 75 };
double[] dataZ0 = { 52, 105, 88, 140 };
double[] dataX1 = { 500, 1000, 1300 };
double[] dataY1 = { 40, 58, 85 };
double[] dataZ1 = { 140, 202, 84 };
// Create a XYChart object of size 540 x 480 pixels
XYChart c = new XYChart(540, 480);
// Set the plotarea at (70, 65) and of size 400 x 350 pixels. Turn on
// both horizontal and vertical grid lines with light grey color
// (0xc0c0c0)
c.setPlotArea(70, 65, 400, 350, -1, -1, Chart.Transparent, 0xc0c0c0, -1);
// Add a legend box at (70, 30) (top of the chart) with horizontal
// layout. Use 12 pts Times Bold Italic font. Set the background and
// border color to Transparent.
c.addLegend(70, 30, false, "Times New Roman Bold Italic", 12
).setBackground(Chart.Transparent);
// Add a title to the chart using 18 pts Times Bold Itatic font.
c.addTitle("Product Comparison Chart", "Times New Roman Bold Italic", 18)
;
// Add titles to the axes using 12 pts Arial Bold Italic font
c.yAxis().setTitle("Capacity (tons)", "Arial Bold Italic", 12);
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 (dataX0, dataY0) as a scatter layer with red (ff3333) glass
// spheres, where the sphere size is modulated by dataZ0. This creates a
// bubble effect.
c.addScatterLayer(dataX0, dataY0, "Technology AAA",
Chart.GlassSphere2Shape, 15, 0xff3333).setSymbolScale(dataZ0);
// Add (dataX1, dataY1) as a scatter layer with blue (0000ff) glass
// spheres, where the sphere size is modulated by dataZ1. This creates a
// bubble effect.
c.addScatterLayer(dataX1, dataY1, "Technology BBB",
Chart.GlassSphere2Shape, 15, 0x0000ff).setSymbolScale(dataZ1);
// Output the chart
viewer.Image = c.makeImage();
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='[{dataSetName}] Range = {x} miles, Capacity = {value} " +
"tons, Length = {z} meters'");
}
//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 XYZ points for the bubble chart
double[] dataX0 = { 150, 300, 1000, 1700 };
double[] dataY0 = { 12, 60, 25, 65 };
double[] dataZ0 = { 20, 50, 50, 85 };
double[] dataX1 = { 500, 1000, 1300 };
double[] dataY1 = { 35, 50, 75 };
double[] dataZ1 = { 30, 55, 95 };
// Create a XYChart object of size 450 x 420 pixels
XYChart c = new XYChart(450, 420);
// Set the plotarea at (55, 65) 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, 65, 350, 300, -1, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a legend box at (50, 30) (top of the chart) with horizontal layout. Use 12pt
// Times Bold Italic font. Set the background and border color to Transparent.
c.addLegend(50, 30, false, "Times New Roman Bold Italic", 12).setBackground(
Chart.Transparent);
// 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 (dataX0, dataY0) as a scatter layer with semi-transparent red (0x80ff3333) circle
// symbols, where the circle size is modulated by dataZ0. This creates a bubble effect.
c.addScatterLayer(dataX0, dataY0, "Technology AAA", Chart.CircleSymbol, 9,
unchecked ((int)0x80ff3333), unchecked ((int)0x80ff3333)).setSymbolScale(dataZ0);
// Add (dataX1, dataY1) as a scatter layer with semi-transparent green (0x803333ff)
// circle symbols, where the circle size is modulated by dataZ1. This creates a bubble
// effect.
c.addScatterLayer(dataX1, dataY1, "Technology BBB", Chart.CircleSymbol, 9,
unchecked ((int)0x803333ff), unchecked ((int)0x803333ff)).setSymbolScale(dataZ1);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='[{dataSetName}] Range = {x} miles, Capacity = {value} tons, Length = {z} " +
"meters'");
}
//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 XY points for the scatter chart
double[] dataX0 = { 10, 15, 6, 12, 14, 8, 13, 13, 16, 12, 10.5 };
double[] dataY0 = { 130, 150, 80, 110, 110, 105, 130, 115, 170, 125, 125 };
double[] dataX1 = { 6, 12, 4, 3.5, 7, 8, 9, 10, 12, 11, 8 };
double[] dataY1 = { 65, 80, 40, 45, 70, 80, 80, 90, 100, 105, 60 };
// Create a XYChart object of size 450 x 420 pixels
XYChart c = new XYChart(450, 420);
// Set the plotarea at (55, 65) 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, 65, 350, 300, -1, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a legend box at (50, 30) (top of the chart) with horizontal
// layout. Use 12 pts Times Bold Italic font. Set the background and
// border color to Transparent.
c.addLegend(50, 30, false, "Times New Roman Bold Italic", 12
).setBackground(Chart.Transparent);
// Add a title to the chart using 18 pts Times Bold Itatic font.
c.addTitle("Genetically Modified Predator",
"Times New Roman Bold Italic", 18);
// Add a title to the y axis using 12 pts Arial Bold Italic font
c.yAxis().setTitle("Length (cm)", "Arial Bold Italic", 12);
// Add a title to the x axis using 12 pts Arial Bold Italic font
c.xAxis().setTitle("Weight (kg)", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.xAxis().setWidth(3);
c.yAxis().setWidth(3);
// Add an orange (0xff9933) scatter chart layer, using 13 pixel diamonds
// as symbols
c.addScatterLayer(dataX0, dataY0, "Genetically Engineered",
Chart.DiamondSymbol, 13, 0xff9933);
// Add a green (0x33ff33) scatter chart layer, using 11 pixel triangles
// as symbols
c.addScatterLayer(dataX1, dataY1, "Natural", Chart.TriangleSymbol, 11,
0x33ff33);
// Output the chart
viewer.Image = c.makeImage();
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='[{dataSetName}] Weight = {x} kg, Length = {value} cm'");
}
//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 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 18 pts Times Bold Itatic font.
c.addTitle("Product Comparison Chart", "Times New Roman Bold Italic", 18)
;
// Add a title to the y axis using 12 pts Arial Bold Italic font
c.yAxis().setTitle("Capacity (tons)", "Arial Bold Italic", 12);
// Add a title to the x axis using 12 pts 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 8pts 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.Image = c.makeImage();
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Range = {x} miles, Capacity = {value} tons'");
}
//
// Draw the thumbnail chart in the WebViewPortControl
//
private void drawFullChart(RazorViewPortControl vp, RazorChartViewer viewer)
{
//
// For simplicity, in this demo, the data arrays are filled with hard coded data. In a real
// application, you may use a database or other data source to load up the arrays. As this is
// a small thumbnail chart, complete data may not be needed. For exmaple, if there are a
// million points, a random sample may already be sufficient for the thumbnail chart.
//
double[] dataX0 = { 10, 15, 6, -12, 14, -8, 13, -3, 16, 12, 10.5, -7, 3, -10, -5, 2, 5 };
double[] dataY0 = { 130, 150, 80, 110, -110, -105, -130, -15, -170, 125, 125, 60, 25, 150,
150, 15, 120 };
double[] dataX1 = { 6, 7, -4, 3.5, 7, 8, -9, -10, -12, 11, 8, -3, -2, 8, 4, -15, 15 };
double[] dataY1 = { 65, -40, -40, 45, -70, -80, 80, 10, -100, 105, 60, 50, 20, 170, -25, 50,
75 };
double[] dataX2 = { -10, -12, 11, 8, 6, 12, -4, 3.5, 7, 8, -9, 3, -13, 16, -7.5, -10, -15 };
double[] dataY2 = { 65, -80, -40, 45, -70, -80, 80, 90, -100, 105, 60, -75, -150, -40, 120,
-50, -30 };
// Create an XYChart object 120 x 120 pixels in size
XYChart c = new XYChart(120, 120);
// Set the plotarea to cover the entire chart and with no grid lines. Set 4 quadrant
// coloring, where the colors alternate between lighter and deeper grey (d8d8d8/eeeeee).
c.setPlotArea(0, 0, c.getWidth() - 1, c.getHeight() - 1, -1, -1, -1, Chart.Transparent
).set4QBgColor(0xd8d8d8, 0xeeeeee, 0xd8d8d8, 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 5 pixels red (ff33333) X shape symbols
c.addScatterLayer(dataX0, dataY0, "Group A", Chart.Cross2Shape(), 5, 0xff3333);
// Add scatter layer, using 5 pixels green (33ff33) circle symbols
c.addScatterLayer(dataX1, dataY1, "Group B", Chart.CircleShape, 5, 0x33ff33);
// Add scatter layer, using 5 pixels blue (3333ff) triangle symbols
c.addScatterLayer(dataX2, dataY2, "Group C", Chart.TriangleSymbol, 5, 0x3333ff);
// Output the chart
vp.Image = c.makeWebImage(Chart.PNG);
}
//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)
{
// Some ChartDirector built-in symbols
int[] symbols = { Chart.CircleShape, Chart.GlassSphereShape, Chart.GlassSphere2Shape,
Chart.SolidSphereShape, Chart.SquareShape, Chart.DiamondShape, Chart.TriangleShape,
Chart.RightTriangleShape, Chart.LeftTriangleShape, Chart.InvertedTriangleShape,
Chart.StarShape(3), Chart.StarShape(4), Chart.StarShape(5), Chart.StarShape(6),
Chart.StarShape(7), Chart.StarShape(8), Chart.StarShape(9), Chart.StarShape(10),
Chart.PolygonShape(5), Chart.Polygon2Shape(5), Chart.PolygonShape(6),
Chart.Polygon2Shape(6), Chart.Polygon2Shape(7), Chart.CrossShape(0.1),
Chart.CrossShape(0.2), Chart.CrossShape(0.3), Chart.CrossShape(0.4),
Chart.CrossShape(0.5), Chart.CrossShape(0.6), Chart.CrossShape(0.7),
Chart.Cross2Shape(0.1), Chart.Cross2Shape(0.2), Chart.Cross2Shape(0.3),
Chart.Cross2Shape(0.4), Chart.Cross2Shape(0.5), Chart.Cross2Shape(0.6),
Chart.Cross2Shape(0.7), Chart.ArrowShape(), Chart.ArrowShape(45), Chart.ArrowShape(
90, 0.5), Chart.ArrowShape(135, 0.5, 0.2), Chart.ArrowShape(180,0.3, 0.2, 0.3),
Chart.ArrowShape(225, 1, 0.5, 0.7),Chart.ArrowShape(270, 1, 0.5, 0.25),
Chart.ArrowShape(315, 0.5, 0.5, 0),Chart.ArrowShape(30, 0.5, 0.1, 0.6),
Chart.ArrowShape(210, 0.5, 0.1, 0.6),Chart.ArrowShape(330, 0.7, 0.1),
Chart.ArrowShape(150, 0.7, 0.1) };
// Create a XYChart object of size 500 x 450 pixels
XYChart c = new XYChart(500, 450);
// Set the plotarea at (55, 40) and of size 400 x 350 pixels, with a light grey border
// (0xc0c0c0). Turn on both horizontal and vertical grid lines with light grey color
// (0xc0c0c0)
c.setPlotArea(55, 40, 400, 350, -1, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a title to the chart using 18pt Times Bold Itatic font.
c.addTitle("Built-in Symbols", "Times New Roman Bold Italic", 18);
// Set the axes line width to 3 pixels
c.xAxis().setWidth(3);
c.yAxis().setWidth(3);
// Ensure the ticks are at least 1 unit part (integer ticks)
c.xAxis().setMinTickInc(1);
c.yAxis().setMinTickInc(1);
// Add each symbol as a separate scatter layer.
for (int i = 0; i < symbols.Length; ++i)
{
c.addScatterLayer(new double[] { i % 7 + 1.0 }, new double[] { (int)(i / 7 + 1.0) }, "",
symbols[i], 17);
}
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", "title='(x, y) = ({x}, {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 XY points for the scatter chart
double[] dataX = { 200, 400, 300, 250, 500 };
double[] dataY = { 40, 100, 50, 150, 250 };
// The custom symbols for the points
string[] symbols = { "@/images/robot1.png", "@/images/robot2.png", "@/images/robot3.png",
"@/images/robot4.png", "@/images/robot5.png" };
// 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, -1, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a title to the chart using 18pt Times Bold Itatic font.
c.addTitle("Battle Robots", "Times New Roman Bold Italic", 18);
// Add a title to the y axis using 12pt Arial Bold Italic font
c.yAxis().setTitle("Speed (km/s)", "Arial Bold Italic", 12);
// Add a title to the y axis using 12pt Arial Bold Italic font
c.xAxis().setTitle("Range (km)", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.xAxis().setWidth(3);
c.yAxis().setWidth(3);
// Add each point of the data as a separate scatter layer, so that they can have a
// different symbol
for (int i = 0; i < dataX.Length; ++i)
{
c.addScatterLayer(new double[] { dataX[i] }, new double[] { dataY[i] }).getDataSet(0
).setDataSymbol2(symbols[i]);
}
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Range = {x} km, Speed = {value} km/s'");
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// 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 XYChart object of size 450 x 540 pixels
XYChart c = new XYChart(450, 540);
// Add a title to the chart using 15 points Arial Italic font
c.addTitle(" Contour Chart with Scattered Data", "Arial Italic", 15);
// Set the plotarea at (65, 40) and of size 360 x 360 pixels. Use semi-transparent black
// (c0000000) for both horizontal and vertical grid lines
c.setPlotArea(65, 40, 360, 360, -1, -1, -1, unchecked ((int)0xc0000000), -1);
// Set x-axis and y-axis title using 12 points Arial Bold Italic font
c.xAxis().setTitle("X-Axis Title Place Holder", "Arial Bold Italic", 10);
c.yAxis().setTitle("Y-Axis Title Place Holder", "Arial Bold Italic", 10);
// Set x-axis and y-axis labels to use Arial Bold font
c.xAxis().setLabelStyle("Arial Bold");
c.yAxis().setLabelStyle("Arial Bold");
// When x-axis and y-axis color to transparent
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
// Add a scatter layer to the chart to show the position of the data points
c.addScatterLayer(dataX, dataY, "", Chart.Cross2Shape(0.2), 7, 0x000000);
// Add a contour layer using the given data
ContourLayer layer = c.addContourLayer(dataX, dataY, dataZ);
// Move the grid lines in front of the contour layer
c.getPlotArea().moveGridBefore(layer);
// Add a color axis (the legend) in which the top center is anchored at (245, 455). Set the
// length to 330 pixels and the labels on the top side.
ColorAxis cAxis = layer.setColorAxis(245, 455, Chart.TopCenter, 330, Chart.Top);
// Add a bounding box to the color axis using the default line color as border.
cAxis.setBoundingBox(Chart.Transparent, Chart.LineColor);
// Add a title to the color axis using 12 points Arial Bold Italic font
cAxis.setTitle("Color Legend Title Place Holder", "Arial Bold Italic", 10);
// Set color axis labels to use Arial Bold font
cAxis.setLabelStyle("Arial Bold");
// Set the color axis range as 0 to 20, with a step every 2 units
cAxis.setLinearScale(0, 20, 2);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
}
//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)
{
// XY points for the scatter chart
double[] dataX0 = { 10, 15, 6, -12, 14, -8, 13, -13, 16, 12, 10.5 };
double[] dataY0 = { 130, 150, 80, 110, -110, -105, -130, 115, -170, 125, 125 };
double[] dataX1 = { 6, 7, -4, 3.5, 7, 8, -9, -10, -12, 11, 8 };
double[] dataY1 = { 65, -40, -40, 45, -70, -80, 80, 10, -100, 105, 60 };
double[] dataX2 = { -10, -12, 11, 8, 6, 12, -4, 3.5, 7, 8, -9 };
double[] dataY2 = { 65, -80, -40, 45, -70, -80, 80, 90, -100, 105, 60 };
// Create a XYChart object of size 600 x 300 pixels, with a light blue (ccccff)
// background, a black border, and 1 pixel 3D border effect
XYChart c = new XYChart(600, 480, 0xccccff, 0x000000, 1);
// Add a title box to the chart using 16pt Arial Bold Italic font, with white text on
// deep blue background
c.addTitle("Four Quadrant Chart Demonstration", "Arial Bold Italic", 16, 0xffffff
).setBackground(0x000080);
// Set the plotarea at (20, 60) and of size 560 x 360 pixels, with grey (808080) border,
// and light grey (c0c0c0) horizontal and vertical grid lines. Set 4 quadrant coloring,
// where the colors of the quadrants alternate between lighter and deeper grey
// (dddddd/eeeeee)
c.setPlotArea(20, 60, 560, 360, -1, -1, 0x808080, 0xc0c0c0, 0xc0c0c0).set4QBgColor(
0xdddddd, 0xeeeeee, 0xdddddd, 0xeeeeee);
// Set 4 quadrant mode, with both x and y axes symetrical around the origin
c.setAxisAtOrigin(Chart.XYAxisAtOrigin, Chart.XAxisSymmetric + Chart.YAxisSymmetric);
// Add a legend box at (300, 460) (bottom center of the chart) with horizontal layout.
// Use 8pt Arial Bold font.
LegendBox legendBox = c.addLegend(300, 460, false, "Arial Bold", 8);
legendBox.setAlignment(Chart.BottomCenter);
// Set legend box background to light grey (dddddd) with a black border
legendBox.setBackground(0xdddddd, 0);
// Set left/right margin to 20 pixels and top/bottom margin to 5 pixels
legendBox.setMargin2(20, 20, 5, 5);
// Add a titles to axes
c.xAxis().setTitle("Alpha Index");
c.yAxis().setTitle("Beta Index");
// Set axes width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// Add scatter layer, using 15 pixels red (ff33333) X shape symbols
c.addScatterLayer(dataX0, dataY0, "Group A", Chart.Cross2Shape(), 15, 0xff3333);
// Add scatter layer, using 15 pixels green (33ff33) 6-sided polygon symbols
c.addScatterLayer(dataX1, dataY1, "Group B", Chart.PolygonShape(6), 15, 0x33ff33);
// Add scatter layer, using 15 pixels blue (3333ff) triangle symbols
c.addScatterLayer(dataX2, dataY2, "Group C", Chart.TriangleSymbol, 15, 0x3333ff);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='[{dataSetName}] Alpha = {x}, Beta = {value}'");
}
//
// Draw the main chart
//
private void drawChart(RazorChartViewer viewer)
{
//
// For simplicity, in this demo, the data arrays are filled with hard coded data. In a real
// application, you may use a database or other data source to load up the arrays, and only
// visible data (data within the view port) need to be loaded.
//
double[] dataX0 = { 10, 15, 6, -12, 14, -8, 13, -3, 16, 12, 10.5, -7, 3, -10, -5, 2, 5 };
double[] dataY0 = { 130, 150, 80, 110, -110, -105, -130, -15, -170, 125, 125, 60, 25, 150,
150, 15, 120 };
double[] dataX1 = { 6, 7, -4, 3.5, 7, 8, -9, -10, -12, 11, 8, -3, -2, 8, 4, -15, 15 };
double[] dataY1 = { 65, -40, -40, 45, -70, -80, 80, 10, -100, 105, 60, 50, 20, 170, -25, 50,
75 };
double[] dataX2 = { -10, -12, 11, 8, 6, 12, -4, 3.5, 7, 8, -9, 3, -13, 16, -7.5, -10, -15 };
double[] dataY2 = { 65, -80, -40, 45, -70, -80, 80, 90, -100, 105, 60, -75, -150, -40, 120,
-50, -30 };
// Create an XYChart object 500 x 480 pixels in size, with light blue (c0c0ff) background
XYChart c = new XYChart(500, 480, 0xc0c0ff);
// Set the plotarea at (50, 40) and of size 400 x 400 pixels. Use light grey (c0c0c0)
// horizontal and vertical grid lines. Set 4 quadrant coloring, where the colors alternate
// between lighter and deeper grey (dddddd/eeeeee).
c.setPlotArea(50, 40, 400, 400, -1, -1, -1, 0xc0c0c0, 0xc0c0c0).set4QBgColor(0xdddddd,
0xeeeeee, 0xdddddd, 0xeeeeee, 0x000000);
// As the data can lie outside the plotarea in a zoomed chart, we need enable clipping
c.setClipping();
// Set 4 quadrant mode, with both x and y axes symetrical around the origin
c.setAxisAtOrigin(Chart.XYAxisAtOrigin, Chart.XAxisSymmetric + Chart.YAxisSymmetric);
// Add a legend box at (450, 40) (top right corner of the chart) with vertical layout and 8pt
// Arial Bold font. Set the background color to semi-transparent grey (40dddddd).
LegendBox legendBox = c.addLegend(450, 40, true, "Arial Bold", 8);
legendBox.setAlignment(Chart.TopRight);
legendBox.setBackground(0x40dddddd);
// Add titles to axes
c.xAxis().setTitle("Alpha Index");
c.yAxis().setTitle("Beta Index");
// Set axes line width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// The default ChartDirector settings has a denser y-axis grid spacing and less-dense x-axis
// grid spacing. In this demo, we want the tick spacing to be symmetrical. We use around 40
// pixels between major ticks and 20 pixels between minor ticks.
c.xAxis().setTickDensity(40, 20);
c.yAxis().setTickDensity(40, 20);
//
// In this example, we represent the data by scatter points. You may modify the code below to
// use other layer types (lines, areas, etc).
//
// Add scatter layer, using 11 pixels red (ff33333) X shape symbols
c.addScatterLayer(dataX0, dataY0, "Group A", Chart.Cross2Shape(), 11, 0xff3333);
// Add scatter layer, using 11 pixels green (33ff33) circle symbols
c.addScatterLayer(dataX1, dataY1, "Group B", Chart.CircleShape, 11, 0x33ff33);
// Add scatter layer, using 11 pixels blue (3333ff) triangle symbols
c.addScatterLayer(dataX2, dataY2, "Group C", Chart.TriangleSymbol, 11, 0x3333ff);
//
// In this example, we have not explicitly configured the full x and y range. In this case,
// the first time syncLinearAxisWithViewPort is called, ChartDirector will auto-scale the
// axis and assume the resulting range is the full range. In subsequent calls, ChartDirector
// will set the axis range based on the view port and the full range.
//
viewer.syncLinearAxisWithViewPort("x", c.xAxis());
viewer.syncLinearAxisWithViewPort("y", c.yAxis());
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("", "",
"title='[{dataSetName}] Alpha = {x|G}, Beta = {value|G}'");
}
//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)
{
// Create a finance chart demo containing 100 days of data
int noOfDays = 100;
// To compute moving averages starting from the first day, we need to get extra data
// points before the first day
int extraDays = 30;
// In this exammple, we use a random number generator utility to simulate the data. We
// set up the random table to create 6 cols x (noOfDays + extraDays) rows, using 9 as
// the seed.
RanTable rantable = new RanTable(9, 6, noOfDays + extraDays);
// Set the 1st col to be the timeStamp, starting from Sep 4, 2014, with each row
// representing one day, and counting week days only (jump over Sat and Sun)
rantable.setDateCol(0, new DateTime(2014, 9, 4), 86400, true);
// Set the 2nd, 3rd, 4th and 5th columns to be high, low, open and close data. The open
// value starts from 100, and the daily change is random from -5 to 5.
rantable.setHLOCCols(1, 100, -5, 5);
// Set the 6th column as the vol data from 5 to 25 million
rantable.setCol(5, 50000000, 250000000);
// Now we read the data from the table into arrays
double[] timeStamps = rantable.getCol(0);
double[] highData = rantable.getCol(1);
double[] lowData = rantable.getCol(2);
double[] openData = rantable.getCol(3);
double[] closeData = rantable.getCol(4);
double[] volData = rantable.getCol(5);
// Custom data series should be of the same length as the OHLC data series
double[] buySignal = new double[closeData.Length];
double[] sellSignal = new double[closeData.Length];
//
// The following is just an arbitrary algorithm to create some meaningless buySignal and
// sellSignal. They are just for demonstrating the charting engine. Please do not use
// them for actual trading.
//
double[] sma5 = new ArrayMath(closeData).movAvg(5).result();
double[] sma20 = new ArrayMath(closeData).movAvg(20).result();
for (int i = 0; i < sma5.Length; ++i)
{
buySignal[i] = Chart.NoValue;
sellSignal[i] = Chart.NoValue;
if (i > 0)
{
if ((sma5[i - 1] <= sma20[i - 1]) && (sma5[i] > sma20[i]))
{
buySignal[i] = lowData[i];
}
if ((sma5[i - 1] >= sma20[i - 1]) && (sma5[i] < sma20[i]))
{
sellSignal[i] = highData[i];
}
}
}
// Create a FinanceChart object of width 640 pixels
FinanceChart c = new FinanceChart(640);
// Add a title to the chart
c.addTitle("Finance Chart with Custom Symbols");
// Set the data into the finance chart object
c.setData(timeStamps, highData, lowData, openData, closeData, volData, extraDays);
// Add the main chart with 240 pixels in height
XYChart mainChart = c.addMainChart(240);
// Add buy signal symbols to the main chart, using cyan (0x00ffff) upward pointing
// arrows as symbols
ScatterLayer buyLayer = mainChart.addScatterLayer(null, buySignal, "Buy",
Chart.ArrowShape(0, 1, 0.4, 0.4), 11, 0x00ffff);
// Shift the symbol lower by 20 pixels
buyLayer.getDataSet(0).setSymbolOffset(0, 20);
// Add sell signal symbols to the main chart, using purple (0x9900cc) downward pointing
// arrows as symbols
ScatterLayer sellLayer = mainChart.addScatterLayer(null, sellSignal, "Sell",
Chart.ArrowShape(180, 1, 0.4, 0.4), 11, 0x9900cc);
// Shift the symbol higher by 20 pixels
sellLayer.getDataSet(0).setSymbolOffset(0, -20);
// Add a 5 period simple moving average to the main chart, using brown color
c.addSimpleMovingAvg(5, 0x663300);
// Add a 20 period simple moving average to the main chart, using purple color
c.addSimpleMovingAvg(20, 0x9900ff);
// Add candlestick symbols to the main chart, using green/red for up/down days
c.addCandleStick(0x66ff66, 0xff6666);
// Add a volume indicator chart (75 pixels high) after the main chart, using
// green/red/grey for up/down/flat days
c.addVolIndicator(75, 0x99ff99, 0xff9999, 0x808080);
// Append a 14-days RSI indicator chart (75 pixels high) after the main chart. The main
// RSI line is purple (800080). Set threshold region to +/- 20 (that is, RSI = 50 +/-
// 25). The upper/lower threshold regions will be filled with red (ff0000)/blue
// (0000ff).
c.addRSI(75, 14, 0x800080, 20, 0xff0000, 0x0000ff);
// Output the chart
viewer.Chart = c;
}
//
// Draw the chart
//
private void drawChart(WPFChartViewer viewer)
{
// Have not started collecting data ???
if (currentIndex <= 0)
{
return;
}
// The start time is equal to the latest time minus the time range of the chart
double startTime = timeStamps[currentIndex - 1] - timeRange;
int startIndex = (int)Math.Ceiling(Chart.bSearch(timeStamps, 0, currentIndex, startTime) - 0.1);
// For a sweep chart, if the line goes beyond the right border, it will wrap back to
// the left. We need to determine the wrap position (the right border).
double wrapTime = Math.Floor(startTime / timeRange + 1) * timeRange;
double wrapIndex = Chart.bSearch(timeStamps, 0, currentIndex, wrapTime);
int wrapIndexA = (int)Math.Ceiling(wrapIndex);
int wrapIndexB = (int)Math.Floor(wrapIndex);
// The data arrays and the colors and names of the data series
var allArrays = new[] { timeStamps, channel1, channel2 };
int[] colors = { 0xff0000, 0x00cc00 };
string[] names = { "Channel 1", "Channel 2" };
// Split all data arrays into two parts A and B at the wrap position. The B part is the
// part that is wrapped back to the left.
var allArraysA = new double[allArrays.Length][];
var allArraysB = new double[allArrays.Length][];
for (int i = 0; i < allArrays.Length; ++i)
{
allArraysA[i] = (double[])Chart.arraySlice(allArrays[i], startIndex, wrapIndexA - startIndex + 1);
allArraysB[i] = (double[])Chart.arraySlice(allArrays[i], wrapIndexB, currentIndex - wrapIndexB);
}
// Normalize the plotted timeStamps (the first element of allArrays) to start from 0
for (int i = 0; i < allArraysA[0].Length; ++i)
{
allArraysA[0][i] -= wrapTime - timeRange;
}
for (int i = 0; i < allArraysB[0].Length; ++i)
{
allArraysB[0][i] -= wrapTime;
}
//
// Now we have prepared all the data and can plot the chart.
//
//================================================================================
// Configure overall chart appearance.
//================================================================================
// Create an XYChart object the same size as WPFChartViewer, with a minimum of 300 x 150
XYChart c = new XYChart(Math.Max(300, (int)viewer.ActualWidth), Math.Max(150, (int)viewer.ActualHeight));
// Set the plotarea at (0, 0) with width 1 pixel less than chart width, and height 20 pixels
// less than chart height. Use a vertical gradient from light blue (f0f6ff) to sky blue (a0c0ff)
// as background. Set border to transparent and grid lines to white (ffffff).
c.setPlotArea(0, 0, c.getWidth() - 1, c.getHeight() - 20, c.linearGradientColor(0, 0, 0,
c.getHeight() - 20, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xffffff);
// In our code, we can overdraw the line slightly, so we clip it to the plot area.
c.setClipping();
// Add a legend box at the right side using horizontal layout. Use 10pt Arial Bold as font. Set
// the background and border color to Transparent and use line style legend key.
LegendBox b = c.addLegend(c.getWidth() - 1, 10, false, "Arial Bold", 10);
b.setBackground(Chart.Transparent);
b.setAlignment(Chart.Right);
b.setLineStyleKey();
// Set the x and y axis stems to transparent and the label font to 10pt Arial
c.xAxis().setColors(Chart.Transparent);
c.yAxis().setColors(Chart.Transparent);
c.xAxis().setLabelStyle("Arial", 10);
c.yAxis().setLabelStyle("Arial", 10, 0x336699);
// Configure the y-axis label to be inside the plot area and above the horizontal grid lines
c.yAxis().setLabelGap(-1);
c.yAxis().setMargin(20);
c.yAxis().setLabelAlignment(1);
// Configure the x-axis labels to be to the left of the vertical grid lines
c.xAxis().setLabelAlignment(1);
//================================================================================
// Add data to chart
//================================================================================
// Draw the lines, which consists of A segments and B segments (the wrapped segments)
foreach (var dataArrays in new[] { allArraysA, allArraysB })
{
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(2);
layer.setFastLineMode();
// The first element of dataArrays is the timeStamp, and the rest are the data.
layer.setXData(dataArrays[0]);
for (int i = 1; i < dataArrays.Length; ++i)
{
layer.addDataSet(dataArrays[i], colors[i - 1], names[i - 1]);
}
// Disable legend entries for the B lines to avoid duplication with the A lines
if (dataArrays == allArraysB)
{
layer.setLegend(Chart.NoLegend);
}
}
// The B segments contain the latest data. We add a vertical line at the latest position.
int lastIndex = allArraysB[0].Length - 1;
Mark m = c.xAxis().addMark(allArraysB[0][lastIndex], -1);
m.setMarkColor(0x0000ff, Chart.Transparent, Chart.Transparent);
m.setDrawOnTop(false);
// We also add a symbol and a label for each data series at the latest position
for (int i = 1; i < allArraysB.Length; ++i)
{
// Add the symbol
Layer layer = c.addScatterLayer(new double[] { allArraysB[0][lastIndex] }, new double[] {
allArraysB[i][lastIndex]
}, "", Chart.CircleSymbol, 9, colors[i - 1], colors[i - 1]);
layer.moveFront();
// Add the label
string label = "<*font,bgColor=" + colors[i - 1].ToString("x") + "*> {value|P4} <*/font*>";
layer.setDataLabelFormat(label);
// The label style
ChartDirector.TextBox t = layer.setDataLabelStyle("Arial Bold", 10, 0xffffff);
bool isOnLeft = allArraysB[0][lastIndex] <= timeRange / 2;
t.setAlignment(isOnLeft ? Chart.Left : Chart.Right);
t.setMargin(isOnLeft ? 5 : 0, isOnLeft ? 0 : 5, 0, 0);
}
//================================================================================
// Configure axis scale and labelling
//================================================================================
c.xAxis().setLinearScale(0, timeRange);
// For the automatic axis labels, set the minimum spacing to 75/40 pixels for the x/y axis.
c.xAxis().setTickDensity(75);
c.yAxis().setTickDensity(40);
// Set the auto-scale margin to 0.05, and the zero affinity to 0.6
c.yAxis().setAutoScale(0.05, 0.05, 0.6);
//================================================================================
// Output the chart
//================================================================================
viewer.Chart = c;
}
/// <summary>
/// Draw the chart.
/// </summary>
private void drawChart(WinChartViewer viewer)
{
// Create an XYChart object 500 x 480 pixels in size, with the same background color
// as the container
XYChart c = new XYChart(500, 480, Chart.CColor(BackColor));
// Set the plotarea at (50, 40) and of size 400 x 400 pixels. Use light grey (c0c0c0)
// horizontal and vertical grid lines. Set 4 quadrant coloring, where the colors of
// the quadrants alternate between lighter and deeper grey (dddddd/eeeeee).
c.setPlotArea(50, 40, 400, 400, -1, -1, -1, 0xc0c0c0, 0xc0c0c0
).set4QBgColor(0xdddddd, 0xeeeeee, 0xdddddd, 0xeeeeee, 0x000000);
// Enable clipping mode to clip the part of the data that is outside the plot area.
c.setClipping();
// Set 4 quadrant mode, with both x and y axes symetrical around the origin
c.setAxisAtOrigin(Chart.XYAxisAtOrigin, Chart.XAxisSymmetric + Chart.YAxisSymmetric);
// Add a legend box at (450, 40) (top right corner of the chart) with vertical layout
// and 8 pts Arial Bold font. Set the background color to semi-transparent grey.
LegendBox legendBox = c.addLegend(450, 40, true, "arialbd.ttf", 8);
legendBox.setAlignment(Chart.TopRight);
legendBox.setBackground(0x40dddddd);
// Add a titles to axes
c.xAxis().setTitle("Alpha Index");
c.yAxis().setTitle("Beta Index");
// Set axes width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// The default ChartDirector settings has a denser y-axis grid spacing and less-dense
// x-axis grid spacing. In this demo, we want the tick spacing to be symmetrical.
// We use around 50 pixels between major ticks and 25 pixels between minor ticks.
c.xAxis().setTickDensity(50, 25);
c.yAxis().setTickDensity(50, 25);
//
// In this example, we represent the data by scatter points. If you want to represent
// the data by somethings else (lines, bars, areas, floating boxes, etc), just modify
// the code below to use the layer type of your choice.
//
// Add scatter layer, using 11 pixels red (ff33333) X shape symbols
c.addScatterLayer(dataX0, dataY0, "Group A", Chart.Cross2Shape(), 11, 0xff3333);
// Add scatter layer, using 11 pixels green (33ff33) circle symbols
c.addScatterLayer(dataX1, dataY1, "Group B", Chart.CircleShape, 11, 0x33ff33);
// Add scatter layer, using 11 pixels blue (3333ff) triangle symbols
c.addScatterLayer(dataX2, dataY2, "Group C", Chart.TriangleSymbol, 11, 0x3333ff);
if (maxX == minX)
{
// The axis scale has not yet been set up. So this is the first time the chart is
// drawn and it is drawn with no zooming. We can use auto-scaling to determine the
// axis-scales, then remember them for future use.
// Explicitly auto-scale axes so we can get the axis scales
c.layout();
// Save the axis scales for future use
minX = c.xAxis().getMinValue();
maxX = c.xAxis().getMaxValue();
minY = c.yAxis().getMinValue();
maxY = c.yAxis().getMaxValue();
}
else
{
// Compute the zoomed-in axis scales using the overall axis scales and ViewPort size
double xScaleMin = minX + (maxX - minX) * viewer.ViewPortLeft;
double xScaleMax = minX + (maxX - minX) * (viewer.ViewPortLeft +
viewer.ViewPortWidth);
double yScaleMin = maxY - (maxY - minY) * (viewer.ViewPortTop +
viewer.ViewPortHeight);
double yScaleMax = maxY - (maxY - minY) * viewer.ViewPortTop;
// *** use the following formula if you are using a log scale axis ***
// double xScaleMin = minX * Math.Pow(maxX / minX, viewer.ViewPortLeft);
// double xScaleMax = minX * Math.Pow(maxX / minX, viewer.ViewPortLeft +
// viewer.ViewPortWidth);
// double yScaleMin = maxY * Math.Pow(minY / maxY, viewer.ViewPortTop +
// viewer.ViewPortHeight);
// double yScaleMax = maxY * Math.Pow(minY / maxY, viewer.ViewPortTop);
// Set the axis scales
c.xAxis().setLinearScale(xScaleMin, xScaleMax);
c.xAxis().setRounding(false, false);
c.yAxis().setLinearScale(yScaleMin, yScaleMax);
c.yAxis().setRounding(false, false);
}
// Set the chart image to the WinChartViewer
winChartViewer1.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 XY data of the first data series
double[] dataX0 = { 10, 35, 17, 4, 22, 29, 45, 52, 63, 39 };
double[] dataY0 = { 2.0, 3.2, 2.7, 1.2, 2.8, 2.9, 3.1, 3.0, 2.3, 3.3 };
// The XY data of the second data series
double[] dataX1 = { 30, 35, 17, 4, 22, 59, 43, 52, 63, 39 };
double[] dataY1 = { 1.0, 1.3, 0.7, 0.6, 0.8, 3.0, 1.8, 2.3, 3.4, 1.5 };
// The XY data of the third data series
double[] dataX2 = { 28, 35, 15, 10, 22, 60, 46, 64, 39 };
double[] dataY2 = { 2.0, 2.2, 1.2, 0.4, 1.8, 2.7, 2.4, 2.8, 2.4 };
// Create a XYChart object of size 540 x 480 pixels
XYChart c = new XYChart(540, 480);
// Set the plotarea at (70, 65) and of size 400 x 350 pixels, with white background and
// a light grey border (0xc0c0c0). Turn on both horizontal and vertical grid lines with
// light grey color (0xc0c0c0)
c.setPlotArea(70, 65, 400, 350, 0xffffff, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a legend box with the top center point anchored at (270, 30). Use horizontal
// layout. Use 10pt Arial Bold Italic font. Set the background and border color to
// Transparent.
LegendBox legendBox = c.addLegend(270, 30, false, "Arial Bold Italic", 10);
legendBox.setAlignment(Chart.TopCenter);
legendBox.setBackground(Chart.Transparent, Chart.Transparent);
// Add a title to the chart using 18 point Times Bold Itatic font.
c.addTitle("Parametric Curve Fitting", "Times New Roman Bold Italic", 18);
// Add titles to the axes using 12pt Arial Bold Italic font
c.yAxis().setTitle("Axis Title Placeholder", "Arial Bold Italic", 12);
c.xAxis().setTitle("Axis Title Placeholder", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.yAxis().setWidth(3);
c.xAxis().setWidth(3);
// Add a scatter layer using (dataX0, dataY0)
c.addScatterLayer(dataX0, dataY0, "Polynomial", Chart.GlassSphere2Shape, 11, 0xff0000);
// Add a degree 2 polynomial trend line layer for (dataX0, dataY0)
TrendLayer trend0 = c.addTrendLayer2(dataX0, dataY0, 0xff0000);
trend0.setLineWidth(3);
trend0.setRegressionType(Chart.PolynomialRegression(2));
trend0.setHTMLImageMap("{disable}");
// Add a scatter layer for (dataX1, dataY1)
c.addScatterLayer(dataX1, dataY1, "Exponential", Chart.GlassSphere2Shape, 11, 0x00aa00);
// Add an exponential trend line layer for (dataX1, dataY1)
TrendLayer trend1 = c.addTrendLayer2(dataX1, dataY1, 0x00aa00);
trend1.setLineWidth(3);
trend1.setRegressionType(Chart.ExponentialRegression);
trend1.setHTMLImageMap("{disable}");
// Add a scatter layer using (dataX2, dataY2)
c.addScatterLayer(dataX2, dataY2, "Logarithmic", Chart.GlassSphere2Shape, 11, 0x0000ff);
// Add a logarithmic trend line layer for (dataX2, dataY2)
TrendLayer trend2 = c.addTrendLayer2(dataX2, dataY2, 0x0000ff);
trend2.setLineWidth(3);
trend2.setRegressionType(Chart.LogarithmicRegression);
trend2.setHTMLImageMap("{disable}");
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='[{dataSetName}] ({x}, {value})'");
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
// The XY data of the first data series
double[] dataX = { 50, 55, 37, 24, 42, 49, 63, 72, 83, 59 };
double[] dataY = { 3.6, 2.8, 2.5, 2.3, 3.8, 3.0, 3.8, 5.0, 6.0, 3.3 };
// Create a XYChart object of size 520 x 490 pixels
XYChart c = new XYChart(520, 490);
// Set the plotarea at (60, 40) and of size 450 x 400 pixels, with white background and a light
// grey border (0xc0c0c0). Turn on both horizontal and vertical grid lines with light grey color
// (0xc0c0c0)
c.setPlotArea(60, 40, 450, 400, 0xffffff, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a title to the chart using 18 point Times Bold Itatic font.
c.addTitle(" Chemical X Thermal Conductivity", "Times New Roman Bold Italic", 18);
// Add titles to the axes using 12pt Arial Bold Italic font
c.yAxis().setTitle("Thermal Conductivity (W/K)", "Arial Bold Italic", 12);
c.xAxis().setTitle("Concentration (g/liter)", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.yAxis().setWidth(3);
c.xAxis().setWidth(3);
// Add a scatter layer using (dataX, dataY)
ScatterLayer scatterLayer = c.addScatterLayer(dataX, dataY, "", Chart.GlassSphereShape, 13,
0xcc0000);
// Tooltip for the scatter layer
scatterLayer.setHTMLImageMap("", "",
"title='Concentration: {x} g/liter, Conductivity: {value} W/K'");
// Add a trend line layer for (dataX, dataY)
TrendLayer trendLayer = c.addTrendLayer2(dataX, dataY, 0xcc0000);
// Set the line width to 3 pixels
trendLayer.setLineWidth(3);
// Add a 95% confidence band for the line
trendLayer.addConfidenceBand(0.95, unchecked ((int)0x806666ff));
// Add a 95% confidence band (prediction band) for the points
trendLayer.addPredictionBand(0.95, unchecked ((int)0x8066ff66));
// Tool tip for the trend layer
trendLayer.setHTMLImageMap("", "", "title='Trend Line: y = {slope|P4} x + {intercept|P4}'");
// Add a legend box at (60, 35) (top of the chart) with horizontal layout. Use 10pt Arial Bold
// Italic font. Set the background and border color to Transparent and use line style legend
// icons.
LegendBox legendBox = c.addLegend(60, 35, false, "Arial Bold Italic", 9);
legendBox.setBackground(Chart.Transparent);
legendBox.setLineStyleKey(true);
// Add entries to the legend box
legendBox.addKey("95% Line Confidence", unchecked ((int)0x806666ff));
legendBox.addKey("95% Point Confidence", unchecked ((int)0x8066ff66));
legendBox.addKey(String.Format("Trend Line: y = {0:0.0000} x + {1:0.0000}", trendLayer.getSlope(),
trendLayer.getIntercept()), 0xcc0000, 3);
// Assign the chart to the WPFChartViewer
WPFChartViewer1.Chart = c;
// Include tool tip for the chart
WPFChartViewer1.ImageMap = c.getHTMLImageMap("");
}
//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 XY points for the bubble chart. The bubble chart has independent
// bubble size on the X and Y direction.
double[] dataX0 = { 1000, 1500, 1700 };
double[] dataY0 = { 25, 20, 65 };
double[] dataZX0 = { 500, 200, 600 };
double[] dataZY0 = { 15, 30, 20 };
double[] dataX1 = { 500, 1000, 1300 };
double[] dataY1 = { 35, 50, 75 };
double[] dataZX1 = { 800, 300, 500 };
double[] dataZY1 = { 8, 27, 25 };
double[] dataX2 = { 150, 300 };
double[] dataY2 = { 20, 60 };
double[] dataZX2 = { 160, 400 };
double[] dataZY2 = { 30, 20 };
// Create a XYChart object of size 450 x 420 pixels
XYChart c = new XYChart(450, 420);
// Set the plotarea at (55, 65) 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, 65, 350, 300, -1, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a legend box at (50, 30) (top of the chart) with horizontal
// layout. Use 12 pts Times Bold Italic font. Set the background and
// border color to Transparent.
c.addLegend(50, 30, false, "Times New Roman Bold Italic", 12
).setBackground(Chart.Transparent);
// Add a title to the chart using 18 pts Times Bold Itatic font.
c.addTitle("Plasma Battery Comparison", "Times New Roman Bold Italic", 18
);
// Add titles to the axes using 12 pts Arial Bold Italic font
c.yAxis().setTitle("Operating Current", "Arial Bold Italic", 12);
c.xAxis().setTitle("Operating Voltage", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.xAxis().setWidth(3);
c.yAxis().setWidth(3);
// Add (dataX0, dataY0) as a standard scatter layer, and also as a
// "bubble" scatter layer, using circles as symbols. The "bubble" scatter
// layer has symbol size modulated by (dataZX0, dataZY0) using the scale
// on the x and y axes.
c.addScatterLayer(dataX0, dataY0, "Vendor A", Chart.CircleSymbol, 9,
0xff3333, 0xff3333);
c.addScatterLayer(dataX0, dataY0, "", Chart.CircleSymbol, 9,
unchecked ((int)0x80ff3333), unchecked ((int)0x80ff3333)
).setSymbolScale(dataZX0, Chart.XAxisScale, dataZY0, Chart.YAxisScale
);
// Add (dataX1, dataY1) as a standard scatter layer, and also as a
// "bubble" scatter layer, using squares as symbols. The "bubble" scatter
// layer has symbol size modulated by (dataZX1, dataZY1) using the scale
// on the x and y axes.
c.addScatterLayer(dataX1, dataY1, "Vendor B", Chart.SquareSymbol, 7,
0x3333ff, 0x3333ff);
c.addScatterLayer(dataX1, dataY1, "", Chart.SquareSymbol, 9,
unchecked ((int)0x803333ff), unchecked ((int)0x803333ff)
).setSymbolScale(dataZX1, Chart.XAxisScale, dataZY1, Chart.YAxisScale
);
// Add (dataX2, dataY2) as a standard scatter layer, and also as a
// "bubble" scatter layer, using diamonds as symbols. The "bubble"
// scatter layer has symbol size modulated by (dataZX2, dataZY2) using
// the scale on the x and y axes.
c.addScatterLayer(dataX2, dataY2, "Vendor C", Chart.DiamondSymbol, 9,
0x00ff00, 0x00ff00);
c.addScatterLayer(dataX2, dataY2, "", Chart.DiamondSymbol, 9,
unchecked ((int)0x8033ff33), unchecked ((int)0x8033ff33)
).setSymbolScale(dataZX2, Chart.XAxisScale, dataZY2, Chart.YAxisScale
);
// Output the chart
viewer.Image = c.makeImage();
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Voltage = {x} +/- {={zx}/2} V, Current = {value} +/- " +
"{={zy}/2} A'");
}
public override void UpdateVisualization()
{
List<string>[] chartLabels = null;
double[] dataArray = null;
Image img = new Image();
int i = 0;
List<string> xLabels = new List<string>();
List<string> yLabels = new List<string>();
// Get the Factor Labels
chartLabels = GetConfigDisplayLabels();
if (chartLabels == null)
{
return;
}
int zCount = 0;
if (chartLabels[2] == null)
{
zCount = 1;
}
else
{
zCount = chartLabels[2].Count;
}
xLabels.Add("");
for (i = 0; i < chartLabels[0].Count; i++)
{
xLabels.Add(chartLabels[0][i]);
}
xLabels.Add("");
yLabels.Add("");
for (i = 0; i < chartLabels[1].Count; i++)
{
yLabels.Add(chartLabels[1][i]);
}
yLabels.Add("");
// Obtain grid
if ((configDisplayPanel.Children == null) || (configDisplayPanel.Children.Count != 1) ||
(!(configDisplayPanel.Children[0] is Grid)))
{
return;
}
Grid grid = configDisplayPanel.Children[0] as Grid;
// Clear the grid images
List<UIElement> removalList = new List<UIElement>();
foreach (UIElement child in grid.Children)
{
if (child is Image)
{
removalList.Add(child);
}
}
if (removalList.Count > 0)
{
foreach (UIElement child in removalList)
{
grid.Children.Remove(child);
}
}
// Create the Stacked Histogram
XYChart c = new XYChart(configDisplay.Width, configDisplay.Height);
c.setPlotArea(100, 0, configDisplay.Width - 200, configDisplay.Height - 100);
c.xAxis().setLabels(xLabels.ToArray());
c.yAxis().setLabels(yLabels.ToArray());
c.xAxis().setTickOffset(-0.5);
c.yAxis().setTickOffset(-0.5);
// Create x and y value list
List<double>[] dataX = new List<double>[zCount];
List<double>[] dataY = new List<double>[zCount];
for (int z = 0; z < zCount; z++)
{
dataX[z] = new List<double>();
dataY[z] = new List<double>();
for (int y = 0; y < chartLabels[1].Count; y++)
{
for (int x = 0; x < chartLabels[0].Count; x++)
{
dataX[z].Add(x + 1 + xOffsets[z]);
dataY[z].Add(y + 1 + yOffsets[z]);
}
}
}
List<double> dataZ = new List<double>();
double maxBubbleSize = (configDisplay.Width - 200) / xLabels.Count / 2.0;
i = 0;
for (int z = 0; z < zCount; z++)
{
if (GetConfigDisplayData(i, ref dataArray))
{
ArrayMath a = new ArrayMath(dataArray.ToArray());
double maxValue = a.max();
if (maxValue < maxBubbleSize)
{
for (int j = 0; j < dataArray.Length; j++)
{
if (dataArray[j] == 0)
{
dataZ.Add(0.0);
}
else
{
dataZ.Add(dataArray[j] + 10);
}
}
}
else
{
for (int j = 0; j < dataArray.Length; j++)
{
if (dataArray[j] == 0)
{
dataZ.Add(0.0);
}
else
{
dataZ.Add(dataArray[j] / maxValue * maxBubbleSize + 10);
}
}
}
}
i++;
if (chartLabels[2] == null)
{
c.addScatterLayer(dataX[z].ToArray(), dataY[z].ToArray(), configDisplay.MetricName, Chart.CircleSymbol, 9,
(int) barcodeColorsTrans[z], (int) barcodeColorsTrans[z]).setSymbolScale(dataZ.ToArray());
}
else
{
c.addScatterLayer(dataX[z].ToArray(), dataY[z].ToArray(), chartLabels[2][z], Chart.CircleSymbol, 9,
(int) barcodeColorsTrans[z], (int) barcodeColorsTrans[z]).setSymbolScale(dataZ.ToArray());
}
dataZ.Clear();
}
// Generate an image of the chart
System.Drawing.Image imgWinForms = c.makeImage();
BitmapImage bi = new BitmapImage();
bi.BeginInit();
MemoryStream ms = new MemoryStream();
// Save to a memory stream...
imgWinForms.Save(ms, ImageFormat.Bmp);
// Rewind the stream...
ms.Seek(0, SeekOrigin.Begin);
// Tell the WPF image to use this stream...
bi.StreamSource = ms;
bi.EndInit();
img.Source = bi;
img.Stretch = Stretch.Uniform;
Grid.SetColumn(img, 0);
Grid.SetRow(img, 2);
grid.Children.Add(img);
}
public void createChart(WinChartViewer viewer, DateTime beginDate, Double dateRange)
{
//dateRange = dateRange / 3600.0;
DateTime viewPortStartDate = beginDate.AddSeconds(Math.Round(viewer.ViewPortLeft * dateRange));
DateTime viewPortEndDate = viewPortStartDate.AddSeconds(Math.Round(viewer.ViewPortWidth * dateRange));
Double vpStart = Math.Round(viewer.ViewPortLeft * dateRange);
Double vpEnd = vpStart + Math.Round(viewer.ViewPortWidth * dateRange);
//TimeSpan hoursCalc = viewPortEndDate.Subtract(viewPortStartDate);
//int hours = (hoursCalc.Days * 24) + hoursCalc.Hours;
//viewPortEndDate = viewPortEndDate.AddMinutes(12 * hours); // hack to show hour labels
//Double axisLowerLimit = 0 + viewer.ViewPortTop * rowRange;
//Double axisUpperLimit = axisLowerLimit + viewer.ViewPortHeight * (rowRange);
XYChart c = new XYChart(viewer.Width - 5, viewer.Height - 5);
// Add a title to the chart
c.addTitle(chartName);
// Set the plotarea at (50, 20) and of size 200 x 5200 pixels
c.setPlotArea(50, 20, viewer.Width - 70, viewer.Height - 75);
c.setClipping();
// Add a bar chart layer using the given data
if (chartOutputType.Equals(OutputType.INFO_ELEMENT))
{
c.addBarLayer(chartData.HighData.ToArray(), -1, chartOutputSubType);
}
else
{
c.addScatterLayer(new double[0],
new ArrayMath(chartData.HighData.ToArray()).selectNEZ(chartData.IconType.ToArray(), ChartDirector.Chart.NoValue).result(),
chartOutputSubType, ChartDirector.Chart.CircleShape, 6, ChartDirector.Chart.CColor(Color.DarkOrange));
LineLayer ll = c.addStepLineLayer();
ll.addDataSet(chartData.HighData.ToArray(), ChartDirector.Chart.CColor(Color.DarkGray), "");
ll.setLineWidth(3);
}
c.yAxis().setTitle(chartYAxis);
c.yAxis().setLinearScale(0, 1.25, 0.25);
ChartDirector.Mark mark = c.yAxis().addMark(1.0, 0x008000, "Max");
mark.setLineWidth(2);
mark.setDrawOnTop(false);
// Set the labels on the x axis.
//c.xAxis().setDateScale(viewPortStartDate, viewPortEndDate);
c.xAxis().setLinearScale(vpStart, vpEnd, 1.0);
c.xAxis().setMargin(10, 10);
if (chartOutputType.Equals(OutputType.INFO_ELEMENT))
{
ChartDirector.BarLayer bl = c.addBarLayer();
List<Double> barData = new List<Double>();
int whiteColor = ChartDirector.Chart.CColor(Color.White);
int redColor = ChartDirector.Chart.CColor(Color.Red);
// add marks to the bar chart so we can see if a value should be there (even if it's zero)
for (int i = 0; i < chartData.RealDataAtThisPoint.Count; i++)
{
if (chartData.RealDataAtThisPoint[i])
{
barData.Add(0.05);
//c.xAxis().addMark(i, redColor);
}
else
{
barData.Add(0.0);
}
}
bl.setBorderColor(redColor);
bl.setBarWidth(0);
bl.addDataSet(barData.ToArray(), whiteColor);
}
// begin time in chart director format
String beginCD = ""+ChartDirector.Chart.CTime(beginDate);
// chart director uses seconds, convert our timeincrement to seconds and add them to the start time
String partialTimeString = "{=("+beginCD+"+{value}*"+ChartExplorer.TimeIncrementInSecondsString+")|";
c.xAxis().setMultiFormat(ChartDirector.Chart.StartOfDayFilter(), "<*font=bold*>"+partialTimeString+"m/d hhnn}", // show the day text once for each day
ChartDirector.Chart.AllPassFilter(), partialTimeString+"hhnn}"); // military time for all others
//c.xAxis().setLabels(chartData.TimeStamps.ToArray());
c.xAxis().setTitle("Time Period: Hours");
//c.xAxis().setLabelStep(4);
//c.yAxis().setMultiFormat(ChartDirector.Chart.StartOfHourFilter(), "<*font=bold*>{value|w hhnn}", ChartDirector.Chart.AllPassFilter(), "{value|w hhnn}");
// output the chart
try
{
viewer.Image = c.makeImage();
String query = "x={x}&xLabel={xLabel}&dataSet={dataSet}&dataSetName={dataSetName}&value={value}";
viewer.ImageMap = c.getHTMLImageMap(query, query);
}
catch (Exception) // occasionally c.makeImage(); crashes - some sort of drawing exception?
// if we catch, the next redraw/resize should be fine...
{
}
}
//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 tasks for the gantt chart
string[] labels = { "Market Research", "Define Specifications", "Overall Archiecture",
"Project Planning", "Detail Design", "Software Development","Test Plan",
"Testing and QA", "User Documentation" };
// The task index, start date, end date and color for each bar
double[] taskNo = { 0, 0, 1, 2, 3, 4, 5, 6, 6, 7, 8, 8 };
DateTime[] startDate = { new DateTime(2004, 8, 16), new DateTime(2004, 10, 4),
new DateTime(2004, 8, 30), new DateTime(2004, 9, 13),new DateTime(2004, 9, 20),
new DateTime(2004, 9, 27), new DateTime(2004, 10, 4),new DateTime(2004, 10, 4),
new DateTime(2004, 10, 25), new DateTime(2004, 11, 1),new DateTime(2004, 10, 18),
new DateTime(2004, 11, 8) };
DateTime[] endDate = { new DateTime(2004, 8, 30), new DateTime(2004, 10, 18),
new DateTime(2004, 9, 13), new DateTime(2004, 9, 27),new DateTime(2004, 10, 4),
new DateTime(2004, 10, 11), new DateTime(2004, 11, 8),new DateTime(2004, 10, 18),
new DateTime(2004, 11, 8), new DateTime(2004, 11, 22),new DateTime(2004, 11, 1),
new DateTime(2004, 11, 22) };
int[] colors = { 0x00cc00, 0x00cc00, 0x00cc00, 0x0000cc, 0x0000cc, 0xcc0000, 0xcc0000,
0x0000cc, 0xcc0000, 0xcc0000, 0x00cc00, 0xcc0000 };
// Create a XYChart object of size 620 x 325 pixels. Set background color to light red
// (0xffcccc), with 1 pixel 3D border effect.
XYChart c = new XYChart(620, 325, 0xffcccc, 0x000000, 1);
// Add a title to the chart using 15 points Times Bold Itatic font, with white (ffffff)
// text on a dark red (800000) background
c.addTitle("Mutli-Color Gantt Chart Demo", "Times New Roman Bold Italic", 15, 0xffffff
).setBackground(0x800000);
// Set the plotarea at (140, 55) and of size 460 x 200 pixels. Use alternative
// white/grey background. Enable both horizontal and vertical grids by setting their
// colors to grey (c0c0c0). Set vertical major grid (represents month boundaries) 2
// pixels in width
c.setPlotArea(140, 55, 460, 200, 0xffffff, 0xeeeeee, Chart.LineColor, 0xc0c0c0, 0xc0c0c0
).setGridWidth(2, 1, 1, 1);
// swap the x and y axes to create a horziontal box-whisker chart
c.swapXY();
// Set the y-axis scale to be date scale from Aug 16, 2004 to Nov 22, 2004, with ticks
// every 7 days (1 week)
c.yAxis().setDateScale(new DateTime(2004, 8, 16), new DateTime(2004, 11, 22), 86400 * 7)
;
// Set multi-style axis label formatting. Month labels are in Arial Bold font in "mmm d"
// format. Weekly labels just show the day of month and use minor tick (by using '-' as
// first character of format string).
c.yAxis().setMultiFormat(Chart.StartOfMonthFilter(), "<*font=Arial Bold*>{value|mmm d}",
Chart.StartOfDayFilter(), "-{value|d}");
// Set the y-axis to shown on the top (right + swapXY = top)
c.setYAxisOnRight();
// Set the labels on the x axis
c.xAxis().setLabels(labels);
// Reverse the x-axis scale so that it points downwards.
c.xAxis().setReverse();
// Set the horizontal ticks and grid lines to be between the bars
c.xAxis().setTickOffset(0.5);
// Add some symbols to the chart to represent milestones. The symbols are added using
// scatter layers. We need to specify the task index, date, name, symbol shape, size and
// color.
c.addScatterLayer(new double[] { 1 }, Chart.CTime(new DateTime[] { new DateTime(2004, 9, 13
) }), "Milestone 1", Chart.Cross2Shape(), 13, 0xffff00).setHTMLImageMap("{disable}");
c.addScatterLayer(new double[] { 3 }, Chart.CTime(new DateTime[] { new DateTime(2004, 10, 4
) }), "Milestone 2", Chart.StarShape(5), 15, 0xff00ff).setHTMLImageMap("{disable}");
c.addScatterLayer(new double[] { 5 }, Chart.CTime(new DateTime[] { new DateTime(2004, 11, 8
) }), "Milestone 3", Chart.TriangleSymbol, 13, 0xff9933).setHTMLImageMap("{disable}")
;
// Add a multi-color box-whisker layer to represent the gantt bars
BoxWhiskerLayer layer = c.addBoxWhiskerLayer2(Chart.CTime(startDate),
Chart.CTime(endDate), null, null, null, colors);
layer.setXData(taskNo);
layer.setBorderColor(Chart.SameAsMainColor);
// Divide the plot area height ( = 200 in this chart) by the number of tasks to get the
// height of each slot. Use 80% of that as the bar height.
layer.setDataWidth((int)(200 * 4 / 5 / labels.Length));
// Add a legend box at (140, 265) - bottom of the plot area. Use 8pt Arial Bold as the
// font with auto-grid layout. Set the width to the same width as the plot area. Set the
// backgorund to grey (dddddd).
LegendBox legendBox = c.addLegend2(140, 265, Chart.AutoGrid, "Arial Bold", 8);
legendBox.setWidth(461);
legendBox.setBackground(0xdddddd);
// The keys for the scatter layers (milestone symbols) will automatically be added to
// the legend box. We just need to add keys to show the meanings of the bar colors.
legendBox.addKey("Market Team", 0x00cc00);
legendBox.addKey("Planning Team", 0x0000cc);
legendBox.addKey("Development Team", 0xcc0000);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{xLabel}: {top|mmm dd, yyyy} to {bottom|mmm dd, yyyy}'");
}
//
// Draw the chart and display it in the given viewer
//
private void drawChart(WPFChartViewer viewer)
{
// Create an XYChart object 500 x 480 pixels in size, with the same background color
// as the container
XYChart c = new XYChart(500, 480, 0xccccff);
// Set the plotarea at (50, 40) and of size 400 x 400 pixels. Use light grey (c0c0c0)
// horizontal and vertical grid lines. Set 4 quadrant coloring, where the colors of
// the quadrants alternate between lighter and deeper grey (dddddd/eeeeee).
c.setPlotArea(50, 40, 400, 400, -1, -1, -1, 0xc0c0c0, 0xc0c0c0
).set4QBgColor(0xdddddd, 0xeeeeee, 0xdddddd, 0xeeeeee, 0x000000);
// Enable clipping mode to clip the part of the data that is outside the plot area.
c.setClipping();
// Set 4 quadrant mode, with both x and y axes symetrical around the origin
c.setAxisAtOrigin(Chart.XYAxisAtOrigin, Chart.XAxisSymmetric + Chart.YAxisSymmetric);
// Add a legend box at (450, 40) (top right corner of the chart) with vertical layout
// and 8 pts Arial Bold font. Set the background color to semi-transparent grey.
LegendBox b = c.addLegend(450, 40, true, "Arial Bold", 8);
b.setAlignment(Chart.TopRight);
b.setBackground(0x40dddddd);
// Add a titles to axes
c.xAxis().setTitle("Alpha Index");
c.yAxis().setTitle("Beta Index");
// Set axes width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// The default ChartDirector settings has a denser y-axis grid spacing and less-dense
// x-axis grid spacing. In this demo, we want the tick spacing to be symmetrical.
// We use around 50 pixels between major ticks and 25 pixels between minor ticks.
c.xAxis().setTickDensity(50, 25);
c.yAxis().setTickDensity(50, 25);
//
// In this example, we represent the data by scatter points. If you want to represent
// the data by somethings else (lines, bars, areas, floating boxes, etc), just modify
// the code below to use the layer type of your choice.
//
// Add scatter layer, using 11 pixels red (ff33333) X shape symbols
c.addScatterLayer(dataX0, dataY0, "Group A", Chart.Cross2Shape(), 11, 0xff3333);
// Add scatter layer, using 11 pixels green (33ff33) circle symbols
c.addScatterLayer(dataX1, dataY1, "Group B", Chart.CircleShape, 11, 0x33ff33);
// Add scatter layer, using 11 pixels blue (3333ff) triangle symbols
c.addScatterLayer(dataX2, dataY2, "Group C", Chart.TriangleSymbol, 11, 0x3333ff);
//
// In this example, we have not explicitly configured the full x and y range. In this case, the
// first time syncLinearAxisWithViewPort is called, ChartDirector will auto-scale the axis and
// assume the resulting range is the full range. In subsequent calls, ChartDirector will set the
// axis range based on the view port and the full range.
//
viewer.syncLinearAxisWithViewPort("x", c.xAxis());
viewer.syncLinearAxisWithViewPort("y", c.yAxis());
// We need to update the track line too. If the mouse is moving on the chart (eg. if
// the user drags the mouse on the chart to scroll it), the track line will be updated
// in the MouseMovePlotArea event. Otherwise, we need to update the track line here.
if ((!viewer.IsInMouseMoveEvent) && viewer.IsMouseOnPlotArea)
{
crossHair(c, viewer.PlotAreaMouseX, viewer.PlotAreaMouseY);
}
// Set the chart image to the ChartViewer
viewer.Chart = c;
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The XY data of the first data series
double[] dataX = { 50, 55, 37, 24, 42, 49, 63, 72, 83, 59 };
double[] dataY = { 3.6, 2.8, 2.5, 2.3, 3.8, 3.0, 3.8, 5.0, 6.0, 3.3 };
// Create a XYChart object of size 520 x 490 pixels
XYChart c = new XYChart(520, 490);
// Set the plotarea at (60, 40) and of size 450 x 400 pixels, with white background and a
// light grey border (0xc0c0c0). Turn on both horizontal and vertical grid lines with light
// grey color (0xc0c0c0)
c.setPlotArea(60, 40, 450, 400, 0xffffff, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a title to the chart using 18 point Times Bold Itatic font.
c.addTitle(" Chemical X Thermal Conductivity", "Times New Roman Bold Italic", 18);
// Add titles to the axes using 12pt Arial Bold Italic font
c.yAxis().setTitle("Thermal Conductivity (W/K)", "Arial Bold Italic", 12);
c.xAxis().setTitle("Concentration (g/liter)", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.yAxis().setWidth(3);
c.xAxis().setWidth(3);
// Add a scatter layer using (dataX, dataY)
ScatterLayer scatterLayer = c.addScatterLayer(dataX, dataY, "", Chart.GlassSphereShape, 13,
0xcc0000);
// Show custom Javascript tooltip for the scatter layer
scatterLayer.setHTMLImageMap("", "",
"onmouseover='showDataPointToolTip({x}, {value})' onmouseout='hideToolTip()'");
// Add a trend line layer for (dataX, dataY)
TrendLayer trendLayer = c.addTrendLayer2(dataX, dataY, 0xcc0000);
// Set the line width to 3 pixels
trendLayer.setLineWidth(3);
// Add a 95% confidence band for the line
trendLayer.addConfidenceBand(0.95, unchecked ((int)0x806666ff));
// Add a 95% confidence band (prediction band) for the points
trendLayer.addPredictionBand(0.95, unchecked ((int)0x8066ff66));
// Show custom Javascript tooltip for the trend layer
trendLayer.setHTMLImageMap("", "",
"onmouseover='showTrendLineToolTip({slope}, {intercept})' onmouseout='hideToolTip()'");
// Add a legend box at (60, 35) (top of the chart) with horizontal layout. Use 10pt Arial
// Bold Italic font. Set the background and border color to Transparent and use line style
// legend icons.
LegendBox legendBox = c.addLegend(60, 35, false, "Arial Bold Italic", 9);
legendBox.setBackground(Chart.Transparent);
legendBox.setLineStyleKey(true);
// Add entries to the legend box
legendBox.addKey("95% Line Confidence", unchecked ((int)0x806666ff));
legendBox.addKey("95% Point Confidence", unchecked ((int)0x8066ff66));
legendBox.addKey(String.Format("Trend Line: y = {0:0.0000} x + {1:0.0000}",
trendLayer.getSlope(), trendLayer.getIntercept()), 0xcc0000, 3);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// Include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("");
// Output Javascript chart model to the browser to suppport tracking cursor
viewer.ChartModel = c.getJsChartModel();
}
//
// Create chart
//
private void createChart(RazorChartViewer viewer)
{
// The XY data of the first data series
double[] dataX = {50, 55, 37, 24, 42, 49, 63, 72, 83, 59};
double[] dataY = {3.6, 2.8, 2.5, 2.3, 3.8, 3.0, 3.8, 5.0, 6.0, 3.3};
// Create a XYChart object of size 450 x 420 pixels
XYChart c = new XYChart(450, 420);
// Set the plotarea at (55, 65) and of size 350 x 300 pixels, with white background and a
// light grey border (0xc0c0c0). Turn on both horizontal and vertical grid lines with light
// grey color (0xc0c0c0)
c.setPlotArea(55, 65, 350, 300, 0xffffff, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a title to the chart using 18 point Times Bold Itatic font.
c.addTitle("Server Performance", "Times New Roman Bold Italic", 18);
// Add titles to the axes using 12pt Arial Bold Italic font
c.yAxis().setTitle("Response Time (sec)", "Arial Bold Italic", 12);
c.xAxis().setTitle("Server Load (TPS)", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.yAxis().setWidth(3);
c.xAxis().setWidth(3);
// Add a scatter layer using (dataX, dataY)
ScatterLayer scatterLayer = c.addScatterLayer(dataX, dataY, "", Chart.DiamondSymbol, 11,
0x008000);
// tool tip for scatter layer
scatterLayer.setHTMLImageMap("", "", "title='Response time at {x} TPS: {value} sec'");
// Add a trend line layer for (dataX, dataY)
TrendLayer trendLayer = c.addTrendLayer2(dataX, dataY, 0x008000);
// Set the line width to 3 pixels
trendLayer.setLineWidth(3);
// Add a 95% confidence band for the line
trendLayer.addConfidenceBand(0.95, unchecked((int)0x806666ff));
// Add a 95% confidence band (prediction band) for the points
trendLayer.addPredictionBand(0.95, unchecked((int)0x8066ff66));
// tool tip for trend layer
trendLayer.setHTMLImageMap("", "",
"title='Slope = {slope|4} sec/TPS; Intercept = {intercept|4} sec'");
// Add a legend box at (50, 30) (top of the chart) with horizontal layout. Use 10pt Arial
// Bold Italic font. Set the background and border color to Transparent.
LegendBox legendBox = c.addLegend(50, 30, false, "Arial Bold Italic", 10);
legendBox.setBackground(Chart.Transparent);
// Add entries to the legend box
legendBox.addKey("95% Line Confidence", unchecked((int)0x806666ff));
legendBox.addKey("95% Point Confidence", unchecked((int)0x8066ff66));
// Display the trend line parameters as a text table formatted using CDML
ChartDirector.TextBox textbox = c.addText(56, 65, String.Format(
"<*block*>Slope\nIntercept\nCorrelation\nStd Error<*/*> <*block*>{0:0.0000} " +
"sec/tps\n{1:0.0000} sec\n{2:0.0000}\n{3:0.0000} sec<*/*>", trendLayer.getSlope(),
trendLayer.getIntercept(), trendLayer.getCorrelation(), trendLayer.getStdError()),
"Arial Bold", 8);
// Set the background of the text box to light grey, with a black border, and 1 pixel 3D
// border
textbox.setBackground(0xc0c0c0, 0, 1);
// Output the chart
viewer.Image = c.makeWebImage(Chart.PNG);
// include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("");
}
//
// 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}%'");
}
//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 data of the first data series
double[] dataX0 = { 50, 55, 37, 24, 42, 49, 63, 72, 83, 59 };
double[] dataY0 = { 3.6, 2.8, 2.5, 2.3, 3.8, 3.0, 3.8, 5.0, 6.0, 3.3 };
// The XY data of the second data series
double[] dataX1 = { 50, 55, 37, 24, 42, 49, 63, 72, 83, 59 };
double[] dataY1 = { 1.6, 1.8, 0.8, 0.5, 1.3, 1.5, 2.3, 2.4, 2.9, 1.5 };
// Tool tip formats for data points and trend lines
string scatterToolTip = "title='{dataSetName}: Response time at {x} TPS: {value} sec'";
string trendToolTip = "title='Slope = {slope|4} sec/TPS; Intercept = {intercept|4} sec'"
;
// Create a XYChart object of size 450 x 420 pixels
XYChart c = new XYChart(450, 420);
// Set the plotarea at (55, 65) and of size 350 x 300 pixels, with white background and
// a light grey border (0xc0c0c0). Turn on both horizontal and vertical grid lines with
// light grey color (0xc0c0c0)
c.setPlotArea(55, 65, 350, 300, 0xffffff, -1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a legend box at (50, 30) (top of the chart) with horizontal layout. Use 12pt
// Times Bold Italic font. Set the background and border color to Transparent.
c.addLegend(50, 30, false, "Times New Roman Bold Italic", 12).setBackground(
Chart.Transparent);
// Add a title to the chart using 18 point Times Bold Itatic font.
c.addTitle("Server Performance", "Times New Roman Bold Italic", 18);
// Add titles to the axes using 12pt Arial Bold Italic font
c.yAxis().setTitle("Response Time (sec)", "Arial Bold Italic", 12);
c.xAxis().setTitle("Server Load (TPS)", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.yAxis().setWidth(3);
c.xAxis().setWidth(3);
// Add a scatter layer using (dataX0, dataY0)
ScatterLayer scatter1 = c.addScatterLayer(dataX0, dataY0, "Server AAA",
Chart.DiamondSymbol, 11, 0x008000);
scatter1.setHTMLImageMap("", "", scatterToolTip);
// Add a trend line layer for (dataX0, dataY0)
TrendLayer trend1 = c.addTrendLayer2(dataX0, dataY0, 0x008000);
trend1.setLineWidth(3);
trend1.setHTMLImageMap("", "", trendToolTip);
// Add a scatter layer for (dataX1, dataY1)
ScatterLayer scatter2 = c.addScatterLayer(dataX1, dataY1, "Server BBB",
Chart.TriangleSymbol, 9, 0x6666ff);
scatter2.setHTMLImageMap("", "", scatterToolTip);
// Add a trend line layer for (dataX1, dataY1)
TrendLayer trend2 = c.addTrendLayer2(dataX1, dataY1, 0x6666ff);
trend2.setLineWidth(3);
trend2.setHTMLImageMap("", "", trendToolTip);
// Output the chart
viewer.Chart = c;
// include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable");
}