Oliver's Blog

November 2017 - Posts

  • Scale (Axis) Breaks with DevExtreme HTML5 Chart and Range Selector (v17.2)

    This post covers the DevExtreme Chart and Range Selector widgets, which are available for jQuery, as Angular components, ASP.NET MVC and ASP.NET Core MVC controls, and as Knockout bindings.

    In v17.2, the dxChart and dxRangeSelector controls introduce a small but very useful feature: scale breaks a.k.a. axis breaks. This solves the problem where values in a chart have such a high amplitude that some series points are rendered very small, possibly almost invisible but certainly too small to interact with.

    Chart without scale breaks

    Scale breaks make such charts more useful by skipping parts of the scale. You can declare a collection of custom scale breaks, which is supported for both the value and the argument axis. The breakStyle property allows visual customization of the break appearance.

    valueAxis: { 
      ... 
      breaks: [{ 
        startValue: 1, 
        endValue: 14.6 
      }, { 
        startValue: 95, 
        endValue: 318 
      }, { 
        startValue: 17.2, 
        endValue: 95 
      }],
      breakStyle: {
        line: 'waved' // default value
      }
    }
    

    The widget can also calculate the scale breaks automatically for the value axis:

    valueAxis: { 
      ... 
      autoBreaksEnabled: true, 
      maxAutoBreakCount: 3 
    }
    

    Chart with scale breaks

    Finally, custom scale breaks are implemented for the dxRangeSelector widget:

    scale: { 
      startValue: 15000, 
      endValue: 150000, 
      breaks: [{ 
        startValue: 20000, 
        endValue: 35000 
      }, { 
        startValue: 100000, 
        endValue: 145000 
      }] 
    }
    

    Range selector with scale breaks

    Try it now!

    You can get v17.2 right now via npm.

    npm install devextreme@17.2
    

    Please let us know your thoughts about this feature!

  • Localization, Formatting and Mask Improvements for DevExtreme HTML5 Widgets (v17.2)

    Localization is an important part of an application. I have recently covered a number of localization aspects in my blog post about localization for DevExtreme. Note that this post has been updated to reflect the news in v17.2.

    Localization, Formatting and Mask Improvements

    We received lots of feedback about practical scenarios and we have made significant improvements. It is now possible to specify custom formats without the need to include Globalize or Intl. Globalize is a powerful library that provides rich formatting and localization capabilities, but many applications require localization for one language only. Using Globalize is a non-trivial step, so we decided to directly support a number of scenarios where the power of Globalize isn’t really needed. Intl is much easier to use, but developers can still save time by taking advantage of our new built-in feature set.

    In addition, we have added format support to the NumberBox and we have improved the behavior of masks in the TextBox.

    Built-in support for custom formats

    When working with numbers and dates, developers often need to define specific value formats. Prior to v17.2, DevExtreme supported only a few predefined formats out of the box. For custom formats, you had to use a 3-rd party i18n library (Globalize), or alternatively implement custom formatter and parser functions. Both approaches were more complicated than necessary for the use case.

    In v17.2 you can now use custom formats in all widgets that support formatting. You can set a custom format with just simple format string, based on an LDML-like pattern. There is no need to define formatter or parser functions.

    Date formatting examples

    Displaying DataGrid column values with the full month name:

    Grid with format

    Using a custom format for the DateBox that displays the date, the time in 12-hour format, and milliseconds:

    DateBox custom format

    Number formatting

    We have used feedback from v17.1 to analyze the most scenarios most important for our users, and implemented solutions for number formatting that will make the jobs of application developers easier. Meet the new NumberBox with custom formatting!

    Formatting functionality in the NumberBox involves not only the formatting of the value itself, but also intuitive behavior of the input caret. Additional symbols can be added while the user inputs data (for example, the delimiters), and the caret keeps the correct position.

    NumberBox Currency

    It used to be a major inconvenience to make minor changes to a value format when using our editors, because 3rd-party libraries were required. Now we directly support the following use cases with a single “format” option:

    Adding a prefix and/or postfix

    With the support of format strings in NumberBox, you can easily display the unit for a number. For instance, use format: "#0 px" to denote pixels or format: "$#0" for a currency format.

    NumberBox with prefix and postfix

    For a currency format that observes localization, use format: "currency":

    NumberBox with localized currency

    Showing localized fractional and digit grouping delimiters

    Different cultures have different number representation rules, different decimal delimiters, and digit grouping rules.

    Using Intl or Globalize with the setting format: "#,##0.##”, the elements , (the thousands separator) and . (the decimal separator) are automatically replaced with the separators from your locale:

    NumberBox number formatting

    If you don’t use either Intl or Globalize, the built-in localization engine enables you to customize decimal and thousands separators manually, and the format strings use these settings.

    Defining a precision in the NumberBox

    The patterns not only specify number format, they also control input, preventing typing of incorrect characters and controlling the number of decimal places. Here are some examples:

    "#0.##" - 2 decimal places, the fractional part is not mandatory

    NumberBox Floating Point

    "#0.000" - 3 decimal places, the fractional part is mandatory

    NumberBox Fixed Point

    Advanced scenarios

    Of course the NumberBox still supports the 3rd-party localization libraries Globalize and Intl in addition to the built-in localization engine.

    You can still define your own parser and formatter functions. Our documentation describes all the details, and please let us know via our Support Center if something is missing!

    Intl localization improvements

    Restrictions related to localization using the DevExtreme Intl integration are removed in v17.2:

    • It is not necessary to define a parser manually for any format (this was previously required for the DateBox and for date/time editing in the Data Grid). The correct parser is now generated automatically.

    • Custom format strings are available, as detailed above. Correct month names, decimal and thousands separators are automatically selected for the active locale. This type of custom formatting wasn’t previously supported when using Intl.

    Intl localization functionality is now much closer to that of Globalize. Intl is easier to use, requiring only one external file instead of the many CLDR data files that Globalize requires.

    TextBox mask improvements

    During data entry, it is inconvenient to have to navigate the input caret using the cursor keys, especially when masks are being used. We have improved the default caret behavior:

    • If the current value is undefined and the TextBox isn’t focused, the caret will be set at the beginning of the input when you tap or click any part of the TextBox.

    • If the current value is defined and the TextBox isn’t focused, the caret is set at the end of the input when you tap or click any part of the TextBox.

    • If the TextBox is focused, the caret moves to the position where you tap or click it.

    TextBox Mask improvements

    A new mode has also been added to make the mask visible. The mask can always be displayed, or it can be shown only when the TextBox has been focused.

    TextBox showMaskMode

    Try it!

    Version v17.2.3 is now available. Please visit the DevExtreme site for all the details.

    Please let us know your feedback on the new features!

  • Improvements to DevExtreme HTML5 Chart Date/Time Axis (v17.2)

    This post covers the DevExtreme Chart widget, which is available for jQuery, as an Angular component, ASP.NET MVC and ASP.NET Core MVC controls, and as a Knockout binding.

    Date/Time Series Improvements

    The date/time axis has been one of the weak points of the otherwise robust DevExtreme Chart control. Some customers reported issues with the generation of tick marks at the correct intervals, or with the formatting of tick labels. It was time for us to re-evaluate and improve our implementation, and we have now completed this work for v17.2.

    Tick Mark Generation

    Until now, the tick mark generation mechanism for date/time-scales was inherited from the numeric scale, which turned out to be a terrible idea. Axis label intervals were calculated in milliseconds, producing ticks in awkward positions, for instance at 29 days and 12 hours instead of 1 month, or at 6 days instead of a week.

    Now the tick interval is calculated so that labels always show the start of reasonable date/time intervals: the first day of a week, month or year, the start of a day, the top of an hour, etc.

    Intelligent tick intervals

    Axis Auto-Formatting

    Before v17.2, Axis labels were generated in a straightforward manner similar to tick marks, using a single format for all of them. As a result, there were few tick labels with long text.

    Now, the dxChart widget carefully chooses an axis label format for each label individually.

    Date/time label formatting

    Label auto-formatting is used in numeric scales, too, in which case the widget chooses one of the “large number” formats. In addition, you can set up a numeric axis to show integer values exclusively.

    Numeric scale label auto-formatting

    Weekend Skipping

    If your dataset contains entries for workdays only, you may want to exclude weekends and holidays from the axis. This is now possible using the options holidays and workWeek (optionally) and then setting workdaysOnly to true:

    $('#chart').dxChart({
      ...
      argumentAxis: {
        // specify holidays to exclude
        holidays: [
          new Date(2017, 11, 25),
          new Date(2017, 11, 26)
        ],
        // specify which days are workdays (skipping Mondays in this example):
        workWeek: [2, 3, 4, 5],
        // activate the skipping:
        workdaysOnly: true
      }
      ...
    });
    

    Weekend skipping

    Try it

    A beta of v17.2 is available right now via npm:

    npm i devextreme@17.2.2-pre-beta
    

    Please let us know your thoughts about these new features!

  • Pyramid Charts with the DevExtreme HTML5 Funnel Chart Widget (v17.2)

    This post covers the DevExtreme Funnel Chart widget, which is available for jQuery, as an Angular component, ASP.NET MVC and ASP.NET Core MVC controls, and as a Knockout binding.

    The Funnel Chart widget can be used to display pyramid charts as well as funnel charts (which have previously been described in this blog post). A pyramid chart is an isosceles triangle (meaning it has two sides of equal length) divided into sections. These sections are ordered by importance, which allows pyramid charts to be used to visualize hierarchies. The height of each section indicates quantity.

    How to use a Pyramid Chart

    Perhaps the most common example of a pyramid chart is Maslow’s hierarchy of needs. This pyramid arranges human needs from the most fundamental, such as food, water and rest, at the base to comparatively less essential, like fullfilling one’s potential, at the top. We created this chart using the new DevExtreme Funnel Chart widget available in the upcoming v17.2 release.

    Maslow's hierarchy of needs

    A pyramid chart has many applications besides Maslow’s hierarchy. Visualizing the organizational structure of a company is one of them. Executives appear at the top of the pyramid, above middle management, and lower-ranking employees are shown at the bottom. The chart reflects both the power structure in the company and the relative size of each group.

    Organization structure

    In the following example, a pyramid chart is used to analyze sales in a bike shop. In this case, the hierarchy indicates a priority of the goods sold by the shop, perhaps an advertising priority or a shipping priority. From this chart, you can see that clothing sells almost as well as bikes, which are presumably the “main” article, since they are shown at the pyramid base. Increasing the supply of clothing might add to the revenue.

    Sales

    Try it

    A beta of v17.2 is available right now via npm:

    npm i devextreme@17.2.2-pre-beta
    

    Use the following code to create a simple pyramid chart:

    $("#pyramid").dxFunnel({ 
      dataSource: [ 
        { item: "Lower-ranking Employees", count: 200 }, 
        { item: "Middle Management", count: 150 }, 
        { item: "Executives", count: 30 } 
      ], 
      title: "Organization Structure", 
      sortData: false, 
      argumentField: "item", 
      valueField: "count", 
      algorithm: "dynamicHeight", 
      inverted: true 
    });
    

    Please let us know your thoughts about this use case!

  • What's New in the Data Grid for React (Beta)

    The first Beta version of the DevExtreme React Grid is now available!

    We have already talked about some new features of the React Grid in our recent blog posts. If you’ve missed them, you can follow these links to read about the Material Design integration and some new capabilities for data processing customization. In this post I’ll sum up other improvements that we’ve made between the very first CTP release and the Beta. In this post I’ll be using the Bootstrap version for the visual examples.

    Paging control improvements

    Page size selector

    We have introduced a page size selector control that appears in the Grid footer side by side with the page switcher. It allows the user to change the number of rows visible on a single page. It also can be configured to contain an ‘All Rows’ item to show all rows at once.

    Please refer to the data paging guide for demos and more details.

    Page size selector

    Responsive mobile-friendly paging panel

    Mobile devices have become the primary channel for consuming digital information and working with data online. To provide the best possible experience on such devices, we have made the React Grid paging controls responsive and usable on small screen sizes.

    Mobile pager

    New configuration features for end users

    Column reordering and resizing

    Our React Data Grid allows the end user to configure many aspects of structural data appearance: sorting, grouping and others. Since the very first release we’ve introduced column resizing and column reordering functionality.

    Please refer to the column reordering and column resizing guides for demos and more details.

    Reordering and resizing

    Configuration via Drag-and-Drop

    Some end user configuration tasks can naturally be performed via drag-and-drop. For instance, an end user might want to change the column order by dragging a column to the desired position. We have introduced this functionality recently: now it’s possible to reorder columns by drag-and-drop, and to change column sizes by dragging a column’s resizing grip (see the screencast above this paragraph). It is now also possible to group and ungroup fields by dragging and dropping a column header to or from the Grid grouping panel. This capability is optional, and it is possible to disable drag-and-drop customization, and to enable column grouping buttons instead or in addition.

    Drag and drop

    Column chooser

    In a real-world web application data structures are often complex, with large numbers of properties, resulting in large numbers of Grid columns. End users may need to see only certain subsets of all available columns for specific use cases. The ColumnChooser component allows the user to set up the visible columns. It works with the TableColumnVisibility React Grid plugin. You have full control over the column chooser, and where or when to make it visible within your app. You can also control Grid column visibility without using the column chooser, perhaps with the help of your own custom UI component. Please refer to the Controlling Column Visibility guide for demos and more details.

    Column chooser

    Cancel column sorting with the Ctrl or Command key

    A minor but important improvement: sorting can be canceled for a specific column by clicking its header cell with the Ctrl key pressed (Command on Mac).

    Virtual Scrolling in React Grid for Material UI

    Before the React Grid Beta release, the virtual scrolling feature was only available for the Bootstrap grid. We can now announce that virtual scrolling is supported for Material UI. Hundreds of thousands of records can be shown without pagination.

    Try it yourself in our demo (switch to Material UI).

    Localization

    All built-in React Data Grid text resources are now localizable via the messages properties on the plugins. It’s also possible to configure data formatting with the help of the DataTypeProvider plugin. That means you can use any localization library you like, or the built-in Intl localization capabilities of the browser.

    Please refer to the localization and data types guides for demos and more details.

    Localization

    Accessibility and other improvements

    We have spent some time making the Grid more accessible. The first step is keyboard navigation. It is now possible to work with the Grid, in a desktop scenario, without using a mouse. We also plan to support the WIA-ARIA standard in future releases.

    You might find other minor improvements in our Grid for React that are not mentioned in this post.

    Feel free to download your copy from npm and let us know what you think. Your feedback is highly appreciated and will help us ship a stable RTM release without bugs or API inconveniences, as soon as possible.

  • XPO for .NET Core (.NET Standard 2.0, Beta in v17.2)

    Ever since .NET Core was first released, we have had requests to support XPO, our object/relational mapping solution, on the platform. Today I can finally announce that support is available – .NET Standard 2.0 made it possible!



    Getting started

    We have added a special page for .NET Core to our product documentation, which you can find by following this link. You’ll see that XPO can be added to your project as a NuGet package with a simple command:

    dotnet add package DevExpress.Xpo -v 17.2.2-beta -s https://nuget.devexpress.com/early-access/api
    

    The special URL you see, with early-access in it, can be used by all during the current beta phase. If you have a personal key for our NuGet repository (all about that here), you can replace the early-access part with that key, or omit the -s parameter entirely if you have NuGet configured already on your system.

    Once the package is installed, I recommend you have a look at the special .NET Standard 2.0 demos we have created. Of course the XPO API remains the same! You can apply all the information from our tutorials and examples, and even the overview I gave in my XPO webinar still applies for most of its content.

    On November 21st, we offer a webinar about XPO on .NET Core. Here’s our list of webinars, where you can sign up for this event.

    Limitations

    Even though .NET Standard 2.0 has come a long way and added lots of APIs that were previously missing from .NET Core, there are still a few pieces of XPO functionality that aren’t supported due to platform restrictions. Here’s a list that I believe to be complete at this time:

    1 – Providers: The full list of XPO supported database systems will be updated soon. At this time, XPO on .NET Core supports SQL Server, MySql, PostgreSQL and SQLite. Note that this is not really an XPO limitation – as soon as RDBMS vendors begin supporting .NET Standard 2.0, we will test XPO with those RDBMS providers and add them to our supported list.

    2 – OData: OData Services are not supported because our existing implementation relies on the Microsoft.Data.Services library, which only supports the .NET Framework.

    3 – The WCF based IDataStore implementations DataStoreService and CachedDataStoreService are technically available, but you won’t be able to run an application that uses them on .NET Core because it lacks the ServiceHost class. However, the related DataStoreClient and CachedDataStoreClient can be used, for instance in a Xamarin app, to access XPO services hosted on full .NET.

    4 –  The visual designer should not be used at this time, because it adds references to “standard” XPO into your project. Of course it is possible to use designer-generated classes, for instance by copying them from another project.
    NOTE: This limitation exists only in v17.2.2. Version 17.2.3+ already supports the visual designer in .NET Standard 2.0 projects. 

    Try it!

    If you use .NET Core, or consider doing so, please give XPO a spin! We are very interested in your feedback or questions!

    Finally, we are still interested in feedback through our survey about ORM and .NET Core!

  • DevExtreme HTML5 Pivot Grid Remote Data Processing

    This post covers the DevExtreme Pivot Grid widget, which is available for jQuery, as an Angular component, ASP.NET MVC and ASP.NET Core MVC controls, and as a Knockout binding.

    In the past (prior to v16.2), a connection to an OLAP cube (an XMLA store) was the only way to use the Pivot Grid with large data sources. Configuration and use of OLAP cubes are complicated, and client-side data processing can’t easily be applied because of the limited memory and performance available to browser runtimes as well as the simple fact that large data volumes would need to be transferred to the client in the first place. Server side data aggregation without an OLAP cube is the technique of choice for this scenario.

    Pivot Grid Remote Data

    Starting with DevExtreme v16.2, you can connect the Pivot Grid to a relational data source in server mode to perform filtering, grouping and summary calculation operations on the server without using OLAP or Analytic services.

    If you enable server mode by assigning true to the remoteOperations option, the Pivot Grid sends filtering, grouping and summary calculation options to the server and waits for the processed data.

    Comparing performance

    We compared loading time and network traffic volume when processing data locally and remotely. Here’s what we did, in case you would like to reproduce our tests.

    We created a database with the following table:

    CREATE TABLE [dbo].[Categories] (
      [CategoryID] INT IDENTITY (1, 1) NOT NULL,
      [CategoryName] VARCHAR (10) NULL,
      [RegisterDate] DATETIME NOT NULL,
      [Count] INT NOT NULL,
      [Price] DECIMAL (18, 2) NOT NULL,
      CONSTRAINT [PK_dbo.Categories] PRIMARY KEY CLUSTERED ([CategoryID] ASC)
    );
    

    We added the following indices to the table to optimize server-side grouping:

    CREATE INDEX CategoryIndex [dbo].[Categories] (CategoryName);
    CREATE INDEX DateIndex [dbo].[Categories] (RegisterDate);
    

    We fill the table with random data, including 100 unique CategoryName values and a RegisterDate range of three years.

    We configured the Pivot Grid like this:

    $("#container").dxPivotGrid({
      ...
      dataSource: {
        ...
        fields: [
          { dataField: "RegisterDate", dataType: "date", area: "column" },
          { dataField: "CategoryName", area: "row" },
          { dataField: "Price", summaryType: "sum", area: "data", 
            format: { type: "currency" } }
        ]
      }
    });
    

    When measuring performance, we used the DevExtreme.AspNet.Data library to process data on the server. Below are a comparison table and charts showing the results.

    Comparison table

    Comparison charts

    As you can see, client-side processing slows down dramatically with increasing record count, and becomes quite unusable with data sets of one million records. Remote data processing works fine even if the record count is 3 million. Note also how the data transfer volume remains almost constant for remote operations, while it obviously increases quickly for local operations. Of course, the Pivot Grid in server mode can process data sets containing many more than 3 million records, with loading time depending only on database configuration and server performance.

    Try it!

    We have published a sample that demonstrates how to configure the Pivot Grid widget to work with a remote WebAPI data service. Additionally, there is the DevExtreme PHP Data Library, which allows you to use the Pivot Grid Remote Data Processing feature with a mysql database and a PHP server. Finally, it is possible to run a JavaScript based server accessing a MongoDB database using this library.

    We maintain a list of links to samples in the devextreme-examples GitHub repository.

    Please let us know your thoughts about this feature and our results!

LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners