{"id":297,"date":"2023-06-27T15:30:00","date_gmt":"2023-06-27T15:30:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=297"},"modified":"2025-02-26T08:54:47","modified_gmt":"2025-02-26T08:54:47","slug":"charting-data-analysis","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/charting-data-analysis","title":{"rendered":"Next Generation Charting &amp; Data Analysis: Chart Toolbar &amp; More"},"content":{"rendered":"\n<p>The Chart Toolbar, introduced in 23.1 as a Preview component, is a companion container for UI actions that may be used independently or in conjunction with the Data Chart and Category Chart components. This allows you to simply select from a predefined set of properties on the chart to perform deeper data analysis on the data displayed in the chart.<\/p>\n\n\n\n<p>This is the first iteration of the Chart Toolbar,\u00a0<span class=\"NormalTextRun SCXW95586317 BCX0\">and we continue to add features and capabilities to the toolbar with each release, with the goal being a full-featured data analytics capability without you needing to write any additional code.\u202f The Chart Toolbar also lets you add your own custom buttons, with custom actions and icons, and full control over where toolbar items live in the Chart Toolbar<\/span>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/5633.ChartToolbar.gif\" alt=\" Chart Toolbar example \" title=\" Chart Toolbar example \"\/><\/figure>\n\n\n\n<p><span class=\"NormalTextRun SCXW19631025 BCX0\">The code to add a <\/span><span class=\"NormalTextRun SCXW19631025 BCX0\">toolbar<\/span><span class=\"NormalTextRun SCXW19631025 BCX0\"> is simple, just reference the chart in the Target property.<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/toolbar-code-snippet.png\" alt=\"code snipet explaining how to add a toolbar to a  chart\" title=\"code snipet explaining how to add a toolbar to a  chart\"\/><\/figure>\n\n\n\n<p>The Chart Toolbar includes Reset, Zoom and Analysis buttons at the top level.<\/p>\n\n\n\n<p>The Analysis button is where you\u2019ll find all the data analysis features, like Lines, Trend Lines, Series Average, etc.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/toolbar-top-level.png\" alt=\" data analysis features, like Lines, Trend Lines, Series Average\" title=\" data analysis features, like Lines, Trend Lines, Series Average\"\/><\/figure>\n\n\n\n<p>The Lines submenu includes Max, Min and Average Value options for the series.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/Screenshot-2023-06-26-at-2.56.48-PM.png\" alt=\" Max, Min and Average Value options chart options\" title=\" Max, Min and Average Value options chart options\"\/><\/figure>\n\n\n\n<p>When you select these options, you\u2019ll see the corresponding values reflected in the chart in a Green, Orange and Red dashed lined.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/03\/12\/toolbar-lines-applied.png\" alt=\" line chart example\" title=\" line chart example\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"custom-toolbar-actions\">Custom Toolbar Actions<\/h2>\n\n\n\n<p>The Chart Toolbar gives you the opportunity to add your <a href=\"https:\/\/staging.infragistics.com\/products\/ignite-ui-blazor\/blazor\/components\/menus\/toolbar#tool-actions\">own button types<\/a>, with custom icons and Commands for each button.&nbsp; The list of available buttons includes:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Button<\/li>\n\n\n\n<li>Checkbox<\/li>\n\n\n\n<li>Icon Button<\/li>\n\n\n\n<li>Icon Menu<\/li>\n\n\n\n<li>Label<\/li>\n\n\n\n<li>Number Input<\/li>\n\n\n\n<li>Radio<\/li>\n<\/ul>\n\n\n\n<p>Each of these tools exposes an OnCommand event that can be triggered upon interacting with them as a mouse click, and new and existing tools can be repositioned and marked hidden using various Toolbar properties.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"wrap-up\">Wrap Up<\/h2>\n\n\n\n<p><span class=\"NormalTextRun SCXW117754567 BCX0\">This is just the beginning for what <\/span><span class=\"NormalTextRun SCXW117754567 BCX0\">we\u2019re<\/span><span class=\"NormalTextRun SCXW117754567 BCX0\"> calling Next Generation Data Analytics, built directly into the chart controls.\u202f We are excited to ship this Preview with the <\/span><span class=\"NormalTextRun SCXW117754567 BCX0\">most commonly requested<\/span><span class=\"NormalTextRun SCXW117754567 BCX0\"> analysis features.\u202f If there is something <\/span><span class=\"NormalTextRun SCXW117754567 BCX0\">you\u2019d<\/span><span class=\"NormalTextRun SCXW117754567 BCX0\"> like to see in the next release, make sure to shoot me an email a<\/span>t <a href=\"mailto:jasonb@infragistics.com\">jasonb@infragistics.com<\/a> s<span class=\"NormalTextRun SCXW117754567 BCX0\">o we can get it in.\u202f At the same time, exercise the Toolbar API and add as much new functionality as <\/span><span class=\"NormalTextRun SCXW117754567 BCX0\">you\u2019d<\/span><span class=\"NormalTextRun SCXW117754567 BCX0\"> like<\/span>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Chart Toolbar, introduced in 23.1 as a Preview component, is a companion container for UI actions that may be used independently or in conjunction with the Data Chart and Category Chart components. This allows you to simply select from a predefined set of properties on the chart to perform deeper data analysis on the data displayed in the chart.<\/p>\n","protected":false},"author":81,"featured_media":1253,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-297","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-updates"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/297","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\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":4,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/297\/revisions"}],"predecessor-version":[{"id":2438,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/297\/revisions\/2438"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1253"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=297"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=297"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}