Infragistics Ignite UI for JavaScript 18.2

Infragistics JavaScript Excel Library

• With support for 70 different chart types, you can now create dashboard reports that visualize data in a clear and easily digestible manner. This brand-new Excel Charting API gives you complete control over how your charts are rendered with the ability to include a legend, a title, axis titles, and a vast number of options for styling such as gridlines, tick marks, colors and more. You have the full power of Excel charts at the tips of your fingers. The best part, you don’t even need to have MS Excel installed.

Sparkline Support

• A sparkline is a tiny chart in a worksheet cell that provides a visual representation of data. Sparklines are used to show trends in a series of values, such as seasonal increases or decreases, economic cycles, or to highlight maximum and minimum values. Showing trends in your worksheet data can be useful, especially when you’re sharing your data with other people.
• Once you have an instance of the Infragistics Worksheet, simply call the Add method on the SparklineGroups collection. Supply the type of sparkline you wish to create (Column, Line, or Stacked), provide the cell you wish to insert the sparkline, and then provide the range of cells that represent the data the sparkline will use.
• After you have created your sparkline, the Infragistics Excel Library gives you an intuitive API that you can use to style various aspects of the sparkline to meet your visualization requirements. The API allows you to enable and control the colors of high and low points, negative points, the first point, the last point, and all markers to name a few.

igGrid

• Time Column - A new column type is added to the igGrid control - time column. In order to use it, it is necessary to set the column dataType to time. In this way, you can filter and update time data using the build-in time picker editor.
• Custom Editor Provider for the Filter Cell - Now, it is possible to create custom editor provider for the filter cell. This means that you can extend the igEditorProvider class and set your own editor to filter the igGrid content.

igSpreadsheet

• Custom Sort Dialog - Added a Custom Sort Dialog to give you full control over how you want to sort your Excel data. For example, if you have a Department column and an Employee column, you can first sort by Department (to group all the employees in the same department together), and then sort by name (to put the names in alphabetical order within each department).
• Top 10 Filter Dialog - When you filter a list using the Top 10 feature, only the top number or the top percent of records remain. You can also filter to display the bottom number or the bottom percent of records. For example, if you want to list the top wage earners in the company, you can filter the Salary column to display only those records with the top ten salaries. If you filter for the top ten percent of wage earners, however, your list would include only those personnel whose salaries together equaled ten percent of the total. Although called Top 10, you can filter for any number or percentage of items you desire.
• Filtering and Sorting Improvements - In 18.1, the AutoFilter dropdown was added to the spreadsheet. The dropdown had menu items for sorting ascending/descending, clearing a filter applied to the column and to apply a numeric/date/text filter. However, it didn’t have a way to apply a sort or filter based on the forecolor, fill or icon. In 18.2, that dropdown contains items to allow filtering or sorting based on the foreground, fill or icon of the cells within that column.
• Deselect a Selection - Sometimes when you're selecting multiple cells or ranges in Excel, you accidentally select one or more that you didn't intend. Now you can deselect any cells within the selected range with the Deselect Feature. Pressing the Ctrl key, you can click, or click-and-drag, to deselect any cells or ranges within a selection. If you need to reselect any of those cells, continue holding the Ctrl key and reselect those cells.
• FormatCellsDialog - The igSpreadsheet lets you change many of the ways it displays data in a cell. For example, you can specify the number of digits to the right of a decimal point, or you can add a pattern and border to the cell. You can access and modify the majority of these settings in the Format Cells dialog box (right-click the cell and select Format Cells).

igFinancialChart

• New Legend - The Financial Chart now comes built-in with a new legend displayed between the toolbar and plotting area. This legend show titles of the data sources and it also shows the last value and percentage change between first data item and the last data item.
• Callouts Annotation - With the Callouts Annotation, you can annotate important data points in Financial Chart or even customize values in callout boxes based on your logic. For example, show stock split, dividends, or calculate maximum price in your data source.
• Crosshairs Layer - You can configure crosshairs to display as a horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at location of mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels.
• Final Values - In Financial Chart, you can use the Final Values annotation to show values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis label.
• Tooltip Types - The Financial Chart has a new ToolTipType property that adds two new types of tooltips:
  • Category Tooltip which renders combined tooltips for all series at a given date
  • Item Tooltip which renders an individual tooltip for each series at a given date
• X-Axis Scale Breaks - In Financial Chart, you can define scale breaks on X-Axis to exclude custom ranges in your data source or any day of week. For example, exclude all data items that fall on weekends.

igCategoryChart

• Highlight Layer - The Category Chart can display two new highlight layers when a user hovers over plotted data points.
  • Category Highlight Layer renders a vertical rectangle that stretches from the start to end of the category that is closest to the mouse cursor. This rectangle is filled with semi-transparent gray color by default.
  • Item Highlight Layer renders a vertical rectangle for each data item in a category that is closest to the mouse cursor. This rectangle is filled with semi-transparent color that matches color of the series by default.
• Callouts Annotation - With the Callouts Annotation, you can annotate important data points in Category Chart or even customize values in callout boxes based on your logic. For example, calculate maximum values in your data source.
• Crosshairs Layer - You can configure crosshairs to display as horizontal line, vertical line or both lines at the location of the mouse cursor. In addition, the Crosshairs Annotation can show values of data points at the location of the mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels.
• Final Values - In Category Chart, you can use the Final Values annotation to show values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels.
• Tooltip Types - The Category Chart has a new ToolTipType property that adds two new types of tooltips:
  • Category Tooltip which renders the combined tooltips for all series in data category
  • Item Tooltip which renders individual tooltip for each series in data category

igDataChart

• Callouts Annotation - Callouts Layer is a new feature of Data Chart that you can use to annotate important data points or display their values. Callouts Layer can target multiple data series or individual data series. Also, you can customize appearance of these callout layers and bind callout labels to data items or calculate changes between consecutive data points.
• Crosshairs Layer - In Crosshair Layer has a new annotation feature can now show values of data points at the location of the mouse cursor and render these values in colored boxes over the X-Axis and Y-Axis labels.
• Final Values Annotation - Final Values Layer is a new annotation layer that shows values of the last data point in your data source(s). This annotation is rendered as a colored box for each data source over the Y-Axis labels.