ComponentOne 2020 v1 official version download
Sparklines-Sparklines are mini, lightweight charts that help visualize data quickly. They were invented by data visualization legend Edward Tufte, who described them as "data-intensive, simple design, byte-sized graphics." Although sparklines do not contain many elements (such as axes and coordinates) in traditional charts, they are based on Their simplicity, they can be more informative than other chart types. Due to its compact size, sparklines can be easily embedded in data grids or dashboards to show trends in a range of values, such as sales data, weather, or the stock market.
Sparklines in FlexGrid
It is common to use sparklines for data grids because they add rich visualization capabilities to tabular data without taking up too much space. With the release of ComponentOne 2018 v3, the FlexGrid control provides the function of displaying sparklines in grid columns. Let us understand this function through a very common use case-analyzing the stock trends of different companies in a particular month.
Use sparklines to visually analyze stock market trends
Sparklines provide instant trend information. This is exactly what stock market analysts need-financial data with real-time trends.
In the above example, the grid data shows the stock information of different companies in October 2018, including the trading volume of the most recent week (the trading volume of the past 7 days), the trading volume of the previous week (the trading volume of the past 7 days), Over a week's trading volume (raw and percentage) and the entire month's trading volume trend.
Now, let's see how to implement it in FlexGrid.
Create a mini chart
Bind to data source
Bind FlexGrid to a data source that contains a field that represents a collection of numbers. For example, fields that implement the IEnumerable or INotifyCollectionChanged interface, such as Array, List, or ObservableCollection.
We bind the grid to a data source that contains the following: information about the latest weekly trading volume, the previous week's trading volume, the change between the two, and the percentage change, as well as a collection of October trading volume figures for different companies.
Once the data grid is bound, we can explore the properties we need to use in order to display the sparklines in the FlexGrid.
Use ShowSparkline and Sparkline attributes
The ShowSparkline and Sparkline properties of the Column class are introduced to display the sparkline in the corresponding cells of the data represented by the collection. Therefore, in order to visualize the trend of one month's trading volume, just set the ShowSparkline property of the column to true, as shown in the figure.
Column volumeTrendCol = c1FlexGrid1.Cols["VolumeValues"]; volumeTrendCol.Caption = "Volume Trend Last 31 days\n as of 31-10-2018"; //Set the Column's ShowSparkline property to true to show sparklines in that column volumeTrendCol.ShowSparkline = true;
You can choose from three different types of sparklines, namely Column, Line and WinLoss to visualize data in different contexts.
Line sparklines, column sparklines, and WinLoss sparklines
For example, line sparklines are suitable for visualizing continuous data, such as sales data. Column sparklines are used in scenarios involving data comparison, for example, comparing monthly profits for a specific year. Similarly, WinLoss mini-charts are best used to visualize true and false judgments (ie victory) scenarios, for example, to track sports seasons.
Here, since we have continuous data (a month's transaction volume), we will use linear mini lines. In order to set the sparkline type, you need to retrieve the Sparkline object using the Sparkline property of the Column class.
Then, set the SparklineType property of the retrieved object to SparklineType.Line. You can also use markers to highlight individual data points on the sparkline to make it more readable. For example, to highlight the highest and lowest transaction volume values in the sparkline, set the ShowHigh and ShowLow properties of the Sparkline class to true as shown below:
//Sets the type of Sparkline volumeTrendCol.Sparkline.SparklineType = SparklineType.Line; //Highlight the highest and the lowest data points volumeTrendCol.Sparkline.ShowHigh = true; volumeTrendCol.Sparkline.ShowLow = true;
You can also use different style options to change the appearance of the sparklines.
Sparklines style
The namespace of the FlexGrid control [C1.Win.C1FlexGrid] provides a class named SparklineStyles, which can customize the appearance of the Sparkline, such as the color of the axis, the color of the data point, and the theme color of the sparkline. In addition, you can also change the sparkline wheelbase, the distance between different series of graphs, the distance between two lines in the winloss sparkline, and the thickness of the lines in the sparkline.
ComponentOne Enterprise | Download Trial
ComponentOne is a .NET full-featured control package focusing on the high-performance development of enterprise applications. It contains more than 300 controls, supports 7 platforms, and covers 7 functional modules. Compared with other similar products on the market, ComponentOne is lighter and more powerful. With more than 20 years of development experience, it will bring a safer experience to your application system. The pure Chinese operation interface, one-to-one technical support, and manufacturer-level technical services have jointly created this international top control package.
This article is reproduced from Grape City
Purchase genuine ComponentOne authorization limited time offer! Up to 10,000 yuan off! Click for more offers
If you have any questions about our products, please consult online customer service>>