public void realChart(WinChartViewer viewer) { if (currentIndex > 0) { DateTime startDate = timeStamps[0]; DateTime endDate = timeStamps[currentIndex - 1]; double duration = endDate.Subtract(startDate).TotalSeconds; int zoomInLimit = 10; if (duration < chartFullRange) //initialFullRange: 60? //endDate = startDate.AddSeconds(Convert.ToDouble(timeStamps1[currentIndex1])); //initialFullRange: 60? { endDate = startDate.AddSeconds(chartFullRange); //initialFullRange: 60? } int updateType = Chart.ScrollWithMax; if (viewer.ViewPortLeft + viewer.ViewPortWidth < 0.999) { updateType = Chart.KeepVisibleRange; } bool axisScaleHasChanged = viewer.updateFullRangeH("x", startDate, endDate, updateType); viewer.ZoomInWidthLimit = zoomInLimit / (viewer.getValueAtViewPort("x", 1) - viewer.getValueAtViewPort("x", 0)); if (axisScaleHasChanged || (duration < chartFullRange)) //initialFullRange: 60? { viewer.updateViewPort(true, false); } } }
// // Draw the full thumbnail chart and display it in the given ViewPortControl // private void drawFullChart(WinViewPortControl vpc, WinChartViewer viewer) { // Create an XYChart object of the same size as the Viewport Control XYChart c = new XYChart(viewPortControl1.ClientSize.Width, viewPortControl1.ClientSize.Height); // 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 WinChartViewer vpc.Chart = c; }
// // Update controls when the view port changed // private void updateControls(WinChartViewer viewer) { // Update the start date and end date control to reflect the view port. startDateCtrl.Value = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft)); endDateCtrl.Value = Chart.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft + viewer.ViewPortWidth)); // Update the scroll bar to reflect the view port position and width of the view port. hScrollBar1.Enabled = winChartViewer1.ViewPortWidth < 1; hScrollBar1.LargeChange = (int)Math.Ceiling(winChartViewer1.ViewPortWidth * (hScrollBar1.Maximum - hScrollBar1.Minimum)); hScrollBar1.SmallChange = (int)Math.Ceiling(hScrollBar1.LargeChange * 0.1); hScrollBar1.Value = (int)Math.Round(winChartViewer1.ViewPortLeft * (hScrollBar1.Maximum - hScrollBar1.Minimum)) + hScrollBar1.Minimum; }
private void drawFullChart(WinViewPortControl vpc, WinChartViewer 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 the chart and the viewport periodically // private void chartUpdateTimer_Tick(object sender, EventArgs e) { WinChartViewer viewer = winChartViewer1; if (currentIndex > 0) { // // As we added more data, we may need to update the full range. // double startDate = timeStamps[0]; double endDate = timeStamps[currentIndex - 1]; // Use the initialFullRange if this is sufficient. double duration = endDate - startDate; if (duration < initialFullRange) { endDate = startDate + initialFullRange; } // Update the full range to reflect the actual duration of the data. In this case, // if the view port is viewing the latest data, we will scroll the view port as new // data are added. If the view port is viewing historical data, we would keep the // axis scale unchanged to keep the chart stable. int updateType = Chart.ScrollWithMax; if (viewer.ViewPortLeft + viewer.ViewPortWidth < 0.999) { updateType = Chart.KeepVisibleRange; } bool axisScaleHasChanged = viewer.updateFullRangeH("x", startDate, endDate, updateType); // Set the zoom in limit as a ratio to the full range viewer.ZoomInWidthLimit = zoomInLimit / (viewer.getValueAtViewPort("x", 1) - viewer.getValueAtViewPort("x", 0)); // Trigger the viewPortChanged event to update the display if the axis scale has // changed or if new data are added to the existing axis scale. if (axisScaleHasChanged || (duration < initialFullRange)) { viewer.updateViewPort(true, false); } } }
// // Draw the chart. // private void drawChart(WinChartViewer 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); 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(512, 288); // Set the position, size and colors of the plot area c.setPlotArea(23, 33, c.getWidth() - 41, c.getHeight() - 53, 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("Gerçek Zamanlı Motor Verileri", "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("Angular Rate", "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, "Motor Devir"); layer.addDataSet(viewPortDataSeriesB, 0x0000ff, "Motor Sicaklik"); //================================================================================ // 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(WinChartViewer 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(Chart.CColor(BackColor)); // 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; }
// // Draw the chart. // private void drawChart(WinChartViewer 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 350 pixels XYChart c = new XYChart(640, 350); // 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 18 pts Times New Roman Bold Italic font c.addTitle(" Zooming and Scrolling with Track Line (1)", "Times New Roman Bold Italic", 18); // Set legend icon style to use line style icon, sized for 8pt font c.getLegend().setLineStyleKey(); c.getLegend().setFontSize(8); // Set the axis stem to transparent c.xAxis().setColors(Chart.Transparent); c.yAxis().setColors(Chart.Transparent); // Add axis title using 10pts Arial Bold Italic font c.yAxis().setTitle("Ionic Temperature (C)", "Arial Bold Italic", 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()); // // 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 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; }
//public void createChart(WinChartViewer viewer, int chartIndex) public void drawChart(WinChartViewer viewer, double[] data, int color, bool init) { int startIndex, endIndex; // 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[] viewPortData = null; if (init == true) { startIndex = 0; endIndex = data.Length; } else { startIndex = (int)Math.Floor(Chart.bSearch2(timeStamps, 0, currentIndex, viewPortStartDate)); //Real Trend endIndex = (int)Math.Ceiling(Chart.bSearch2(timeStamps, 0, currentIndex, viewPortEndDate)); //Real Trend } int noOfPoints = endIndex - startIndex + 1; viewPortTimeStamps = (DateTime[])Chart.arraySlice(timeStamps, startIndex, noOfPoints); viewPortData = (double[])Chart.arraySlice(data, startIndex, noOfPoints); XYChart c = new XYChart(776, 197, 0x787878, 0x787878); /* c.setPlotArea(30, 10, c.getWidth() - 40, c.getHeight() - 50, * 0x787878, -1, Chart.Transparent, * c.dashLineColor(0xffffff, 0x000303), c.dashLineColor(0xffffff, 0x000303)); */ c.setPlotArea(30, 10, c.getWidth() - 40, c.getHeight() - 50, 0x000000, 0x000000, Chart.LineColor, 0xc0c0c0, 0x000000 ).setGridWidth(2, 1, 1, 1); /* c.setPlotArea(30, 10, c.getWidth() - 40, c.getHeight() - 50, c.linearGradientColor(0, 55, 0, * c.getHeight() - 35, 0xf5f5f5, 0x787878), -1, Chart.Transparent, 0xffffff, 0xffffff);*/ c.xAxis().setColors(0xffffff, 0xffffff, 0xffffff); c.yAxis().setColors(0xffffff, 0xffffff, 0xffffff); c.setClipping(); sb_d.Clear(); sb_d.AppendFormat("{{value|hh:nn:ss.f}}"); c.xAxis().setLabelFormat(sb_d.ToString()); c.setClipping(); LineLayer layer = c.addLineLayer2(); layer.setLineWidth(2); layer.setFastLineMode(); layer.setXData(viewPortTimeStamps); layer.addDataSet(viewPortData, color, "Heart"); if (currentIndex > 0) { c.xAxis().setDateScale(viewPortStartDate, viewPortEndDate); } //viewer.syncDateAxisWithViewPort("x", c.xAxis()); c.xAxis().setTickDensity(75); c.yAxis().setTickDensity(30); c.xAxis().setLabelStep(100); c.xAxis().setMinTickInc(1); viewer.Chart = c; if (viewer.ImageMap == null) { viewer.ImageMap = viewer.Chart.getHTMLImageMap("", "", ""); } }
// // Update the chart and the viewport periodically // private void chartUpdateTimer_Tick(object sender, EventArgs e) { WinChartViewer viewer = winChartViewer1; // Enables auto scroll if the viewport is showing the latest data before the update bool autoScroll = (currentIndex > 0) && (0.01 + viewer.getValueAtViewPort("x", viewer.ViewPortLeft + viewer.ViewPortWidth) >= timeStamps[currentIndex - 1]); // Get new data from the queue and append them to the data arrays var packets = buffer.get(); if (packets.Count <= 0) { return; } // if data arrays have insufficient space, we need to remove some old data. if (currentIndex + packets.Count >= sampleSize) { // For safety, we check if the queue contains too much data than the entire data arrays. If // this is the case, we only use the latest data to completely fill the data arrays. if (packets.Count > sampleSize) { packets = new ArraySegment <DataPacket>(packets.Array, packets.Count - sampleSize, sampleSize); } // Remove oldest data to leave space for new data. To avoid frequent removal, we ensure at // least 5% empty space available after removal. int originalIndex = currentIndex; currentIndex = sampleSize * 95 / 100 - 1; if (currentIndex > sampleSize - packets.Count) { currentIndex = sampleSize - packets.Count; } for (int i = 0; i < currentIndex; ++i) { int srcIndex = i + originalIndex - currentIndex; timeStamps[i] = timeStamps[srcIndex]; dataSeriesA[i] = dataSeriesA[srcIndex]; dataSeriesB[i] = dataSeriesB[srcIndex]; } } // Append the data from the queue to the data arrays for (int n = packets.Offset; n < packets.Offset + packets.Count; ++n) { DataPacket p = packets.Array[n]; timeStamps[currentIndex] = p.elapsedTime; dataSeriesA[currentIndex] = p.series0; dataSeriesB[currentIndex] = p.series1; ++currentIndex; } // // As we added more data, we may need to update the full range. // double startDate = timeStamps[0]; double endDate = timeStamps[currentIndex - 1]; // Use the initialFullRange (which is 60 seconds in this demo) if this is sufficient. double duration = endDate - startDate; if (duration < initialFullRange) { endDate = startDate + initialFullRange; } // Update the new full data range to include the latest data bool axisScaleHasChanged = viewer.updateFullRangeH("x", startDate, endDate, Chart.KeepVisibleRange); if (autoScroll) { // Scroll the viewport if necessary to display the latest data double viewPortEndPos = viewer.getViewPortAtValue("x", timeStamps[currentIndex - 1]); if (viewPortEndPos > viewer.ViewPortLeft + viewer.ViewPortWidth) { viewer.ViewPortLeft = viewPortEndPos - viewer.ViewPortWidth; axisScaleHasChanged = true; } } // Set the zoom in limit as a ratio to the full range viewer.ZoomInWidthLimit = zoomInLimit / (viewer.getValueAtViewPort("x", 1) - viewer.getValueAtViewPort("x", 0)); // Trigger the viewPortChanged event. Updates the chart if the axis scale has changed // (scrolling or zooming) or if new data are added to the existing axis scale. viewer.updateViewPort(axisScaleHasChanged || (duration < initialFullRange), false); }
// // Draw the chart. // private void drawChart(WinChartViewer 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 (!winChartViewer1.IsInMouseMoveEvent) { trackLineLabel(c, trackLineIsAtEnd ? c.getWidth() : viewer.PlotAreaMouseX); } viewer.Chart = c; }
// // Draw the chart. // private void drawChart(WinChartViewer 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 (!winChartViewer1.IsInMouseMoveEvent) { trackLineLabel(c, (null == viewer.Chart) ? c.getPlotArea().getRightX() : viewer.PlotAreaMouseX); } viewer.Chart = c; }
private void drawChart(WinChartViewer viewer) { // get the start index that are visible on the chart double viewPortStartIndex = viewer.getValueAtViewPort("x", viewer.ViewPortLeft); double viewPortEndIndex = viewer.getValueAtViewPort("x", viewer.ViewPortLeft + viewer.ViewPortWidth); // Get the array indexes that corresponds to the visible start and end int startIndex = (int)Math.Floor(Chart.bSearch(index, viewPortStartIndex)); int endIndex = (int)Math.Ceiling(Chart.bSearch(index, viewPortEndIndex)); Console.WriteLine("port start: " + viewPortStartIndex + " port end: " + viewPortEndIndex + " start: " + startIndex + " end: " + endIndex + " index length: " + index.Length); int noOfPoints = endIndex - startIndex + 1; // declaration the data set double[] viewPortDataSeriesCpu; double[] viewPortDataSeriesGpu; double[] viewPortDataSeriesFps; double[] viewPortDataSeriesCmd; double[] viewPortDataSeriesObj; double[] viewPortDataSeriesTriangle; double[] viewPortDataSeriesDrawTime; double[] viewPortDataSeriesDataSize; double[] viewPortDataSeriesIbLock; double[] viewPortDataSeriesIbSize; double[] viewPortDataSeriesVbLock; double[] viewPortDataSeriesVbSize; double[] viewPortDataSeriesParamSize; double[] viewPortDataSeriesRemoteParamSize; double[] viewPortDataSeriesSurLock; double[] viewPortDataSeriesSurSize; double[] viewPortDataSeriesTexLock; double[] viewPortDataSeriesTexSize; double[] viewPortDataSeriesSetTexture; double[] viewPortDataSeriesStateBlock; double[] viewPortDataSeriesVShaderCmd; double[] viewPortDataSeriesVShaderConst; double[] viewPortDataSeriesPShaderCmd; double[] viewPortDataSeriesPShaderConst; double[] viewPortIndex = (double[])Chart.arraySlice(index, startIndex, noOfPoints); if (this.showCpu) { viewPortDataSeriesCpu = (double[])Chart.arraySlice(cpu, startIndex, noOfPoints); } if (this.showGpu) { viewPortDataSeriesGpu = (double[])Chart.arraySlice(gpu, startIndex, noOfPoints); } if (this.showFps) { viewPortDataSeriesFps = (double[])Chart.arraySlice(fps, startIndex, noOfPoints); } if (this.showCmd) { viewPortDataSeriesCmd = (double[])Chart.arraySlice(cmd, startIndex, noOfPoints); } if (this.showObj) { viewPortDataSeriesObj = (double[])Chart.arraySlice(obj, startIndex, noOfPoints); } if (this.showTriangle) { viewPortDataSeriesTriangle = (double[])Chart.arraySlice(triangle, startIndex, noOfPoints); } if (this.showDrawTime) { viewPortDataSeriesDrawTime = (double[])Chart.arraySlice(draw, startIndex, noOfPoints); } if (this.showDataSize) { viewPortDataSeriesDataSize = (double[])Chart.arraySlice(data, startIndex, noOfPoints); } if (this.showIbLock) { viewPortDataSeriesIbLock = (double[])Chart.arraySlice(ibLock, startIndex, noOfPoints); } if (this.showIbSize) { viewPortDataSeriesIbSize = (double[])Chart.arraySlice(ibSize, startIndex, noOfPoints); } if (this.showVbLock) { viewPortDataSeriesVbLock = (double[])Chart.arraySlice(vbLock, startIndex, noOfPoints); } if (this.showVbSize) { viewPortDataSeriesVbSize = (double[])Chart.arraySlice(vbSize, startIndex, noOfPoints); } if (this.showParamSize) { viewPortDataSeriesParamSize = (double[])Chart.arraySlice(parameterSize, startIndex, noOfPoints); } if (this.showRemoteParamSize) { viewPortDataSeriesRemoteParamSize = (double[])Chart.arraySlice(remoteParamSize, startIndex, noOfPoints); } if (this.showSurLock) { viewPortDataSeriesSurLock = (double[])Chart.arraySlice(surLock, startIndex, noOfPoints); } if (this.showSurSize) { viewPortDataSeriesSurSize = (double[])Chart.arraySlice(surSize, startIndex, noOfPoints); } if (this.showTexLock) { viewPortDataSeriesTexLock = (double[])Chart.arraySlice(texLock, startIndex, noOfPoints); } if (this.showTexSize) { viewPortDataSeriesTexSize = (double[])Chart.arraySlice(texSize, startIndex, noOfPoints); } if (this.showSetTexTime) { viewPortDataSeriesSetTexture = (double[])Chart.arraySlice(setTex, startIndex, noOfPoints); } if (this.showStateBlock) { viewPortDataSeriesStateBlock = (double[])Chart.arraySlice(stateBlock, startIndex, noOfPoints); } if (this.showVShaderCmd) { viewPortDataSeriesVShaderCmd = (double[])Chart.arraySlice(vShaderCmd, startIndex, noOfPoints); } if (this.showVShaderConst) { viewPortDataSeriesVShaderConst = (double[])Chart.arraySlice(vShaderConst, startIndex, noOfPoints); } if (this.showPShaderCmd) { viewPortDataSeriesPShaderCmd = (double[])Chart.arraySlice(pShaderCmd, startIndex, noOfPoints); } if (this.showPShaderConst) { viewPortDataSeriesPShaderConst = (double[])Chart.arraySlice(pShaderConst, startIndex, noOfPoints); } // configure overall chart apperance XYChart c = new XYChart(820, 490); c.setPlotArea(55, 50, c.getWidth() - 80, c.getHeight() - 85, c.linearGradientColor(0, 50, 0, c.getHeight() - 35, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xfffff); c.setClipping(); c.addTitle(" All charactor for game", "Times New Roman Bold Italic", 10); // Set legend icon style to use line style icon, sized for 8pt font c.getLegend().setLineStyleKey(); c.getLegend().setFontSize(8); //LegendBox b = c.addLegend(55, 25, false, "Arial Bold", 8); //b.setBackground(Chart.Transparent); //b.setLineStyleKey(); // set the axis stem to transparent c.xAxis().setColors(Chart.Transparent); c.yAxis().setColors(Chart.Transparent); // add the y axixs title c.yAxis().setTitle("chractor", "Arial Bold Italic", 10); // add data to chart LineLayer layer = c.addLineLayer2(); layer.setLineWidth(2); layer.setFastLineMode(); layer.setXData(this.index); /* * layer.addDataSet(viewPortDataSeriesCpu, 0xff3333, "CPU"); * layer.addDataSet(viewPortDataSeriesGpu, 0x008800, "GPU"); * layer.addDataSet(viewPortDataSeriesFps, 0x3333cc, "FPS"); */ if (this.showCpu) { layer.addDataSet(cpu, 0xff3333, "CPU"); } if (this.showGpu) { layer.addDataSet(gpu, 0x008800, "GPU"); } if (this.showFps) { layer.addDataSet(fps, 0x3333cc, "FPS"); } if (this.showCmd) { layer.addDataSet(cmd, 0x3388cc, "CMD"); } if (this.showObj) { layer.addDataSet(obj, 0x8833cc, "OBJ"); } if (this.showTriangle) { layer.addDataSet(triangle, 0x333388, "TRI"); } if (this.showDrawTime) { layer.addDataSet(draw, 0xff0000, "DRAW"); } if (this.showDataSize) { layer.addDataSet(data, 0xff00cc, "DATA"); } if (this.showIbLock) { layer.addDataSet(ibLock, 0x8888cc, "IBLOCK"); } if (this.showIbSize) { layer.addDataSet(ibSize, 0x8833cc, "IBSIZE"); } if (this.showVbLock) { layer.addDataSet(vbLock, 0x3333cc, "VBLOCK"); } if (this.showVbSize) { layer.addDataSet(vbSize, 0x3333cc, "VBSIZE"); } if (this.showParamSize) { layer.addDataSet(parameterSize, 0x3333cc, "PARAM"); } if (this.showRemoteParamSize) { layer.addDataSet(remoteParamSize, 0x3333cc, "REMOTE"); } if (this.showSurLock) { layer.addDataSet(surLock, 0x3333cc, "SURLOCK"); } if (this.showSurSize) { layer.addDataSet(surSize, 0x3333cc, "SURSIZE"); } if (this.showTexLock) { layer.addDataSet(texLock, 0x3333cc, "TEXLOCK"); } if (this.showTexSize) { layer.addDataSet(texSize, 0x3333cc, "TEXSIZE"); } if (this.showSetTexTime) { layer.addDataSet(setTex, 0x3333cc, "SETTEX"); } if (this.showStateBlock) { layer.addDataSet(stateBlock, 0x3333cc, "STATEBLOCK"); } if (this.showVShaderCmd) { layer.addDataSet(vShaderCmd, 0x3333cc, "VSC"); } if (this.showVShaderConst) { layer.addDataSet(vShaderConst, 0x3333cc, "VSCONST"); } if (this.showPShaderCmd) { layer.addDataSet(pShaderCmd, 0x3333cc, "PSC"); } if (this.showPShaderConst) { layer.addDataSet(pShaderConst, 0x3333cc, "PSCONST"); } // configure the axis scale and labeling //viewer.syncDateAxisWithViewPort("x", c.xAxis()); viewer.syncLinearAxisWithViewPort("x", c.xAxis()); // If all ticks are yearly aligned, then we use "yyyy" as the label format. //c.xAxis().setFormatCondition("align", 32); //c.xAxis().setLabelFormat("{value|p4}"); viewer.Chart = c; }
private void drawChart(WinChartViewer viewer) { // get the start index that are visible on the chart double viewPortStartIndex = viewer.getValueAtViewPort("x", viewer.ViewPortLeft); double viewPortEndIndex = viewer.getValueAtViewPort("x", viewer.ViewPortLeft + viewer.ViewPortWidth); // Get the array indexes that corresponds to the visible start and end int startIndex = 0; int endIndex = 0; if (showInFrame) { startIndex = (int)Math.Floor(Chart.bSearch(indexForFrame, viewPortStartIndex)); endIndex = (int)Math.Ceiling(Chart.bSearch(indexForFrame, viewPortEndIndex)); Console.WriteLine("port start: " + viewPortStartIndex + " port end: " + viewPortEndIndex + " start: " + startIndex + " end: " + endIndex + " index length: " + indexForFrame.Length); } else { startIndex = (int)Math.Floor(Chart.bSearch(indexForSecond, viewPortStartIndex)); endIndex = (int)Math.Ceiling(Chart.bSearch(indexForSecond, viewPortEndIndex)); Console.WriteLine("port start: " + viewPortStartIndex + " port end: " + viewPortEndIndex + " start: " + startIndex + " end: " + endIndex + " index length: " + indexForSecond.Length); } int noOfPoints = endIndex - startIndex + 1; // declaration the data set double[] viewPortDataSeriesCpuInFrame; double[] viewPortDataSeriesGpuInFrame; double[] viewPortDataSeriesFpsInFrame; double[] viewPortDataSeriesFpsInSecond; double[] viewPortDataSeriesCpuInSecond; double[] viewPortDataSeriesGpuInSecond; double[] viewPortIndex; if (showInFrame) { viewPortIndex = (double[])Chart.arraySlice(indexForFrame, startIndex, noOfPoints); if (this.showCpu) { viewPortDataSeriesCpuInFrame = (double[])Chart.arraySlice(cpuInFrame, startIndex, noOfPoints); } if (this.showGpu) { viewPortDataSeriesGpuInFrame = (double[])Chart.arraySlice(gpuInFrame, startIndex, noOfPoints); } if (this.showFps) { viewPortDataSeriesFpsInFrame = (double[])Chart.arraySlice(fpsInFrame, startIndex, noOfPoints); } } else { viewPortIndex = (double[])Chart.arraySlice(indexForSecond, startIndex, noOfPoints); if (this.showCpu) { viewPortDataSeriesCpuInSecond = (double[])Chart.arraySlice(cpuInSecond, startIndex, noOfPoints); } if (this.showGpu) { viewPortDataSeriesGpuInSecond = (double[])Chart.arraySlice(gpuInSecond, startIndex, noOfPoints); } if (this.showFps) { viewPortDataSeriesFpsInSecond = (double[])Chart.arraySlice(fpsInSecond, startIndex, noOfPoints); } } // configure overall chart apperance XYChart c = new XYChart(807, 371); c.setPlotArea(55, 50, c.getWidth() - 80, c.getHeight() - 85, c.linearGradientColor(0, 50, 0, c.getHeight() - 35, 0xf0f6ff, 0xa0c0ff), -1, Chart.Transparent, 0xffffff, 0xfffff); c.setClipping(); c.addTitle("Charactor for game", "Times New Roman Bold Italic", 10); // Set legend icon style to use line style icon, sized for 8pt font c.getLegend().setLineStyleKey(); c.getLegend().setFontSize(8); //LegendBox b = c.addLegend(55, 25, false, "Arial Bold", 8); //b.setBackground(Chart.Transparent); //b.setLineStyleKey(); // set the axis stem to transparent c.xAxis().setColors(Chart.Transparent); c.yAxis().setColors(Chart.Transparent); // add the y axixs title c.yAxis().setTitle("chractor", "Arial Bold Italic", 10); // add data to chart LineLayer layer = c.addLineLayer2(); layer.setLineWidth(2); layer.setFastLineMode(); if (this.showInFrame) { layer.setXData(this.indexForFrame); } else { layer.setXData(this.indexForSecond); } /* * layer.addDataSet(viewPortDataSeriesCpu, 0xff3333, "CPU"); * layer.addDataSet(viewPortDataSeriesGpu, 0x008800, "GPU"); * layer.addDataSet(viewPortDataSeriesFps, 0x3333cc, "FPS"); */ if (this.showInFrame) { if (this.showCpu) { layer.addDataSet(cpuInFrame, 0xff3333, "CPU In Frame"); } if (this.showGpu) { layer.addDataSet(gpuInFrame, 0x008800, "GPU In Frame"); } if (this.showFps) { layer.addDataSet(fpsInFrame, 0xcccccc, "FPS In Frame"); } } else { if (this.showCpu) { layer.addDataSet(cpuInSecond, 0x33cc33, "CPU In Second"); } if (this.showGpu) { layer.addDataSet(gpuInSecond, 0xff8833, "GPU In Second"); } if (this.showFps) { layer.addDataSet(fpsInSecond, 0xcccccc, "FPS In Second"); } } // configure the axis scale and labeling //viewer.syncDateAxisWithViewPort("x", c.xAxis()); viewer.syncLinearAxisWithViewPort("x", c.xAxis()); // If all ticks are yearly aligned, then we use "yyyy" as the label format. //c.xAxis().setFormatCondition("align", 32); //c.xAxis().setLabelFormat("{value|p4}"); viewer.Chart = c; }