//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WPFChartViewer viewer, int chartIndex)
{
// Use random table to generate a random series. The random table is set to 1 col x 51
// rows, with 9 as the seed
RanTable rantable = new RanTable(9, 1, 51);
// Set the 1st column to start from 100, with changes between rows from -5 to +5
rantable.setCol(0, 100, -5, 5);
// Get the 1st column of the random table as the data set
double[] data = rantable.getCol(0);
// Create a XYChart object of size 600 x 300 pixels
XYChart c = new XYChart(600, 300);
// Set the plotarea at (50, 35) and of size 500 x 240 pixels. Enable both the horizontal
// and vertical grids by setting their colors to grey (0xc0c0c0)
c.setPlotArea(50, 35, 500, 240).setGridColor(0xc0c0c0, 0xc0c0c0);
// Add a title to the chart using 18 point Times Bold Itatic font.
c.addTitle("LOWESS Generic Curve Fitting Algorithm", "Times New Roman Bold Italic", 18);
// Set the y axis line width to 3 pixels
c.yAxis().setWidth(3);
// Add a title to the x axis using 12pt Arial Bold Italic font
c.xAxis().setTitle("Server Load (TPS)", "Arial Bold Italic", 12);
// Set the x axis line width to 3 pixels
c.xAxis().setWidth(3);
// Set the x axis scale from 0 - 50, with major tick every 5 units and minor tick every
// 1 unit
c.xAxis().setLinearScale(0, 50, 5, 1);
// Add a blue layer to the chart
LineLayer layer = c.addLineLayer2();
// Add a red (0x80ff0000) data set to the chart with square symbols
layer.addDataSet(data, unchecked ((int)0x80ff0000)).setDataSymbol(Chart.SquareSymbol);
// Set the line width to 2 pixels
layer.setLineWidth(2);
// Use lowess for curve fitting, and plot the fitted data using a spline layer with line
// width set to 3 pixels
c.addSplineLayer(new ArrayMath(data).lowess().result(), 0x0000ff).setLineWidth(3);
// Set zero affinity to 0 to make sure the line is displayed in the most detail scale
c.yAxis().setAutoScale(0, 0, 0);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "", "title='({x}, {value|2})'");
}
private void UpdateHistogramForImage()
{
if (this.InvokeRequired)
{
Action a = new Action(UpdateHistogramForImage);
this.BeginInvoke(a);
}
else
{
HImage currentImage = this.ImageToBeSaved.CopyImage();
HImage rImg, gImg, bImg;
rImg = currentImage.Decompose3(out gImg, out bImg);
HTuple RGrayValues = Globals.GetGrayValuesOfPixel(rImg);
HTuple GGrayValues = Globals.GetGrayValuesOfPixel(gImg);
HTuple BGrayValues = Globals.GetGrayValuesOfPixel(bImg);
double[] redData;
double[] greenData;
double[] blueData;
XYChart c = new XYChart(chartViewer.Width - 10, chartViewer.Height - 10, 0xffdddd, 0x000000, 1);
c.setPlotArea(50, 10, chartViewer.Width - 100, chartViewer.Height - 60, 0xffffff, -1, -1);
redData = RGrayValues;
greenData = GGrayValues;
blueData = BGrayValues;
// Add a line chart layer using the given data
c.addSplineLayer(redData, 0xFF0000);
c.addSplineLayer(greenData, 0x00FF00);
c.addSplineLayer(blueData, 0x0000FF);
c.xAxis().setLinearScale(0, 255, 255);
chartViewer.Chart = c;
}
}
public WinChartViewer UpdateChartUI(WinChartViewer viewer)
{
double[] data = { };
double[] redData;
double[] greenData;
double[] blueData;
// Create a XYChart object of size 250 x 250 pixels
XYChart c = new XYChart(viewer.Width - 10, viewer.Height - 10, 0xffdddd, 0x000000, 1);
// Set the plotarea at (30, 20) and of size 200 x 200 pixels
c.setPlotArea(50, 10, viewer.Width - 100, viewer.Height - 60, 0xffffff, -1, -1);
if (this.CameraAcquisition.CurrentNumberOfChannels == Properties.Settings.Default.NumberOfChannelsInIRAndRGBImage)
{
redData = currentOnCameraFFCData.GrayValues.RPlaneVals;
greenData = currentOnCameraFFCData.GrayValues.GPlaneVals;
blueData = currentOnCameraFFCData.GrayValues.BPlaneVals;
data = currentOnCameraFFCData.GrayValues.MPlaneVals;
// Add a line chart layer using the given data
c.addSplineLayer(redData, 0xFF0000);
c.addSplineLayer(greenData, 0x00FF00);
c.addSplineLayer(blueData, 0x0000FF);
c.addSplineLayer(data, 0x000000);
}
else if (this.CameraAcquisition.CurrentNumberOfChannels == Properties.Settings.Default.NumberOfChannelsInMonoImage)
{
data = currentOnCameraFFCData.GrayValues.MPlaneVals;
// Add a line chart layer using the given data
c.addSplineLayer(data);
}
else
{
redData = currentOnCameraFFCData.GrayValues.RPlaneVals;
greenData = currentOnCameraFFCData.GrayValues.GPlaneVals;
blueData = currentOnCameraFFCData.GrayValues.BPlaneVals;
// Add a line chart layer using the given data
c.addSplineLayer(redData, 0xFF0000);
c.addSplineLayer(greenData, 0x00FF00);
c.addSplineLayer(blueData, 0x0000FF);
}
double XAxisDataCount = this.CameraAcquisition.CurrentImageWidth;
c.yAxis().setLinearScale(0, 255, 255);
double majorTicks = Math.Round(XAxisDataCount / 8, 0);
double minorTicks = Math.Round(XAxisDataCount);
c.xAxis().setLinearScale(0, Math.Round(XAxisDataCount, 0), majorTicks);
c.yAxis().addMark(200, 0xA31F1F, "Max").setLineWidth(2);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Hour {xLabel}: Traffic {value} GBytes'");
return(viewer);
}
//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)
{
//
// This example demonstrates creating a histogram with a bell curve from raw data. About
// half of the code is to sort the raw data into slots and to generate the points on the
// bell curve. The remaining half of the code is the actual charting code.
//
// Generate a random guassian distributed data series as the input data for this
// example.
RanSeries r = new RanSeries(66);
double[] samples = r.getGaussianSeries(200, 100, 10);
//
// Classify the numbers into slots. In this example, the slot width is 5 units.
//
int slotSize = 5;
// Compute the min and max values, and extend them to the slot boundary.
ArrayMath m = new ArrayMath(samples);
double minX = Math.Floor(m.min() / slotSize) * slotSize;
double maxX = Math.Floor(m.max() / slotSize) * slotSize + slotSize;
// We can now determine the number of slots
int slotCount = (int)((maxX - minX + 0.5) / slotSize);
double[] frequency = new double[slotCount];
// Count the data points contained in each slot
for (int i = 0; i < samples.Length; ++i)
{
int slotIndex = (int)((samples[i] - minX) / slotSize);
frequency[slotIndex] = frequency[slotIndex] + 1;
}
//
// Compute Normal Distribution Curve
//
// The mean and standard deviation of the data
double mean = m.avg();
double stdDev = m.stdDev();
// The normal distribution curve (bell curve) is a standard statistics curve. We need to
// vertically scale it to make it proportion to the frequency count.
double scaleFactor = slotSize * samples.Length / stdDev / Math.Sqrt(6.2832);
// In this example, we plot the bell curve up to 3 standard deviations.
double stdDevWidth = 3.0;
// We generate 4 points per standard deviation to be joined with a spline curve.
int bellCurveResolution = (int)(stdDevWidth * 4 + 1);
double[] bellCurve = new double[bellCurveResolution];
for (int i = 0; i < bellCurveResolution; ++i)
{
double z = 2 * i * stdDevWidth / (bellCurveResolution - 1) - stdDevWidth;
bellCurve[i] = Math.Exp(-z * z / 2) * scaleFactor;
}
//
// At this stage, we have obtained all data and can plot the chart.
//
// Create a XYChart object of size 600 x 360 pixels
XYChart c = new XYChart(600, 360);
// Set the plotarea at (50, 30) and of size 500 x 300 pixels, with transparent
// background and border and light grey (0xcccccc) horizontal grid lines
c.setPlotArea(50, 30, 500, 300, Chart.Transparent, -1, Chart.Transparent, 0xcccccc);
// Display the mean and standard deviation on the chart
c.addTitle("Mean = " + c.formatValue(mean, "{value|1}") + ", Standard Deviation = " +
c.formatValue(stdDev, "{value|2}"), "Arial");
// Set the x and y axis label font to 12pt Arial
c.xAxis().setLabelStyle("Arial", 12);
c.yAxis().setLabelStyle("Arial", 12);
// Set the x and y axis stems to transparent, and the x-axis tick color to grey
// (0x888888)
c.xAxis().setColors(Chart.Transparent, Chart.TextColor, Chart.TextColor, 0x888888);
c.yAxis().setColors(Chart.Transparent);
// Draw the bell curve as a spline layer in red (0xdd0000) with 2-pixel line width
SplineLayer bellLayer = c.addSplineLayer(bellCurve, 0xdd0000);
bellLayer.setXData2(mean - stdDevWidth * stdDev, mean + stdDevWidth * stdDev);
bellLayer.setLineWidth(2);
// No tooltip is needed for the spline layer
bellLayer.setHTMLImageMap("{disable}");
// Draw the histogram as bars in blue (0x6699bb) with dark blue (0x336688) border
BarLayer histogramLayer = c.addBarLayer(frequency, 0x6699bb);
histogramLayer.setBorderColor(0x336688);
// The center of the bars span from minX + half_bar_width to maxX - half_bar_width
histogramLayer.setXData2(minX + slotSize / 2.0, maxX - slotSize / 2.0);
// Configure the bars to touch each other with no gap in between
histogramLayer.setBarGap(Chart.TouchBar);
// Use rounded corners for decoration
histogramLayer.setRoundedCorners();
// Tool tip for the histogram
histogramLayer.setHTMLImageMap("", "", "title='{value}'");
// ChartDirector by default will extend the x-axis scale by 0.5 unit to cater for the
// bar width. It is because a bar plotted at x actually occupies (x +/- half_bar_width),
// and the bar width is normally 1 for label based x-axis. However, this chart is using
// a linear x-axis instead of label based. So we disable the automatic extension and add
// a dummy layer to extend the x-axis scale to cover minX to maxX.
c.xAxis().setIndent(false);
c.addLineLayer2().setXData(minX, maxX);
// For the automatic y-axis labels, set the minimum spacing to 40 pixels.
c.yAxis().setTickDensity(40);
// 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 data for the upper and lower bounding lines
double[] upperY = { 60, 60, 100, 100, 60, 60 };
double[] lowerY = { 40, 40, 80, 80, 40, 40 };
double[] zoneX = { 0, 2.5, 3.5, 5.5, 6.5, 10 };
// The data for the spline curve
double[] curveY = { 50, 44, 54, 48, 58, 50, 90, 85, 104, 82, 96, 90, 74, 52, 35, 58, 46,
54, 48, 52, 50 };
double[] curveX = { 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8,
8.5, 9, 9.5, 10 };
// Create a XYChart object of size 600 x 300 pixels, with a light grey (cccccc)
// background, black border, and 1 pixel 3D border effect.
XYChart c = new XYChart(600, 300, 0xcccccc, 0x000000, 1);
// Set the plotarea at (55, 58) and of size 520 x 195 pixels, with white background.
// Turn on both horizontal and vertical grid lines with light grey color (cccccc)
c.setPlotArea(55, 58, 520, 195, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
// Add a legend box at (55, 32) (top of the chart) with horizontal layout. Use 9pt Arial
// Bold font. Set the background and border color to Transparent.
c.addLegend(55, 32, false, "Arial Bold", 9).setBackground(Chart.Transparent);
// Add a title box to the chart using 15pt Times Bold Italic font. The title is in CDML
// and includes embedded images for highlight. The text is white (ffffff) on a black
// background, with a 1 pixel 3D border.
c.addTitle(
"<*block,valign=absmiddle*><*img=star.png*><*img=star.png*> Performance Enhancer " +
"<*img=star.png*><*img=star.png*><*/*>", "Times New Roman Bold Italic", 15, 0xffffff
).setBackground(0x000000, -1, 1);
// Add a title to the y axis
c.yAxis().setTitle("Temperature");
// Add a title to the x axis using CMDL
c.xAxis().setTitle(
"<*block,valign=absmiddle*><*img=clock.png*> Elapsed Time (hour)<*/*>");
// Set the axes width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// Add a purple (800080) spline layer to the chart with a line width of 2 pixels
SplineLayer splineLayer = c.addSplineLayer(curveY, 0x800080, "Molecular Temperature");
splineLayer.setXData(curveX);
splineLayer.setLineWidth(2);
// Add a line layer to the chart with two dark green (338033) data sets, and a line
// width of 2 pixels
LineLayer lineLayer = c.addLineLayer2();
lineLayer.addDataSet(upperY, 0x338033, "Target Zone");
lineLayer.addDataSet(lowerY, 0x338033);
lineLayer.setXData(zoneX);
lineLayer.setLineWidth(2);
// Color the zone between the upper zone line and lower zone line as semi-transparent
// light green (8099ff99)
c.addInterLineLayer(lineLayer.getLine(0), lineLayer.getLine(1),
unchecked ((int)0x8099ff99), unchecked ((int)0x8099ff99));
// If the spline line gets above the upper zone line, color to area between the lines
// red (ff0000)
c.addInterLineLayer(splineLayer.getLine(0), lineLayer.getLine(0), 0xff0000,
Chart.Transparent);
// If the spline line gets below the lower zone line, color to area between the lines
// blue (0000ff)
c.addInterLineLayer(splineLayer.getLine(0), lineLayer.getLine(1), Chart.Transparent,
0x0000ff);
// Add a custom CDML text at the bottom right of the plot area as the logo
c.addText(575, 250,
"<*block,valign=absmiddle*><*img=small_molecule.png*> <*block*><*font=Times New " +
"Roman Bold Italic,size=10,color=804040*>Molecular\nEngineering<*/*>").setAlignment(
Chart.BottomRight);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='Temperature at hour {x}: {value} C'");
}
/// <summary>
/// 绘制噪声数据比较分析图
/// </summary>
private void CreateChart(int line)
{
if (sRecorder == null)
{
return;
}
XYChart c = new XYChart(700, 360);
c.setBackground(c.linearGradientColor(0, 0, 0, 100, 0x99ccff, 0xffffff), 0x888888);
ChartDirector.TextBox title = c.addTitle("噪声数据比较分析图", "Arial Bold", 13);
title.setPos(0, 20);
c.setPlotArea(80, 80, 580, 230, 0xffffff, -1, -1, c.dashLineColor(
0xaaaaaa, Chart.DotLine), -1);
LegendBox legendBox = c.addLegend(350, 80, false, "Arial", 8);
legendBox.setAlignment(Chart.BottomCenter);
legendBox.setBackground(Chart.Transparent, Chart.Transparent);
legendBox.setLineStyleKey();
legendBox.setFontSize(8);
c.xAxis().setIndent(true);
c.xAxis().setTitle("噪声频率(Hz)");
c.yAxis().setTitle("噪声幅度(%)");
LineLayer layer1;
ChartDirector.DataSet ds;
double[] dataSet;
double[] da;
dataSet = sRecorder.Data.Amplitude.Skip(4).ToArray();
da = sRecorder.Data.Frequency.Skip(4).ToArray();
switch (line)
{
case 0:
layer1 = c.addLineLayer();
ds = layer1.addDataSet(dataSet, GetRandomColor(0), "记录仪" + sRecorder.ID);
layer1.setLineWidth(2);
layer1.setXData(da);
break;
case 1:
layer1 = c.addSplineLayer();
ds = layer1.addDataSet(dataSet, GetRandomColor(0), "记录仪" + sRecorder.ID);
layer1.setLineWidth(2);
layer1.setXData(da);
break;
}
if (eRecorder != null && sRecorder.ID != eRecorder.ID)
{
dataSet = eRecorder.Data.Amplitude.Skip(4).ToArray();
da = eRecorder.Data.Frequency.Skip(4).ToArray();
switch (line)
{
case 0:
layer1 = c.addLineLayer();
ds = layer1.addDataSet(dataSet, GetRandomColor(1), "记录仪" + eRecorder.ID);
layer1.setLineWidth(2);
layer1.setXData(da);
break;
case 1:
layer1 = c.addSplineLayer();
ds = layer1.addDataSet(dataSet, GetRandomColor(1), "记录仪" + eRecorder.ID);
layer1.setLineWidth(2);
layer1.setXData(da);
break;
}
}
c.xAxis().setLabelStep(15);
c.yAxis().setDateScale(0, 120);
winChartViewer1.Chart = c;
winChartViewer1.ImageMap = c.getHTMLImageMap("clickable", "",
"title='噪声频率: {x}Hz, \n{dataSetName}: {value}%'");
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The data for the line chart
double[] data0 = { 70, 73, 80, 90, 95, 93, 82, 77, 82, 101, 111, 115 };
double[] data1 = { 90, 96, 89, 77, 82, 96, 109, 109, 99, 108, 96, 91 };
double[] data2 = { 58, 34, 25, 49, 64, 10, 16, 40, 25, 49, 40, 22 };
// The labels for the line chart
string[] labels = { "2008-01", "2008-02", "2008-03", "2008-04", "2008-05", "2008-06",
"2008-07", "2008-08", "2008-09", "2008-10", "2008-11", "2008-12" };
// Create a XYChart object of size 450 x 450 pixels
XYChart c = new XYChart(450, 450);
// Add a title to the chart using 15pt Arial Italic font.
ChartDirector.TextBox title = c.addTitle("Inter-line Coloring", "Arial Italic", 15);
// Add a legend box where the top-center is anchored to the horizontal center of the
// chart, just under the title. Use horizontal layout and 10 points Arial Bold font, and
// transparent background and border. Use line style legend key.
LegendBox legendBox = c.addLegend(c.getWidth() / 2, title.getHeight(), false,
"Arial Bold Italic", 10);
legendBox.setBackground(Chart.Transparent, Chart.Transparent);
legendBox.setAlignment(Chart.TopCenter);
legendBox.setLineStyleKey();
// Tentatively set the plotarea at (70, 65) and of (chart_width - 100) x (chart_height -
// 110) in size. Use light grey (c0c0c0) border and horizontal and vertical grid lines.
PlotArea plotArea = c.setPlotArea(70, 65, c.getWidth() - 100, c.getHeight() - 110, -1,
-1, 0xc0c0c0, 0xc0c0c0, -1);
// Add a title to the y axis using 12pt Arial Bold Italic font
c.yAxis().setTitle("Axis Title Placeholder", "Arial Bold Italic", 12);
// Add a title to the x axis using 12pt Arial Bold Italic font
c.xAxis().setTitle("Axis Title Placeholder", "Arial Bold Italic", 12);
// Set the axes line width to 3 pixels
c.xAxis().setWidth(3);
c.yAxis().setWidth(3);
// Set the labels on the x axis.
c.xAxis().setLabels(labels);
// Use 8 points Arial rotated by 90 degrees as the x-axis label font
c.xAxis().setLabelStyle("Arial", 8, Chart.TextColor, 90);
// Add a spline curve to the chart
SplineLayer layer0 = c.addSplineLayer(data0, 0xff0000, "Data Set 0");
layer0.setLineWidth(2);
// Add a normal line to the chart
LineLayer layer1 = c.addLineLayer(data1, 0x008800, "Data Set 1");
layer1.setLineWidth(2);
// Color the region between the above spline curve and normal line. Use the
// semi-transparent red (80ff000000) if the spline curve is higher than the normal line,
// otherwise use semi-transparent green (80008800)
c.addInterLineLayer(layer0.getLine(), layer1.getLine(), unchecked ((int)0x80ff0000),
unchecked ((int)0x80008800));
// Add another normal line to the chart
LineLayer layer2 = c.addLineLayer(data2, 0x0000ff, "Data Set 2");
layer2.setLineWidth(2);
// Add a horizontal mark line to the chart at y = 40
Mark mark = c.yAxis().addMark(40, -1, "Threshold");
mark.setLineWidth(2);
// Set the mark line to purple (880088) dash line. Use white (ffffff) for the mark
// label.
mark.setMarkColor(c.dashLineColor(0x880088), 0xffffff);
// Put the mark label at the left side of the mark, with a purple (880088) background.
mark.setAlignment(Chart.Left);
mark.setBackground(0x880088);
// Color the region between the above normal line and mark line. Use the
// semi-transparent blue (800000ff) if the normal line is higher than the mark line,
// otherwise use semi-transparent purple (80880088)
c.addInterLineLayer(layer2.getLine(), mark.getLine(), unchecked ((int)0x800000ff),
unchecked ((int)0x80880088));
// Layout the legend box, so we can get its height
c.layoutLegend();
// Adjust the plot area size, such that the bounding box (inclusive of axes) is 10
// pixels from the left edge, just under the legend box, 25 pixels from the right edge,
// and 10 pixels from the bottom edge.
c.packPlotArea(10, legendBox.getTopY() + legendBox.getHeight(), c.getWidth() - 25,
c.getHeight() - 10);
// After determining the exact plot area position, we may adjust the legend box and the
// title positions so that they are centered relative to the plot area (instead of the
// chart)
legendBox.setPos(plotArea.getLeftX() + (plotArea.getWidth() - legendBox.getWidth()) / 2,
legendBox.getTopY());
title.setPos(plotArea.getLeftX() + (plotArea.getWidth() - title.getWidth()) / 2,
title.getTopY());
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{dataSetName} in {xLabel}: {value}'");
}
//Main code for creating chart.
//Note: the argument chartIndex is unused because this demo only has 1 chart.
public void createChart(WinChartViewer viewer, int chartIndex)
{
// The data for the chart
double[] data0 = { 32, 39, 23, 28, 41, 38, 26, 35, 29 };
double[] data1 = { 50, 55, 47, 34, 47, 53, 38, 40, 51 };
// The labels for the chart
string[] labels = { "0", "1", "2", "3", "4", "5", "6", "7", "8" };
// Create a XYChart object of size 600 x 300 pixels, with a pale red (ffdddd)
// background, black border, 1 pixel 3D border effect and rounded corners.
XYChart c = new XYChart(600, 300, 0xffdddd, 0x000000, 1);
c.setRoundedFrame();
// Set the plotarea at (55, 58) and of size 520 x 195 pixels, with white (ffffff)
// background. Set horizontal and vertical grid lines to grey (cccccc).
c.setPlotArea(55, 58, 520, 195, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
// Add a legend box at (55, 32) (top of the chart) with horizontal layout. Use 9pt Arial
// Bold font. Set the background and border color to Transparent.
c.addLegend(55, 32, false, "Arial Bold", 9).setBackground(Chart.Transparent);
// Add a title box to the chart using 15pt Times Bold Italic font. The title is in CDML
// and includes embedded images for highlight. The text is white (ffffff) on a dark red
// (880000) background, with soft lighting effect from the right side.
c.addTitle(
"<*block,valign=absmiddle*><*img=@/images/star.png*><*img=@/images/star.png*> " +
"Performance Enhancer <*img=@/images/star.png*><*img=@/images/star.png*><*/*>",
"Times New Roman Bold Italic", 15, 0xffffff).setBackground(0x880000, -1,
Chart.softLighting(Chart.Right));
// Add a title to the y axis
c.yAxis().setTitle("Energy Concentration (KJ per liter)");
// Set the labels on the x axis
c.xAxis().setLabels(labels);
// Add a title to the x axis using CMDL
c.xAxis().setTitle(
"<*block,valign=absmiddle*><*img=@/images/clock.png*> Elapsed Time (hour)<*/*>");
// Set the axes width to 2 pixels
c.xAxis().setWidth(2);
c.yAxis().setWidth(2);
// Add a spline layer to the chart
SplineLayer layer = c.addSplineLayer();
// Set the default line width to 2 pixels
layer.setLineWidth(2);
// Add a data set to the spline layer, using blue (0000c0) as the line color, with
// yellow (ffff00) circle symbols.
layer.addDataSet(data1, 0x0000c0, "Target Group").setDataSymbol(Chart.CircleSymbol, 9,
0xffff00);
// Add a data set to the spline layer, using brown (982810) as the line color, with pink
// (f040f0) diamond symbols.
layer.addDataSet(data0, 0x982810, "Control Group").setDataSymbol(Chart.DiamondSymbol,
11, 0xf040f0);
// Add a custom CDML text at the bottom right of the plot area as the logo
c.addText(575, 250,
"<*block,valign=absmiddle*><*img=@/images/small_molecule.png*> <*block*>" +
"<*font=Times New Roman Bold Italic,size=10,color=804040*>Molecular\nEngineering" +
"<*/*>").setAlignment(Chart.BottomRight);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
viewer.ImageMap = c.getHTMLImageMap("clickable", "",
"title='{dataSetName} at t = {xLabel} hour: {value} KJ/liter'");
}
public void createChartCenter(WinChartViewer viewer, string img)
{
// The data for the chart
//double[] data0;
//double[] data1;
//double[] data2;
//double[] data3;
//string[] labels;
//int idate;
////double[] data0 = { 185, 176, 135, 144,99, 120, 175, 128, 175, 142, 172, 120, 175, 123, 120, 185, 145, 185, 152, 142, 156, 156, 175, 185, 175, 148, 142 };
////double[] data1 = { 145, 153, 123, 175, 120, 105, 142, 147, 145, 184, 124, 132, 102, 125, 165, 156, 125, 156, 125, 143, 142, 148, 129, 145, 169, 136, 187 };
////double[] data2 = { 135, 120, 145, 126, 100, 145, 120, 120, 156, 129, 168, 185, 165, 135, 158, 125, 126, 125, 163, 165, 132, 143, 138, 136, 185, 159, 144 };
////double[] data3 = { 150, 110, 187, 173, 85, 100, 135, 156, 155, 120, 127, 122, 125, 145, 134, 185, 132, 185, 128, 123, 185, 129, 136, 162, 125, 189, 165 };
//if (_dt_grid != null && _dt_grid.Rows.Count > 0)
//{
// idate = _dt_grid.Rows.Count;
// data0 = new double[idate];
// data1 = new double[idate];
// data2 = new double[idate];
// data3 = new double[idate];
// labels = new string[idate];
// for (int i = 0; i < idate - 1; i++)
// {
// data0[i] = Convert.ToDouble(_dt_grid.Rows[i]["F1"].ToString());
// data1[i] = Convert.ToDouble(_dt_grid.Rows[i]["F2"].ToString());
// data2[i] = Convert.ToDouble(_dt_grid.Rows[i]["F3"].ToString());
// data3[i] = Convert.ToDouble(_dt_grid.Rows[i]["F4"].ToString());
// labels[i] = _dt_grid.Rows[i]["DD"].ToString();
// }
//}
//else return;
// The labels for the chart
//string[] labels = { "0", "1", "2", "3", "4", "5", "6", "7", "8"
// };
// Create a XYChart object of size 600 x 300 pixels, with a pale red
// (ffdddd) background, black border, 1 pixel 3D border effect and
// rounded corners.
XYChart c = new XYChart(viewer.Width, viewer.Height);
c.setBorder(10);
// c.setRoundedFrame();
// Set the plotarea at (55, 58) and of size 520 x 195 pixels, with white
// (ffffff) background. Set horizontal and vertical grid lines to grey
// (cccccc).
c.setPlotArea(55, 58, c.getWidth() - 110, c.getHeight() - 150, 0xf4f4f4,
-1, Chart.Transparent, c.dashLineColor(0xffffff, Chart.Transparent));
// , Chart.Transparent, -1, 0xffffff, 0xffffff
// Add a legend box at (55, 32) (top of the chart) with horizontal
// layout. Use 9 pts Arial Bold font. Set the background and border color
// to Transparent.
//c.addLegend(55, 32, false, "Arial Bold", 9).setBackground(
// Chart.Transparent);
// Add a title box to the chart using 15 pts Times Bold Italic font. The
// title is in CDML and includes embedded images for highlight. The text
// is white (ffffff) on a dark red (880000) background, with soft
// lighting effect from the right side.
//c.addTitle(
// "<*block,valign=absmiddle*><*img=star.png*><*img=star.png*> " +
// "Performance Enhancer <*img=star.png*><*img=star.png*><*/*>",
// "Times New Roman Bold Italic", 15, 0xffffff).setBackground(0x880000,
// -1, Chart.softLighting(Chart.Right));
// Add a title to the y axis
// c.yAxis().setTitle("Energy Concentration (KJ per liter)");
// Set the labels on the x axis
c.xAxis().setLabels(labels);
// Add a title to the x axis using CMDL
//c.xAxis().setTitle(
// "<*block,valign=absmiddle*><*img=clock.png*> Elapsed Time (hour)" +
// "<*/*>");
c.yAxis().setLinearScale(0, _max_chart + 50);
// Set the axes width to 2 pixels
c.xAxis().setWidth(2);
//c.yAxis().setWidth(2);
c.xAxis().setTitle(" (Date) ", "Arial Bold ", 15);
c.addLegend(55, 5, false, "Arial Bold", 13).setBackground(
Chart.Transparent);
// Add a spline layer to the chart
c.yAxis().setLabelStyle("Calibri Bold", 12);
c.xAxis().setLabelStyle("Calibri Bold", 11);
c.yAxis().setWidth(2);
c.setNumberFormat(',');
SplineLayer layer = c.addSplineLayer();
// Set the default line width to 2 pixels
layer.setLineWidth(5);
// Add a data set to the spline layer, using blue (0000c0) as the line
// color, with yellow (ffff00) circle symbols.
layer.addDataSet(data0, 0x0000c0, "Fatory 1").setDataSymbol(
Chart.NoShape, 20, 0xffff00);
// Add a data set to the spline layer, using brown (982810) as the line
// color, with pink (f040f0) diamond symbols.
layer.addDataSet(data1, 0x982810, "Fatory 2").setDataSymbol(
Chart.NoShape, 20, 0xf040f0);
layer.addDataSet(data2, 0xdb6e25, "Fatory 3").setDataSymbol(
Chart.NoShape, 20, 0x0050f0);
layer.addDataSet(data3, 0x004000, "Fatory 4").setDataSymbol(
Chart.NoShape, 20, 0xf04000);
// Add a custom CDML text at the bottom right of the plot area as the
// logo
//c.addText(575, 250,
// "<*block,valign=absmiddle*><*img=small_molecule.png*> <*block*>" +
// "<*font=Times New Roman Bold Italic,size=10,color=804040*>" +
// "Molecular\nEngineering<*/*>").setAlignment(Chart.BottomRight);
// Output the chart
viewer.Chart = c;
//include tool tip for the chart
//viewer.ImageMap = c.getHTMLImageMap("clickable", "",
// "title='{dataSetName} at t = {xLabel} hour: {value} KJ/liter'");
}
private void generateChart()
{
DataTable[] rawDataTables;
double?yMin = null, yMax = null, y2Min = null, y2Max = null;
imageMapAreas = new StringBuilder();
preSetup();
if (_rcp.Datasources.Length == 0)
{
drawMessage(_noDatasourcesMessage);
finalizeChart();
return;
}
if (_start == _end)
{
drawMessage("There is no data available for selected options.");
finalizeChart();
return;
}
//Get the data from the database
rawDataTables = retrieveData(_rcp.Datasources, _start, _end);
//Set the scale to be measured in days
//Remove the auto-generated labels
_chart.xAxis().setLinearScale(Chart.CTime(_timeZone.ToLocalTime(_start).Date),
Chart.CTime(_timeZone.ToLocalTime(_end).Date.AddDays(1)), null);
addTimestampLabels(_start, _end);
for (int i = 0; i < rawDataTables.Length; i++)
{
DBTable tableHelper;
DateTime[] timestamps;
double[] values;
string[] tooltips;
DisplayDatasourceItem currDataItem;
ConfiguredDatasource currConfiguredDatasource;
Color currLineColor;
string currDataName;
currDataItem = _rcp.Datasources[i];
currConfiguredDatasource = _db.ORManager.Get <ConfiguredDatasource>(currDataItem.ConfiguredDatasourceId);
//If the datasource doesn't exist, don't process it
if (currConfiguredDatasource == null)
{
continue;
}
currDataName = currConfiguredDatasource.Name;
if (rawDataTables[i].ExtendedProperties.Contains("SubTypeId"))
{
DatasourceSubType currSubType;
int subTypeId;
subTypeId = (int)rawDataTables[i].ExtendedProperties["SubTypeId"];
currSubType = _db.ORManager.Get <DatasourceSubType>(subTypeId);
currDataName += " - " + currSubType.Name;
}
tableHelper = new DBTable(rawDataTables[i]);
timestamps = tableHelper.getColAsDateTime(0);
values = tableHelper.getCol(1);
//Adjust the timestamps for the users time zone
for (int j = 0; j < timestamps.Length; j++)
{
timestamps[j] = _timeZone.ToLocalTime(timestamps[j]);
}
//Create an array of strings that represent the tooltips
tooltips = new string[timestamps.Length];
for (int j = 0; j < timestamps.Length; j++)
{
tooltips[j] = getDatapointTooltip(currConfiguredDatasource, timestamps[j], values[j]);
}
//Determine the color to use
if (currDataItem.Color == null)
{
currLineColor = AutoLineColors[i % AutoLineColors.Length];
}
else
{
currLineColor = (Color)currDataItem.Color;
}
bool useYAxis2;
useYAxis2 = (rawDataTables.Length == 2 && i == 1);
//Hide the axis labels when displaying 3 or more data sources
if (rawDataTables.Length > 2)
{
_chart.yAxis().setLabelFormat("");
}
Axis axis = null;
//If there are more than 2 data sources, display them on different axis
if (rawDataTables.Length > 2)
{
axis = _chart.addAxis(Chart.Left, 0);
axis.setLabelFormat("");
}
//Keep a running tab of the overall min and max values
if (rawDataTables.Length <= 2)
{
if (!useYAxis2)
{
double?currYMin, currYMax;
ChartMath.GetDataBounds(values, out currYMin, out currYMax);
if (yMin == null && currYMin != null)
{
yMin = currYMin;
}
else if (currYMin != null)
{
yMin = Math.Min(currYMin.Value, yMin.Value);
}
if (yMax == null && currYMax != null)
{
yMax = currYMax;
}
else if (currYMax != null)
{
yMax = Math.Min(currYMax.Value, yMax.Value);
}
}
else
{
double?currYMin, currYMax;
ChartMath.GetDataBounds(values, out currYMin, out currYMax);
if (y2Min == null && currYMin != null)
{
y2Min = currYMin;
}
else if (currYMin != null)
{
y2Min = Math.Min(currYMin.Value, y2Min.Value);
}
if (y2Max == null && currYMax != null)
{
y2Max = currYMax;
}
else if (currYMax != null)
{
y2Max = Math.Min(currYMax.Value, y2Max.Value);
}
}
}
if (currDataItem.ShowRaw)
{
LineLayer lineLayer;
lineLayer = _chart.addLineLayer2();
lineLayer.addDataSet(values, Chart.CColor(currLineColor), fixLayerNameWidth(currDataName)).setDataSymbol(
Chart.DiamondSymbol, 4, 0xffff80);
lineLayer.setXData(timestamps);
lineLayer.addExtraField(tooltips); //field0
lineLayer.setLineWidth(currDataItem.LineThickness);
if (axis == null)
{
lineLayer.setUseYAxis2(useYAxis2);
}
else
{
lineLayer.setUseYAxis(axis);
}
}
if (currDataItem.ShowTrendLine)
{
TrendLayer tl;
tl =
_chart.addTrendLayer(values, _chart.dashLineColor(Chart.CColor(currLineColor), Chart.DashLine),
fixLayerNameWidth(currConfiguredDatasource.Name + " Trend"));
tl.setLineWidth(currDataItem.LineThickness + 1);
tl.setXData(timestamps);
tl.addExtraField(new string[timestamps.Length]); //field0
if (axis == null)
{
tl.setUseYAxis2(useYAxis2);
}
else
{
tl.setUseYAxis(axis);
}
}
if (currDataItem.ShowLowess)
{
SplineLayer sl;
sl =
_chart.addSplineLayer(new ArrayMath(values).lowess().result(),
_chart.dashLineColor(Chart.CColor(currLineColor), Chart.DashLine),
fixLayerNameWidth(currDataName));
sl.setLineWidth(currDataItem.LineThickness + 1);
sl.setXData(timestamps);
sl.addExtraField(new string[timestamps.Length]); //field0
if (axis == null)
{
sl.setUseYAxis2(useYAxis2);
}
else
{
sl.setUseYAxis(axis);
}
}
}
optimizePlotArea(yMin, yMax, y2Min, y2Max);
//Calculate the scale of the chart based on the plotted data,
//this needs to be called before drawEvents, so the tool tip
//locations for the events can be calculated.
_chart.layout();
drawEvents();
drawLegend();
}