//
// 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();
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The data for the line chart
double[] data = { 50, 55, 47, 34, 42, 49, 63, 62, 73, 59, 56, 50, 64, 60, 67, 67, 58, 59,
73, 77, 84, 82, 80, 91 };
// The labels for the line chart
string[] labels = { "Jan 2000", "Feb 2000", "Mar 2000", "Apr 2000", "May 2000",
"Jun 2000", "Jul 2000", "Aug 2000", "Sep 2000", "Oct 2000","Nov 2000", "Dec 2000",
"Jan 2001", "Feb 2001", "Mar 2001", "Apr 2001", "May 2001","Jun 2001", "Jul 2001",
"Aug 2001", "Sep 2001", "Oct 2001", "Nov 2001", "Dec 2001" };
// Create a XYChart object of size 500 x 320 pixels, with a pale purpule (0xffccff)
// background, a black border, and 1 pixel 3D border effect.
XYChart c = new XYChart(500, 320, 0xffccff, 0x000000, 1);
// Set the plotarea at (55, 45) and of size 420 x 210 pixels, with white background.
// Turn on both horizontal and vertical grid lines with light grey color (0xc0c0c0)
c.setPlotArea(55, 45, 420, 210, 0xffffff, -1, -1, 0xc0c0c0, -1);
// Add a legend box at (55, 25) (top of the chart) with horizontal layout. Use 8pt Arial
// font. Set the background and border color to Transparent.
c.addLegend(55, 22, false, "", 8).setBackground(Chart.Transparent);
// Add a title box to the chart using 13pt Times Bold Italic font. The text is white
// (0xffffff) on a purple (0x800080) background, with a 1 pixel 3D border.
c.addTitle("Long Term Server Load", "Times New Roman Bold Italic", 13, 0xffffff
).setBackground(0x800080, -1, 1);
// Add a title to the y axis
c.yAxis().setTitle("MBytes");
// Set the labels on the x axis. Rotate the font by 90 degrees.
c.xAxis().setLabels(labels).setFontAngle(90);
// Add a line layer to the chart
LineLayer lineLayer = c.addLineLayer();
// Add the data to the line layer using light brown color (0xcc9966) with a 7 pixel
// square symbol
lineLayer.addDataSet(data, 0xcc9966, "Server Utilization").setDataSymbol(
Chart.SquareSymbol, 7);
// Set the line width to 2 pixels
lineLayer.setLineWidth(2);
// tool tip for the line layer
lineLayer.setHTMLImageMap("", "", "title='{xLabel}: {value} MBytes'");
// Add a trend line layer using the same data with a dark green (0x008000) color. Set
// the line width to 2 pixels
TrendLayer trendLayer = c.addTrendLayer(data, 0x008000, "Trend Line");
trendLayer.setLineWidth(2);
// tool tip for the trend layer
trendLayer.setHTMLImageMap("", "", "title='Change rate: {slope|2} MBytes/per month'");
// Output the chart
viewer.Chart = c;
// include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable");
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// The 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");
}
//
// 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("");
}
//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("");
}
