![\"The](\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2013\/04\/line_chart_performance.png\")
<\/a>The final chart<\/p><\/div>\n
Create the series<\/strong><\/p>\n We create 8 series and add them to the Series collection of the chart:<\/p>\n Each series is drawn with a random generated stroke:<\/p>\n We must set the Title and Fills properties though we don\u2019t need them for the chart \u2013 they are used by the legend. The Y-values of the line points are random numbers between 10 and 90.<\/p>\n The Legend<\/strong><\/p>\n Our legend is of type ChartLegend, which means we must set its Series property to the list of ChartSeries that the legend explains. The ChartLegend reads the labels for its items from the Title property of a ChartSeries. It draws the series rectangles with the first brush in ChartSeries.Strokes and fills them with the first brush in ChartSeries.Fills. That\u2019s why it was important to set the Title, Fills and Strokes properties as shown above.<\/p>\n The Axis Updating Data in Real Time<\/strong><\/p>\n We create a timer that simulates reading real time data. The timer ticks ten times every second:<\/p>\n When the timer ticks, we generate ten new values for each of the eight series, add them to each series and remove the last ten values:<\/p>\n Here we use a global variable maxX, which we have declared in the class:<\/p>\n We increase our global variable with 10 to keep up with the change in the data:<\/p>\n Updating the Axis<\/strong> Performance Optimization<\/strong> Download of the Sample<\/strong> Download the Sample<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" In today\u2019s post we are going to build a real time line chart with the following features: 8 data series with 100 points each. Ten times per second we add 10 random points to each series and remove the last … Continue reading for (int i = 0; i < 8; i++)\n{\n LineSeries series = new LineSeries();\n series.StrokeThickness = 3;\n series.Strokes.Add(RandomStroke);\n series.Fills = series.Strokes;\n series.Title = \"Series\" + i;\n series.XData = new DoubleCollection();\n series.YData = new DoubleCollection();\n\n for (int j = 0; j < 100; j++)\n {\n series.XData.Add(j);\n series.YData.Add(10 + 10 * i + random.Next(-5, 5));\n }\n\n lineChart.Series.Add(series);\n }\n\n<\/pre>\n private Brush RandomStroke\n {\n get\n {\n byte r = (byte)random.Next(0, 255);\n byte g = (byte)random.Next(0, 255);\n byte b = (byte)random.Next(0, 255);\n return new SolidColorBrush(Color.FromArgb(255, r, g, b));\n }\n }\n<\/pre>\nChartLegend legend = new ChartLegend();\nlegend.Series = lineChart.Series;\nlineChart.Legends.Add(legend);\n<\/pre>\n
\nThe axis shows scale divisions with interval 10. Initially they range from 0 to 100 in 10 intervals.<\/p>\nlineChart.XAxisSettings.MinValue = 0;\nlineChart.XAxisSettings.Interval = 10;\nlineChart.XAxisSettings.LabelType = LabelType.AutoScale;\n<\/pre>\n
timer.Interval = TimeSpan.FromMilliseconds(100);\ntimer.Tick += new EventHandler(OnTimerTick);\n<\/pre>\n
foreach (LineSeries series in lineChart.Series)\n{\n for (int i = 10 - 1; i >= 0; i--)\n {\n series.XData.Remove(series.XData[i]);\n series.YData.Remove(series.YData[i]);\n }\n}\n\nforeach (LineSeries series in lineChart.Series)\n{\n int counter = 0;\n for (int i = 0; i < 10; i++)\n {\n series.XData.Add(i + maxX);\n series.YData.Add(10 + counter * 10 + random.Next(-5, 5));\n }\n counter++;\n}\n<\/pre>\nprivate int maxX = 100;\n<\/pre>\n
maxX += 10;\n<\/pre>\n
\nAt each tick of the timer we increase the start of the axis with 10:<\/p>\nlineChart.XAxisSettings.MinValue += 10;\n<\/pre>\n
\nPerformance is greatly improved if we set the thickness of the lines to 1 rather than 3. The reason for this is that Windows GDI system draws thick lines by filling polygons. This requires numerous calculations about the coordinates of each polygon. When the thickness is small, Windows GDI draws lines rather than polygons, which speeds up drawing and performance.<\/p>\nseries.StrokeThickness = 3;\n<\/pre>\n
\nYou can download the sample with complete source code from here:<\/p>\n