private void drawFullChart(WPFViewPortControl vpc, WPFChartViewer viewer)
{
// Create an XYChart object of size 640 x 60 pixels
XYChart c = new XYChart(640, 60);
// Set the plotarea with the same horizontal position as that in the main chart for alignment.
c.setPlotArea(55, 0, c.getWidth() - 80, c.getHeight() - 1, 0xc0d8ff, -1, 0x888888,
Chart.Transparent, 0xffffff);
// Set the x axis stem to transparent and the label font to 10pt Arial
c.xAxis().setColors(Chart.Transparent);
c.xAxis().setLabelStyle("Arial", 10);
// Put the x-axis labels inside the plot area by setting a negative label gap. Use
// setLabelAlignment to put the label at the right side of the tick.
c.xAxis().setLabelGap(-1);
c.xAxis().setLabelAlignment(1);
// Set the y axis stem and labels to transparent (that is, hide the labels)
c.yAxis().setColors(Chart.Transparent, Chart.Transparent);
// Add a line layer for the lines with fast line mode enabled
LineLayer layer = c.addLineLayer();
layer.setFastLineMode();
// Now we add the 3 data series to a line layer, using the color red (0xff3333), green
// (0x008800) and blue (0x3333cc)
layer.setXData(timeStamps);
layer.addDataSet(dataSeriesA, 0xff3333);
layer.addDataSet(dataSeriesB, 0x008800);
layer.addDataSet(dataSeriesC, 0x3333cc);
// The x axis scales should reflect the full range of the view port
c.xAxis().setDateScale(viewer.getValueAtViewPort("x", 0), viewer.getValueAtViewPort("x", 1));
// For the automatic x-axis labels, set the minimum spacing to 75 pixels.
c.xAxis().setTickDensity(75);
// For the auto-scaled y-axis, as we hide the labels, we can disable axis rounding. This can
// make the axis scale fit the data tighter.
c.yAxis().setRounding(false, false);
// Output the chart
vpc.Chart = c;
}
//
// Update controls when the view port changed
//
private void updateControls(WPFChartViewer viewer)
{
// Update the start date and end date control to reflect the view port
startDateCtrl.SelectedDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft));
endDateCtrl.SelectedDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft +
viewer.ViewPortWidth));
// In this demo, we need to update the scroll bar to reflect the view port position and
// width of the view port.
hScrollBar1.IsEnabled = viewer.ViewPortWidth < 1;
hScrollBar1.LargeChange = viewer.ViewPortWidth * (hScrollBar1.Maximum - hScrollBar1.Minimum);
hScrollBar1.SmallChange = hScrollBar1.LargeChange * 0.1;
hScrollBar1.ViewportSize = viewer.ViewPortWidth / Math.Max(1E-10, 1 - viewer.ViewPortWidth)
* (hScrollBar1.Maximum - hScrollBar1.Minimum);
hScrollBar1.Value = viewer.ViewPortLeft / Math.Max(1E-10, 1 - viewer.ViewPortWidth)
* (hScrollBar1.Maximum - hScrollBar1.Minimum) + hScrollBar1.Minimum;
}
//
// Draw the chart.
//
private void drawChart(WPFChartViewer viewer)
{
// Get the start date and end date that are visible on the chart.
DateTime viewPortStartDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft));
DateTime viewPortEndDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft +
viewer.ViewPortWidth));
// Get the array indexes that corresponds to the visible start and end dates
int startIndex = (int)Math.Floor(Chart.bSearch(timeStamps, viewPortStartDate));
int endIndex = (int)Math.Ceiling(Chart.bSearch(timeStamps, viewPortEndDate));
int noOfPoints = endIndex - startIndex + 1;
// Extract the part of the data array that are visible.
DateTime[] viewPortTimeStamps = (DateTime[])Chart.arraySlice(timeStamps, startIndex, noOfPoints);
double[] viewPortDataSeriesA = (double[])Chart.arraySlice(dataSeriesA, startIndex, noOfPoints);
double[] viewPortDataSeriesB = (double[])Chart.arraySlice(dataSeriesB, startIndex, noOfPoints);
double[] viewPortDataSeriesC = (double[])Chart.arraySlice(dataSeriesC, startIndex, noOfPoints);
//
// At this stage, we have extracted the visible data. We can use those data to plot the chart.
//
//================================================================================
// Configure overall chart appearance.
//================================================================================
// Create an XYChart object of size 640 x 400 pixels
XYChart c = new XYChart(640, 400);
// Set the plotarea at (55, 55) with width 80 pixels less than chart width, and height 90 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(55, 55, c.getWidth() - 80, c.getHeight() - 90, c.linearGradientColor(0, 55, 0,
c.getHeight() - 35, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xffffff);
// As the data can lie outside the plotarea in a zoomed chart, we need enable clipping.
c.setClipping();
// Add a title to the chart using 15pt Arial Bold font
c.addTitle(" Zooming and Scrolling with Viewport Control", "Arial Bold", 15);
// Set legend icon style to use line style icon, sized for 10pt font
c.getLegend().setLineStyleKey();
c.getLegend().setFontSize(10);
// 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);
// Add axis title using 10pt Arial Bold font
c.yAxis().setTitle("Ionic Temperature (C)", "Arial Bold", 10);
//================================================================================
// Add data to chart
//================================================================================
//
// In this example, we represent the data by lines. You may modify the code below to use other
// representations (areas, scatter plot, etc).
//
// Add a line layer for the lines, using a line width of 2 pixels
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(2);
// In this demo, we do not have too many data points. In real code, the chart may contain a lot
// of data points when fully zoomed out - much more than the number of horizontal pixels in this
// plot area. So it is a good idea to use fast line mode.
layer.setFastLineMode();
// Now we add the 3 data series to a line layer, using the color red (ff33333), green (008800)
// and blue (3333cc)
layer.setXData(viewPortTimeStamps);
layer.addDataSet(viewPortDataSeriesA, 0xff3333, "Alpha");
layer.addDataSet(viewPortDataSeriesB, 0x008800, "Beta");
layer.addDataSet(viewPortDataSeriesC, 0x3333cc, "Gamma");
//================================================================================
// Configure axis scale and labelling
//================================================================================
// Set the x-axis as a date/time axis with the scale according to the view port x range.
viewer.syncDateAxisWithViewPort("x", c.xAxis());
// For the automatic y-axis labels, set the minimum spacing to 30 pixels.
c.yAxis().setTickDensity(30);
//
// In this demo, the time range can be from a few years to a few days. We demonstrate how to set
// up different date/time format based on the time range.
//
// If all ticks are yearly aligned, then we use "yyyy" as the label format.
c.xAxis().setFormatCondition("align", 360 * 86400);
c.xAxis().setLabelFormat("{value|yyyy}");
// If all ticks are monthly aligned, then we use "mmm yyyy" in bold font as the first label of a
// year, and "mmm" for other labels.
c.xAxis().setFormatCondition("align", 30 * 86400);
c.xAxis().setMultiFormat(Chart.StartOfYearFilter(), "<*font=bold*>{value|mmm<*br*>yyyy}",
Chart.AllPassFilter(), "{value|mmm}");
// If all ticks are daily algined, then we use "mmm dd<*br*>yyyy" in bold font as the first
// label of a year, and "mmm dd" in bold font as the first label of a month, and "dd" for other
// labels.
c.xAxis().setFormatCondition("align", 86400);
c.xAxis().setMultiFormat(Chart.StartOfYearFilter(),
"<*block,halign=left*><*font=bold*>{value|mmm dd<*br*>yyyy}", Chart.StartOfMonthFilter(),
"<*font=bold*>{value|mmm dd}");
c.xAxis().setMultiFormat2(Chart.AllPassFilter(), "{value|dd}");
// For all other cases (sub-daily ticks), use "hh:nn<*br*>mmm dd" for the first label of a day,
// and "hh:nn" for other labels.
c.xAxis().setFormatCondition("else");
c.xAxis().setMultiFormat(Chart.StartOfDayFilter(), "<*font=bold*>{value|hh:nn<*br*>mmm dd}",
Chart.AllPassFilter(), "{value|hh:nn}");
//================================================================================
// Output the chart
//================================================================================
// 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)
{
trackLineLegend(c, (null == viewer.Chart) ? c.getPlotArea().getRightX() :
viewer.PlotAreaMouseX);
}
viewer.Chart = c;
}
//
// Draw the chart.
//
private void drawChart(WPFChartViewer viewer)
{
// Get the start date and end date that are visible on the chart.
DateTime viewPortStartDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft));
DateTime viewPortEndDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft +
viewer.ViewPortWidth));
// Extract the part of the data arrays that are visible.
DateTime[] viewPortTimeStamps = null;
double[] viewPortDataSeriesA = null;
double[] viewPortDataSeriesB = null;
double[] viewPortDataSeriesC = null;
if (currentIndex > 0)
{
// Get the array indexes that corresponds to the visible start and end dates
int startIndex = (int)Math.Floor(Chart.bSearch2(timeStamps, 0, currentIndex, viewPortStartDate));
int endIndex = (int)Math.Ceiling(Chart.bSearch2(timeStamps, 0, currentIndex, viewPortEndDate));
int noOfPoints = endIndex - startIndex + 1;
// Extract the visible data
viewPortTimeStamps = (DateTime[])Chart.arraySlice(timeStamps, startIndex, noOfPoints);
viewPortDataSeriesA = (double[])Chart.arraySlice(dataSeriesA, startIndex, noOfPoints);
viewPortDataSeriesB = (double[])Chart.arraySlice(dataSeriesB, startIndex, noOfPoints);
viewPortDataSeriesC = (double[])Chart.arraySlice(dataSeriesC, startIndex, noOfPoints);
}
//
// At this stage, we have extracted the visible data. We can use those data to plot the chart.
//
//================================================================================
// Configure overall chart appearance.
//================================================================================
// Create an XYChart object of size 640 x 350 pixels
XYChart c = new XYChart(640, 350);
// Set the plotarea at (55, 50) with width 80 pixels less than chart width, and height 85 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(55, 50, c.getWidth() - 85, c.getHeight() - 80, c.linearGradientColor(0, 50, 0,
c.getHeight() - 35, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xffffff);
// As the data can lie outside the plotarea in a zoomed chart, we need enable clipping.
c.setClipping();
// Add a title to the chart using 18 pts Times New Roman Bold Italic font
c.addTitle(" Realtime Chart with Zoom/Scroll and Track Line", "Arial", 18);
// Add a legend box at (55, 25) using horizontal layout. Use 8pts Arial Bold as font. Set the
// background and border color to Transparent and use line style legend key.
LegendBox b = c.addLegend(55, 25, false, "Arial Bold", 10);
b.setBackground(Chart.Transparent);
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);
// Add axis title using 10pts Arial Bold Italic font
c.yAxis().setTitle("Ionic Temperature (C)", "Arial Bold", 10);
//================================================================================
// Add data to chart
//================================================================================
//
// In this example, we represent the data by lines. You may modify the code below to use other
// representations (areas, scatter plot, etc).
//
// Add a line layer for the lines, using a line width of 2 pixels
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(2);
layer.setFastLineMode();
// Now we add the 3 data series to a line layer, using the color red (ff0000), green (00cc00)
// and blue (0000ff)
layer.setXData(viewPortTimeStamps);
layer.addDataSet(viewPortDataSeriesA, 0xff0000, "Alpha");
layer.addDataSet(viewPortDataSeriesB, 0x00cc00, "Beta");
layer.addDataSet(viewPortDataSeriesC, 0x0000ff, "Gamma");
//================================================================================
// Configure axis scale and labelling
//================================================================================
if (currentIndex > 0)
{
c.xAxis().setDateScale(viewPortStartDate, viewPortEndDate);
}
// For the automatic axis labels, set the minimum spacing to 75/30 pixels for the x/y axis.
c.xAxis().setTickDensity(75);
c.yAxis().setTickDensity(30);
//
// In a zoomable chart, the time range can be from a few years to a few seconds. We can need
// to define the date/time format the various cases.
//
// If all ticks are year aligned, we use "yyyy" as the label format.
c.xAxis().setFormatCondition("align", 360 * 86400);
c.xAxis().setLabelFormat("{value|yyyy}");
// If all ticks are month aligned, we use "mmm yyyy" in bold font as the first label of a year,
// and "mmm" for other labels.
c.xAxis().setFormatCondition("align", 30 * 86400);
c.xAxis().setMultiFormat(Chart.StartOfYearFilter(), "<*font=bold*>{value|mmm yyyy}",
Chart.AllPassFilter(), "{value|mmm}");
// If all ticks are day algined, we use "mmm dd<*br*>yyyy" in bold font as the first label of a
// year, and "mmm dd" in bold font as the first label of a month, and "dd" for other labels.
c.xAxis().setFormatCondition("align", 86400);
c.xAxis().setMultiFormat(Chart.StartOfYearFilter(),
"<*block,halign=left*><*font=bold*>{value|mmm dd<*br*>yyyy}", Chart.StartOfMonthFilter(),
"<*font=bold*>{value|mmm dd}");
c.xAxis().setMultiFormat2(Chart.AllPassFilter(), "{value|dd}");
// If all ticks are hour algined, we use "hh:nn<*br*>mmm dd" in bold font as the first label of
// the Day, and "hh:nn" for other labels.
c.xAxis().setFormatCondition("align", 3600);
c.xAxis().setMultiFormat(Chart.StartOfDayFilter(), "<*font=bold*>{value|hh:nn<*br*>mmm dd}",
Chart.AllPassFilter(), "{value|hh:nn}");
// If all ticks are minute algined, then we use "hh:nn" as the label format.
c.xAxis().setFormatCondition("align", 60);
c.xAxis().setLabelFormat("{value|hh:nn}");
// If all other cases, we use "hh:nn:ss" as the label format.
c.xAxis().setFormatCondition("else");
c.xAxis().setLabelFormat("{value|hh:nn:ss}");
// We make sure the tick increment must be at least 1 second.
c.xAxis().setMinTickInc(1);
//================================================================================
// Output the chart
//================================================================================
// 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)
{
trackLineLabel(c, (null == viewer.Chart) ? c.getPlotArea().getRightX() :
viewer.PlotAreaMouseX);
}
viewer.Chart = c;
}
//
// Draw the chart.
//
private void drawChart(WPFChartViewer viewer)
{
// Get the start date and end date that are visible on the chart.
DateTime viewPortStartDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft));
DateTime viewPortEndDate = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft +
viewer.ViewPortWidth));
// Get the array indexes that corresponds to the visible start and end dates
int startIndex = (int)Math.Floor(Chart.bSearch(timeStamps, viewPortStartDate));
int endIndex = (int)Math.Ceiling(Chart.bSearch(timeStamps, viewPortEndDate));
int noOfPoints = endIndex - startIndex + 1;
// Extract the part of the data array that are visible.
DateTime[] viewPortTimeStamps = (DateTime[])Chart.arraySlice(timeStamps, startIndex, noOfPoints);
double[] viewPortDataSeriesA = (double[])Chart.arraySlice(dataSeriesA, startIndex, noOfPoints);
double[] viewPortDataSeriesB = (double[])Chart.arraySlice(dataSeriesB, startIndex, noOfPoints);
double[] viewPortDataSeriesC = (double[])Chart.arraySlice(dataSeriesC, startIndex, noOfPoints);
//
// At this stage, we have extracted the visible data. We can use those data to plot the chart.
//
//================================================================================
// Configure overall chart appearance.
//================================================================================
// Create an XYChart object 600 x 300 pixels in size, with pale blue (0xf0f0ff) background,
// black (000000) rounded border, 1 pixel raised effect.
XYChart c = new XYChart(600, 300, 0xf0f0ff, 0, 1);
c.setRoundedFrame(0xffffff);
// Set the plotarea at (52, 60) and of size 520 x 205 pixels. Use white (ffffff) background.
// Enable both horizontal and vertical grids by setting their colors to grey (cccccc). Set
// clipping mode to clip the data lines to the plot area.
c.setPlotArea(52, 60, 520, 205, 0xffffff, -1, -1, 0xcccccc, 0xcccccc);
// As the data can lie outside the plotarea in a zoomed chart, we need to enable clipping.
c.setClipping();
// Add a top title to the chart using 15 pts Times New Roman Bold Italic font, with a light blue
// (ccccff) background, black (000000) border, and a glass like raised effect.
c.addTitle("Simple Zooming and Scrolling", "Times New Roman Bold Italic", 15
).setBackground(0xccccff, 0x0, Chart.glassEffect());
// Add a legend box at the top of the plot area with 9pts Arial Bold font with flow layout.
c.addLegend(50, 33, false, "Arial Bold", 9).setBackground(Chart.Transparent, Chart.Transparent);
// Set axes width to 2 pixels
c.yAxis().setWidth(2);
c.xAxis().setWidth(2);
// Add a title to the y-axis
c.yAxis().setTitle("Price (USD)", "Arial Bold", 9);
//================================================================================
// Add data to chart
//================================================================================
//
// In this example, we represent the data by lines. You may modify the code below to use other
// representations (areas, scatter plot, etc).
//
// Add a line layer for the lines, using a line width of 2 pixels
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(2);
// In this demo, we do not have too many data points. In real code, the chart may contain a lot
// of data points when fully zoomed out - much more than the number of horizontal pixels in this
// plot area. So it is a good idea to use fast line mode.
layer.setFastLineMode();
// Now we add the 3 data series to a line layer, using the color red (ff0000), green (00cc00)
// and blue (0000ff)
layer.setXData(viewPortTimeStamps);
layer.addDataSet(viewPortDataSeriesA, 0xff0000, "Product Alpha");
layer.addDataSet(viewPortDataSeriesB, 0x00cc00, "Product Beta");
layer.addDataSet(viewPortDataSeriesC, 0x0000ff, "Product Gamma");
//================================================================================
// Configure axis scale and labelling
//================================================================================
// Set the x-axis as a date/time axis with the scale according to the view port x range.
viewer.syncDateAxisWithViewPort("x", c.xAxis());
// In this demo, we rely on ChartDirector to auto-label the axis. We ask ChartDirector to ensure
// the x-axis labels are at least 75 pixels apart to avoid too many labels.
c.xAxis().setTickDensity(75);
//================================================================================
// Output the chart
//================================================================================
viewer.Chart = c;
}
private void drawChart(WPFChartViewer viewer)
{
// Get the start date and end date that are visible on the chart.
double viewPortStartDate = viewer.getValueAtViewPort("x", viewer.ViewPortLeft);
double viewPortEndDate = viewer.getValueAtViewPort("x", viewer.ViewPortLeft +
viewer.ViewPortWidth);
// Extract the part of the data arrays that are visible.
double[] viewPortTimeStamps = null;
double[] viewPortDataSeriesA = null;
double[] viewPortDataSeriesB = null;
double[] viewPortDAtaSeriesC = null;
double[] viewPortDAtaSeriesD = null;
if (currentIndex > 0)
{
// Get the array indexes that corresponds to the visible start and end dates
int startIndex = (int)Math.Floor(Chart.bSearch2(timeStamps, 0, currentIndex, viewPortStartDate));
int endIndex = (int)Math.Ceiling(Chart.bSearch2(timeStamps, 0, currentIndex, viewPortEndDate));
int noOfPoints = endIndex - startIndex + 1;
// Extract the visible data
viewPortTimeStamps = (double[])Chart.arraySlice(timeStamps, startIndex, noOfPoints);
viewPortDataSeriesA = (double[])Chart.arraySlice(dataSeriesA, startIndex, noOfPoints);
viewPortDataSeriesB = (double[])Chart.arraySlice(dataSeriesB, startIndex, noOfPoints);
viewPortDAtaSeriesC = (double[])Chart.arraySlice(dataSeriesC, startIndex, noOfPoints);
viewPortDAtaSeriesD = (double[])Chart.arraySlice(dataSeriesD, startIndex, noOfPoints);
chartTimeLimit = timeStamps[currentIndex - 1];
}
//
// At this stage, we have extracted the visible data. We can use those data to plot the chart.
//
//================================================================================
// Configure overall chart appearance.
//================================================================================
// Create an XYChart object of size 640 x 350 pixels
XYChart c = new XYChart(640, 350);
// Set the position, size and colors of the plot area
c.setPlotArea(23, 33, c.getWidth() - 41, c.getHeight() - 62, c.linearGradientColor(0, 33, 0,
c.getHeight() - 53, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xffffff);
// As the data can lie outside the plotarea in a zoomed chart, we need enable clipping.
c.setClipping();
// Add a title to the chart using 18 pts Arial font
c.addTitle("Position ball", "Arial", 18);
// Add a legend box at (60, 28) using horizontal layout. Use 8pts Arial Bold as font. Set the
// background and border color to Transparent and use line style legend key.
LegendBox b = c.addLegend(60, 28, false, "Arial Bold", 10);
b.setBackground(Chart.Transparent);
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 Bold", 10, 0x336699);
// Set the y-axis tick length to 0 to disable the tick and put the labels closer to the axis.
c.yAxis().setLabelGap(-1);
c.yAxis().setLabelAlignment(1);
c.yAxis().setTickLength(0);
c.yAxis().setMargin(20);
// Add axis title using 12pts Arial Bold Italic font
c.yAxis().setTitle("Position Ball (mm)", "Arial Bold", 12);
// Configure the x-axis tick length to 1 to put the labels closer to the axis.
c.xAxis().setTickLength(1);
//================================================================================
// Add data to chart
//================================================================================
//
// In this example, we represent the data by lines. You may modify the code below to use other
// representations (areas, scatter plot, etc).
//
// Add a line layer for the lines, using a line width of 2 pixels
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(2);
layer.setFastLineMode();
// Now we add the 3 data series to a line layer, using the color red (ff0000), green (00cc00)
// and blue (0000ff)
layer.setXData(viewPortTimeStamps);
layer.addDataSet(viewPortDataSeriesA, 0x00cc00, "Position X");
layer.addDataSet(viewPortDataSeriesB, 0x0000ff, "Position Y");
layer.addDataSet(viewPortDAtaSeriesC, 0xFF0000, "Set X");
layer.addDataSet(viewPortDAtaSeriesD, 0xFFFF00, "Set Y");
//================================================================================
// Configure axis scale and labelling
//================================================================================
if (currentIndex > 0)
{
c.xAxis().setDateScale(viewPortStartDate, viewPortEndDate);
}
// For the automatic axis labels, set the minimum spacing to 75/30 pixels for the x/y axis.
c.xAxis().setTickDensity(75);
c.yAxis().setTickDensity(30);
// We use "hh:nn:ss" as the axis label format.
c.xAxis().setLabelFormat("{value|nn:ss}");
// We make sure the tick increment must be at least 1 second.
c.xAxis().setMinTickInc(1);
//================================================================================
// Output the chart
//================================================================================
// We need to update the track line too.
trackLineLabel(c);
// Set the chart image to the WinChartViewer
viewer.Chart = c;
}
//
// Draw the chart.
//
private void drawChart(WPFChartViewer viewer)
{
// Get the start date and end date that are visible on the chart.
double viewPortStartDate = viewer.getValueAtViewPort("x", viewer.ViewPortLeft);
double viewPortEndDate = viewer.getValueAtViewPort("x", viewer.ViewPortLeft + viewer.ViewPortWidth);
// Extract the part of the data arrays that are visible.
double[] viewPortTimeStamps = null;
double[] viewPortDataSeriesA = null;
double[] viewPortDataSeriesB = null;
if (currentIndex > 0)
{
// Get the array indexes that corresponds to the visible start and end dates
int startIndex = (int)Math.Floor(Chart.bSearch2(timeStamps, 0, currentIndex, viewPortStartDate));
int endIndex = (int)Math.Ceiling(Chart.bSearch2(timeStamps, 0, currentIndex, viewPortEndDate));
int noOfPoints = endIndex - startIndex + 1;
// Extract the visible data
viewPortTimeStamps = (double[])Chart.arraySlice(timeStamps, startIndex, noOfPoints);
viewPortDataSeriesA = (double[])Chart.arraySlice(dataSeriesA, startIndex, noOfPoints);
viewPortDataSeriesB = (double[])Chart.arraySlice(dataSeriesB, startIndex, noOfPoints);
// Keep track of the latest available data at chart plotting time
trackLineEndPos = timeStamps[currentIndex - 1];
}
//
// At this stage, we have extracted the visible data. We can use those data to plot the chart.
//
//================================================================================
// Configure overall chart appearance.
//================================================================================
// Create an XYChart object of size 640 x 350 pixels
XYChart c = new XYChart(640, 350);
// Set the plotarea at (55, 50) with width 85 pixels less than chart width, and height 80 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(55, 50, c.getWidth() - 85, c.getHeight() - 80, c.linearGradientColor(0, 50, 0,
c.getHeight() - 30, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xffffff);
// As the data can lie outside the plotarea in a zoomed chart, we need enable clipping.
c.setClipping();
// Add a title to the chart using 18 pts Times New Roman Bold Italic font
c.addTitle(" Multithreading Real-Time Chart", "Arial", 18);
// Add a legend box at (55, 25) using horizontal layout. Use 8pts Arial Bold as font. Set the
// background and border color to Transparent and use line style legend key.
LegendBox b = c.addLegend(55, 25, false, "Arial Bold", 10);
b.setBackground(Chart.Transparent);
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);
// Add axis title using 10pts Arial Bold Italic font
c.yAxis().setTitle("Ionic Temperature (C)", "Arial Bold", 10);
//================================================================================
// Add data to chart
//================================================================================
//
// In this example, we represent the data by lines. You may modify the code below to use other
// representations (areas, scatter plot, etc).
//
// Add a line layer for the lines, using a line width of 2 pixels
LineLayer layer = c.addLineLayer2();
layer.setLineWidth(2);
layer.setFastLineMode();
// Now we add the 3 data series to a line layer, using the color red (ff0000), green (00cc00)
// and blue (0000ff)
layer.setXData(viewPortTimeStamps);
layer.addDataSet(viewPortDataSeriesA, 0xff0000, "Alpha");
layer.addDataSet(viewPortDataSeriesB, 0x00cc00, "Beta");
//================================================================================
// Configure axis scale and labelling
//================================================================================
if (currentIndex > 0)
{
c.xAxis().setDateScale(viewPortStartDate, viewPortEndDate);
}
// For the automatic axis labels, set the minimum spacing to 75/30 pixels for the x/y axis.
c.xAxis().setTickDensity(75);
c.yAxis().setTickDensity(30);
// We use "hh:nn:ss" as the axis label format.
c.xAxis().setLabelFormat("{value|hh:nn:ss}");
// We make sure the tick increment must be at least 1 second.
c.xAxis().setMinTickInc(1);
// 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
//================================================================================
// 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 (!WPFChartViewer1.IsInMouseMoveEvent)
{
trackLineLabel(c, trackLineIsAtEnd ? c.getWidth() : viewer.PlotAreaMouseX);
}
viewer.Chart = c;
}