{"id":2666,"date":"2025-03-24T14:12:11","date_gmt":"2025-03-24T14:12:11","guid":{"rendered":"https:\/\/www.infragistics.com\/blogs\/?p=2666"},"modified":"2025-04-29T06:48:27","modified_gmt":"2025-04-29T06:48:27","slug":"dashboard-tile","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/dashboard-tile","title":{"rendered":"Building Dashboards with Ease Using the Dashboard Tile"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

This release, Infragistics has a new and exciting charting feature to reveal. We call it the DashboardTile<\/code> and its purpose is to present a dynamic visualization that the end user can alter at runtime via its various toolbar actions. It is available now<\/strong> as a Preview<\/em> for Ignite UI For Angular<\/a>\/React<\/a>\/WebComponents<\/a>\/Blazor<\/a> and Ultimate UI for WPF (and more platforms to come).<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Motivation<\/h2>\n\n\n\n

At Infragistics, we usually organize our components to be extremely modular. A complete charting experience can involve a number of disparate components to configure\/connect, including: Chart, Legend, Toolbar, ZoomSlider, Labels, Settings, etc. One user may want these configured and laid out in one way, while another user may want them configured and laid out in an entirely different way, so it’s useful to us that these components are separate but connected, and can be placed in the user’s layout at their discretion and individually configured.<\/p>\n\n\n\n

However, this can result in a verbose amount of configuration to complete simple tasks, and the degree to which we allow the user to configure the components can be daunting. To make things more challenging, achieving aesthetically pleasing data visualization layouts can be challenging on the web, especially for those less experienced with the platform. Moreover, a large portion of users may want a reasonably straightfoward configuration of the components.<\/p>\n\n\n\n

For example, this is a pretty common way to want a visualization to look:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

And to produce that effect, this html was required:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html>\n    <head>\n        <title>Sample | Ignite UI | Web Components | infragistics<\/title>\n        <meta charset=\"UTF-8\" \/>\n\n        <link rel=\"stylesheet\" \n        href=\"\/src\/index.css\" \n        type=\"text\/css\" \/>\n    <\/head>\n\n    <body>\n        <div id=\"root\">\n            <div class=\"container sample\">\n                <div class=\"aboveContentSplit\">\n                    <div \n                    class=\"aboveContentLeftContainer\">\n                        <igc-toolbar \n                        name=\"toolbar\" \n                        id=\"toolbar\" \n                        orientation=\"Horizontal\">\n                        <\/igc-toolbar>\n                    <\/div>\n                    <div \n                    class=\"aboveContentRightContainer\">\n                        <igc-legend \n                        name=\"legend\" \n                        id=\"legend\" \n                        orientation=\"Horizontal\"> \n                        <\/igc-legend>\n                    <\/div>\n                <\/div>\n\n                <div class=\"container fill\">\n                    <igc-category-chart name=\"chart\" \n                    id=\"chart\" \n                    chart-type=\"Line\" \n                    is-horizontal-zoom-enabled=\"true\" \n                    is-vertical-zoom-enabled=\"true\" \n                    included-properties=\"year, europe, china, america\" \n                    y-axis-title=\"TWh\" \n                    is-transition-in-enabled=\"true\">\n                    <\/igc-category-chart>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/body>\n<\/html><\/pre>\n\n\n\n
And this css:<\/p>\n\n\n\n
.aboveContentSplit {\n    display: flex;\n    flex-direction: row;\n}\n.aboveContentLeftContainer {\n    margin-left: 1.25rem;\n    display: flex;\n    flex-grow: 1;\n    justify-content: flex-start;\n    align-items: flex-end;\n}\n.aboveContentRightContainer {\n    margin-right: 1.25rem;\n    display: flex;\n    flex-grow: 1;\n    justify-content: flex-end;\n    align-items: flex-end;\n}\n\nhtml,\nbody,\n#root {\n    margin: 0px;\n    height: 100%;\n}\n\n.container {\n    display: flex;\n    flex-flow: column;\n    flex-wrap: nowrap;\n    align-items: stretch;\n    align-self: stretch;\n    \/* min-width: 200px; *\/\n    height: 100%;\n    width: 100%;\n    padding: 0px;\n    margin: 0px;\n    box-sizing: border-box;\n}\n\n.fill > * {\n    height: 100%;\n}<\/pre>\n\n\n\n
and the components needed to be configured in code like so:<\/p>\n\n\n\n
import { \n    IgcLegendModule, \n    IgcCategoryChartModule, \n    IgcCategoryChartToolbarModule } \n    from \"igniteui-webcomponents-charts\";\nimport { IgcToolbarModule } from \"igniteui-webcomponents-layouts\";\nimport { \n    IgcLegendComponent, \n    IgcCategoryChartComponent \n    } \n    from \"igniteui-webcomponents-charts\";\nimport { IgcToolbarComponent } from \"igniteui-webcomponents-layouts\";\nimport { CountryRenewableElectricity } from \".\/CountryRenewableElectricity\";\nimport { ModuleManager } from \"igniteui-webcomponents-core\";\n\nimport \".\/index.css\";\n\nModuleManager.register(\n    IgcLegendModule, \n    IgcToolbarModule, \n    IgcCategoryChartModule, \n    IgcCategoryChartToolbarModule);\n\nvar legend = document.getElementById(\"legend\") as IgcLegendComponent;\nvar toolbar = document.getElementById(\"toolbar\") as IgcToolbarComponent;\nvar chart = document.getElementById(\"chart\") as IgcCategoryChartComponent;\n\ntoolbar.target = chart;\nchart.dataSource = new CountryRenewableElectricity();\nchart.legend = legend;<\/pre>\n\n\n\n
In response, DashboardTile<\/code> is meant to present a common set of components for the provided data with zero or next to zero configuration, and all laid out in an aesthetically pleasing way.<\/p>\n\n\n\n
Additionally, since Infragistics is taking greater control over the integration of all the components we take the opportunity to create an editable dashboard tile scenario whereby the end user is able to tweak how the visualization is presented based on various menus that are made available. This is intended to make it easier to create dynamic dashboards in your applications.<\/p>\n\n\n\n
 By comparison, the above scenario can be created with DashboardTile<\/code> with this html:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>Sample | Ignite UI | Web Components | infragistics<\/title>\n        <meta charset=\"UTF-8\" \/>\n\n        <link rel=\"stylesheet\" \n        href=\"\/src\/index.css\" \n        type=\"text\/css\" \/>\n    <\/head>\n\n    <body>\n        <igc-dashboard-tile \n            id=\"tile\" \n            tile-title=\"Renewable Electricity by Country\"\n            width=\"100%\" \n            height=\"100%\">\n        <\/igc-dashboard-tile>\n    <\/body>\n<\/html><\/pre>\n\n\n\n
and this css:<\/p>\n\n\n\n
html,\nbody {\n    margin: 0px;\n    height: 100%;\n}<\/pre>\n\n\n\n
and this code:<\/p>\n\n\n\n
import { CountryRenewableElectricity } from \".\/CountryRenewableElectricity\";\nimport { ModuleManager } from \"igniteui-webcomponents-core\";\nimport {\n    IgcDashboardTileComponent,\n    IgcDashboardTileModule,\n    IgcDataChartDashboardTileModule,\n    IgcGeographicMapDashboardTileModule,\n    IgcLinearGaugeDashboardTileModule,\n    IgcPieChartDashboardTileModule,\n    IgcRadialGaugeDashboardTileModule\n} from \"igniteui-webcomponents-dashboards\";\nimport \".\/index.css\";\n\nModuleManager.register(\n    IgcDashboardTileModule, \n    IgcDataChartDashboardTileModule, \n    IgcPieChartDashboardTileModule, \n    IgcGeographicMapDashboardTileModule, \n    IgcRadialGaugeDashboardTileModule, \n    IgcLinearGaugeDashboardTileModule);\n\nvar tile = document.getElementById(\"tile\") as IgcDashboardTileComponent;\ntile.dataSource = new CountryRenewableElectricity();<\/pre>\n\n\n\n
But the truly awesome part is that the DashboardTile<\/code> version of the scenario is much more dynamic than the version that used CategoryChart<\/code>.<\/p>\n\n\n\n
Anatomy of the Dashboard Tile<\/h2>\n\n\n\n
DashboardTile<\/code> has an integrated title:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
which you can set via the tileTitle<\/code>.<\/p>\n\n\n\n
DashboardTile<\/code> has an integrated legend which is automatically configured to display items from the associated chart, whichever that may be:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
DashboardTile<\/code> presents a toolbar which surfaces a similar set of commands compared to category chart:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
But there are additionally several other actions that are specific to DashboardTile<\/code>.<\/p>\n\n\n\n
If you click the grid action, it shows a grid containing the data that is bound to the DashboardTile<\/code>. Selection state is synchronized between the grid and the chart.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
If you click the editor action, it shows an editor with contextual settings for the current displayed visualization which allow the end-user to modify the visualization to their liking.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
When the DashboardTile<\/code> initially displays it gives its best guess as to which visualization to show you (more on that later). If it was incorrect, though, or if you’d like to compare with other ways to visualize the data you can use the chart type action on the toolbar:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
If you bind the DashboardTile<\/code> to a LocalDataSource<\/code> the grouping\/summary state is even synchronized between the grid and the chart, so that changes to the grid aggregation are propagated to the chart.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Automatic Visualization<\/strong><\/h2>\n\n\n\n
Apart from making it easier to lay out and configure a data visualization scenario, and letting the end user modify things are runtime, the DashboardTile<\/code> also helps you automatically render a useful visualization with no configuration.<\/p>\n\n\n\n
This is helpful to make it easier to do more with less code, but it also helps if your application has very dynamic data, and you can’t necessarily predict which visualization to use at build time.<\/p>\n\n\n\n
DashboardTile<\/code> uses a library of heuristics to try to determine the most appropriate visualization to display. Here are some examples:<\/p>\n\n\n\n
    \n
  • If you provide a single value, DashboardTile<\/code> is likely to present you with a LinearGauge<\/code> or RadialGauge<\/code>.<\/li>\n\n\n\n
  • If you provide a small number of values that are easy to distinguish from one another, DashboardTile<\/code> is likely to present you with a PieChart<\/code>.<\/li>\n\n\n\n
  • If you provide a small number of values that are difficult to compare precisely DashboardTile<\/code> will avoid a PieChart<\/code> and instead present you with a column chart.<\/li>\n\n\n\n
  • If you have more values than make sense for a column chart, DashboardTile<\/code> will tend to show you a line chart.<\/li>\n\n\n\n
  • If your data appears to be scatter values, DashboardTile<\/code> will tend to show you a scatter chart.<\/li>\n\n\n\n
  • If your scatter data seems to be geographic coordinates, DashboardTile<\/code> may choose to plot these on a map rather than a chart.<\/li>\n\n\n\n
  • If your data appears to be geometric shapes, these might be plotted on a chart or a map.<\/li>\n\n\n\n
  • If your data appears to be stock data, DashboardTile<\/code> may chose to show a candlestick or OHLC plot.<\/li>\n\n\n\n
  • If DashboardTile<\/code>‘s heuristics are fooled, you can always set the desired chart type via the chartType<\/code> property, or modify the chart type via the toolbar chart type action. <\/li>\n<\/ul>\n\n\n\n
    Conclusion<\/strong><\/h2>\n\n\n\n
    DashboardTile<\/code> is an exciting new charting feature which we have now released as a Preview<\/em>. We’d appreciate your feedback so that we can make more improvements before final release.<\/p>\n","protected":false},"excerpt":{"rendered":"
    We are extremely excited to introduce a brand-new charting functionality \u2013 Dashboard Tile. Learn how to use this charting feature to build interactive Dashboards with almost no hand-coding at all. <\/p>\n","protected":false},"author":72,"featured_media":2675,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,7,8,11,9,1,10,14],"tags":[23,26,30,27,28,29,31,21,24,25,19,32],"class_list":["post-2666","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates","category-angular","category-blazor","category-ultimate","category-react","category-uncategorized","category-web-components","category-wpf","tag-angular","tag-blazor","tag-business-intelligence","tag-chart","tag-charting","tag-dashboard","tag-data-visualization","tag-ignite-ui-web-components","tag-infragistics","tag-react","tag-web-components","tag-wpf"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/2666","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/72"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=2666"}],"version-history":[{"count":8,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/2666\/revisions"}],"predecessor-version":[{"id":2716,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/2666\/revisions\/2716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2675"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=2666"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=2666"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=2666"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}