alguidelines/navpatterns/1-patterns/creating-custom-charts/index.html
2021-11-10 09:19:40 +00:00

372 lines
No EOL
43 KiB
HTML

<!doctype html><html lang=en class="js csstransforms3d">
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=generator content="Hugo 0.89.2">
<meta name=description content>
<title>Creating Custom Charts :: AL Guidelines</title>
<link href=/css/nucleus.css?1636535976 rel=stylesheet>
<link href=/css/fontawesome-all.min.css?1636535976 rel=stylesheet>
<link href=/css/featherlight.min.css?1636535976 rel=stylesheet>
<link href=/css/perfect-scrollbar.min.css?1636535976 rel=stylesheet>
<link href=/css/auto-complete.css?1636535976 rel=stylesheet>
<link href=/css/theme.css?1636535976 rel=stylesheet>
<link href=/css/theme-blue.css?1636535976 rel=stylesheet>
<link href=/css/variant.css?1636535976 rel=stylesheet>
<link href=/css/print.css?1636535976 rel=stylesheet media=print>
<script src=/js/jquery.min.js?1636535976></script>
<style>:root #header+#content>#left>#rlblock_left{display:none!important}</style>
</head>
<body data-url=/navpatterns/1-patterns/creating-custom-charts/>
<script>var index_url="/index.json",root_url="/",baseUri=root_url.replace(/\/$/,'')</script>
<nav id=sidebar>
<div id=header-wrapper>
<div id=header>
<a id=logo href=/ style="color:#f5f5f5;font-family:novacento sans wide,helvetica,tahoma,geneva,arial,sans-serif;font-size:30px;font-weight:700;margin-top:-2px">
ALGuidelines.dev
</a>
<i style=color:#f5f5f5>Code is Poetry</i>
</div>
<div class=searchbox>
<label for=search-by><i class="fas fa-search"></i></label>
<input data-search-input id=search-by type=search placeholder=Search...>
<span data-search-clear><i class="fas fa-times"></i></span>
</div>
<script src=/js/lunr.min.js?1636535976></script>
<script src=/js/auto-complete.js?1636535976></script>
<script src=/js/search.js?1636535976></script>
</div>
<div class=highlightable>
<ul class=topics>
<li data-nav-id=/welcome/ title=Welcome class=dd-item><a href=/welcome/><b><i class="fas fa-home"></i> </b>Welcome</a><ul></ul></li>
<li data-nav-id=/bcpatterns/ title="BC Patterns" class=dd-item><a href=/bcpatterns/><b><i class="fas fa-clone"></i> </b>BC Patterns</a><ul></ul></li>
<li data-nav-id=/bcbestpractices/ title="BC Dev. Best Practices" class=dd-item><a href=/bcbestpractices/><b><i class="fas fa-medal"></i> </b>BC Dev. Best Practices</a><ul></ul></li>
<li data-nav-id=/navpatterns/ title="NAV Patterns Archive" class="dd-item parent"><a href=/navpatterns/><b><i class="fas fa-save"></i> </b>NAV Patterns Archive</a><ul>
<li data-nav-id=/navpatterns/1-patterns/ title="1. Patterns" class="dd-item parent"><a href=/navpatterns/1-patterns/>1. Patterns</a><ul>
<li data-nav-id=/navpatterns/1-patterns/activity-log/ title="Activity Logs" class=dd-item><a href=/navpatterns/1-patterns/activity-log/>Activity Logs</a></li>
<li data-nav-id=/navpatterns/1-patterns/argument-table/ title="Argument Table" class=dd-item><a href=/navpatterns/1-patterns/argument-table/>Argument Table</a></li>
<li data-nav-id=/navpatterns/1-patterns/blocked-entity/ title="Blocked Entity" class=dd-item><a href=/navpatterns/1-patterns/blocked-entity/>Blocked Entity</a><ul>
<li data-nav-id=/navpatterns/1-patterns/blocked-entity/data-driven-blocked-entity/ title="Data Driven Blocked Entity" class=dd-item><a href=/navpatterns/1-patterns/blocked-entity/data-driven-blocked-entity/>Data Driven Blocked Entity</a></li></ul></li>
<li data-nav-id=/navpatterns/1-patterns/cached-web-service-calls/ title="Cached Web Server Calls" class=dd-item><a href=/navpatterns/1-patterns/cached-web-service-calls/>Cached Web Server Calls</a></li>
<li data-nav-id=/navpatterns/1-patterns/conditional-cascading-update/ title="Conditional Cascading Update" class=dd-item><a href=/navpatterns/1-patterns/conditional-cascading-update/>Conditional Cascading Update</a></li>
<li data-nav-id=/navpatterns/1-patterns/copy-document/ title="Copy Document" class=dd-item><a href=/navpatterns/1-patterns/copy-document/>Copy Document</a></li>
<li data-nav-id=/navpatterns/1-patterns/create-data-from-templates/ title="Create Data from Templates" class=dd-item><a href=/navpatterns/1-patterns/create-data-from-templates/>Create Data from Templates</a></li>
<li data-nav-id=/navpatterns/1-patterns/create-urls-to-nav-clients/ title="Create URLs to NAV Clients" class=dd-item><a href=/navpatterns/1-patterns/create-urls-to-nav-clients/>Create URLs to NAV Clients</a></li>
<li data-nav-id=/navpatterns/1-patterns/creating-custom-charts/ title="Creating Custom Charts" class="dd-item active"><a href=/navpatterns/1-patterns/creating-custom-charts/>Creating Custom Charts</a></li>
<li data-nav-id=/navpatterns/1-patterns/cross-session-events/ title="Cross Session Events" class=dd-item><a href=/navpatterns/1-patterns/cross-session-events/>Cross Session Events</a></li>
<li data-nav-id=/navpatterns/1-patterns/currently-active-record/ title="Currently Active Record" class=dd-item><a href=/navpatterns/1-patterns/currently-active-record/>Currently Active Record</a></li>
<li data-nav-id=/navpatterns/1-patterns/data-migration-facade/ title="Data Migration Facade" class=dd-item><a href=/navpatterns/1-patterns/data-migration-facade/>Data Migration Facade</a></li>
<li data-nav-id=/navpatterns/1-patterns/discovery-event/ title="Discovery Event" class=dd-item><a href=/navpatterns/1-patterns/discovery-event/>Discovery Event</a></li>
<li data-nav-id=/navpatterns/1-patterns/document/ title=Document class=dd-item><a href=/navpatterns/1-patterns/document/>Document</a></li>
<li data-nav-id=/navpatterns/1-patterns/easy-update-of-setup-or-supplementary-information/ title="Easy Update Of Setup Or Supplementary Information" class=dd-item><a href=/navpatterns/1-patterns/easy-update-of-setup-or-supplementary-information/>Easy Update Of Setup Or Supplementary Information</a></li>
<li data-nav-id=/navpatterns/1-patterns/error-message-processing/ title="Error Message Processing" class=dd-item><a href=/navpatterns/1-patterns/error-message-processing/>Error Message Processing</a></li>
<li data-nav-id=/navpatterns/1-patterns/extending-the-role-center-headlines/ title="Extending the Role Center Headlines" class=dd-item><a href=/navpatterns/1-patterns/extending-the-role-center-headlines/>Extending the Role Center Headlines</a></li>
<li data-nav-id=/navpatterns/1-patterns/feature-localization-for-data-structures/ title="Feature Localization For Data Structures" class=dd-item><a href=/navpatterns/1-patterns/feature-localization-for-data-structures/>Feature Localization For Data Structures</a></li>
<li data-nav-id=/navpatterns/1-patterns/hooks/ title=Hooks class=dd-item><a href=/navpatterns/1-patterns/hooks/>Hooks</a></li>
<li data-nav-id=/navpatterns/1-patterns/implementation-of-surrogate-keys-using-autoincrement-pattern/ title="Surrogate keys using Autoincrement Pattern" class=dd-item><a href=/navpatterns/1-patterns/implementation-of-surrogate-keys-using-autoincrement-pattern/>Surrogate keys using Autoincrement Pattern</a></li>
<li data-nav-id=/navpatterns/1-patterns/instructions-in-the-ui/ title="Instructions in the UI" class=dd-item><a href=/navpatterns/1-patterns/instructions-in-the-ui/>Instructions in the UI</a></li>
<li data-nav-id=/navpatterns/1-patterns/integration-of-addresses/ title="Integration of Addresses" class=dd-item><a href=/navpatterns/1-patterns/integration-of-addresses/>Integration of Addresses</a></li>
<li data-nav-id=/navpatterns/1-patterns/journal-error-processing/ title="Journal Error Processing" class=dd-item><a href=/navpatterns/1-patterns/journal-error-processing/>Journal Error Processing</a></li>
<li data-nav-id=/navpatterns/1-patterns/journal-template-batch-line/ title="Journal Template Batch Line" class=dd-item><a href=/navpatterns/1-patterns/journal-template-batch-line/>Journal Template Batch Line</a></li>
<li data-nav-id=/navpatterns/1-patterns/master-data/ title="Master Data" class=dd-item><a href=/navpatterns/1-patterns/master-data/>Master Data</a></li>
<li data-nav-id=/navpatterns/1-patterns/multi-file-download/ title="Multi-file Download" class=dd-item><a href=/navpatterns/1-patterns/multi-file-download/>Multi-file Download</a></li>
<li data-nav-id=/navpatterns/1-patterns/multi-page-list/ title="Multi-Page List" class=dd-item><a href=/navpatterns/1-patterns/multi-page-list/>Multi-Page List</a></li>
<li data-nav-id=/navpatterns/1-patterns/multilanguage-application-data/ title="Multilanguage Application Data" class=dd-item><a href=/navpatterns/1-patterns/multilanguage-application-data/>Multilanguage Application Data</a></li>
<li data-nav-id=/navpatterns/1-patterns/net-exception-handling-in-cal/ title="NET Exception Handling in CAL" class=dd-item><a href=/navpatterns/1-patterns/net-exception-handling-in-cal/>NET Exception Handling in CAL</a><ul>
<li data-nav-id=/navpatterns/1-patterns/net-exception-handling-in-cal/tryfunction-net-exception-handling-in-cal/ title="TryFunction NET Exception Handling in CAL" class=dd-item><a href=/navpatterns/1-patterns/net-exception-handling-in-cal/tryfunction-net-exception-handling-in-cal/>TryFunction NET Exception Handling in CAL</a></li></ul></li>
<li data-nav-id=/navpatterns/1-patterns/no-series/ title="No Series" class=dd-item><a href=/navpatterns/1-patterns/no-series/>No Series</a></li>
<li data-nav-id=/navpatterns/1-patterns/notifications/ title=Notifications class=dd-item><a href=/navpatterns/1-patterns/notifications/>Notifications</a><ul>
<li data-nav-id=/navpatterns/1-patterns/notifications/in-context-notifications/ title="In-context Notifications" class=dd-item><a href=/navpatterns/1-patterns/notifications/in-context-notifications/>In-context Notifications</a></li>
<li data-nav-id=/navpatterns/1-patterns/notifications/notification-lifecycle-management-pattern/ title="Notification Lifecycle Management Pattern" class=dd-item><a href=/navpatterns/1-patterns/notifications/notification-lifecycle-management-pattern/>Notification Lifecycle Management Pattern</a></li></ul></li>
<li data-nav-id=/navpatterns/1-patterns/observer/ title=Observer class=dd-item><a href=/navpatterns/1-patterns/observer/>Observer</a></li>
<li data-nav-id=/navpatterns/1-patterns/posting-routine-select-behavior/ title="Posting Routine - Select Behavior" class=dd-item><a href=/navpatterns/1-patterns/posting-routine-select-behavior/>Posting Routine - Select Behavior</a></li>
<li data-nav-id=/navpatterns/1-patterns/product-name/ title="Product Name" class=dd-item><a href=/navpatterns/1-patterns/product-name/>Product Name</a></li>
<li data-nav-id=/navpatterns/1-patterns/queries/ title=Queries class=dd-item><a href=/navpatterns/1-patterns/queries/>Queries</a><ul>
<li data-nav-id=/navpatterns/1-patterns/queries/select-distinct-with-queries/ title="SELECT DISTINCT with Queries" class=dd-item><a href=/navpatterns/1-patterns/queries/select-distinct-with-queries/>SELECT DISTINCT with Queries</a></li>
<li data-nav-id=/navpatterns/1-patterns/queries/use-queries-to-detect-duplicate-records/ title="use Queries to Detect Duplicate Records" class=dd-item><a href=/navpatterns/1-patterns/queries/use-queries-to-detect-duplicate-records/>use Queries to Detect Duplicate Records</a></li>
<li data-nav-id=/navpatterns/1-patterns/queries/use-queries-to-replace-nested-loops/ title="Use Queries to Replace Nested Loops" class=dd-item><a href=/navpatterns/1-patterns/queries/use-queries-to-replace-nested-loops/>Use Queries to Replace Nested Loops</a></li></ul></li>
<li data-nav-id=/navpatterns/1-patterns/read-once-initialization-and-validation/ title="Read-once Initialization and Validation" class=dd-item><a href=/navpatterns/1-patterns/read-once-initialization-and-validation/>Read-once Initialization and Validation</a></li>
<li data-nav-id=/navpatterns/1-patterns/released-entity/ title="Released Entity" class=dd-item><a href=/navpatterns/1-patterns/released-entity/>Released Entity</a></li>
<li data-nav-id=/navpatterns/1-patterns/report-selection/ title="Report Selection" class=dd-item><a href=/navpatterns/1-patterns/report-selection/>Report Selection</a></li>
<li data-nav-id=/navpatterns/1-patterns/security/ title=Security class=dd-item><a href=/navpatterns/1-patterns/security/>Security</a></li>
<li data-nav-id=/navpatterns/1-patterns/setup-specificity-fallback/ title="Setup Specificity Fallback" class=dd-item><a href=/navpatterns/1-patterns/setup-specificity-fallback/>Setup Specificity Fallback</a></li>
<li data-nav-id=/navpatterns/1-patterns/silent-file-upload-and-download/ title="Silent File Upload and Download" class=dd-item><a href=/navpatterns/1-patterns/silent-file-upload-and-download/>Silent File Upload and Download</a></li>
<li data-nav-id=/navpatterns/1-patterns/singleton/ title=Singleton class=dd-item><a href=/navpatterns/1-patterns/singleton/>Singleton</a><ul>
<li data-nav-id=/navpatterns/1-patterns/singleton/singleton-codeunit/ title="Singleton Codeunit" class=dd-item><a href=/navpatterns/1-patterns/singleton/singleton-codeunit/>Singleton Codeunit</a></li>
<li data-nav-id=/navpatterns/1-patterns/singleton/singleton-table/ title="Singleton Table" class=dd-item><a href=/navpatterns/1-patterns/singleton/singleton-table/>Singleton Table</a><ul>
<li data-nav-id=/navpatterns/1-patterns/singleton/singleton-table/cue-table/ title="Cue Table" class=dd-item><a href=/navpatterns/1-patterns/singleton/singleton-table/cue-table/>Cue Table</a></li>
<li data-nav-id=/navpatterns/1-patterns/singleton/singleton-table/setup-table/ title="Setup Table" class=dd-item><a href=/navpatterns/1-patterns/singleton/singleton-table/setup-table/>Setup Table</a></li></ul></li></ul></li>
<li data-nav-id=/navpatterns/1-patterns/standard-journal/ title="Standard Journal" class=dd-item><a href=/navpatterns/1-patterns/standard-journal/>Standard Journal</a></li>
<li data-nav-id=/navpatterns/1-patterns/temporary-dataset-report/ title="Temporary Dataset Report" class=dd-item><a href=/navpatterns/1-patterns/temporary-dataset-report/>Temporary Dataset Report</a></li>
<li data-nav-id=/navpatterns/1-patterns/totals-and-discounts-on-subpages-sales-and-purchases/ title="Totals and Discounts on Subpages Sales and Purchases" class=dd-item><a href=/navpatterns/1-patterns/totals-and-discounts-on-subpages-sales-and-purchases/>Totals and Discounts on Subpages Sales and Purchases</a></li>
<li data-nav-id=/navpatterns/1-patterns/transfer-custom-fields/ title="Transfer Custom Fields" class=dd-item><a href=/navpatterns/1-patterns/transfer-custom-fields/>Transfer Custom Fields</a></li>
<li data-nav-id=/navpatterns/1-patterns/variant-facade/ title="Variant Facade" class=dd-item><a href=/navpatterns/1-patterns/variant-facade/>Variant Facade</a></li></ul></li>
<li data-nav-id=/navpatterns/2-anti-patterns/ title="2. Anti-Patterns" class=dd-item><a href=/navpatterns/2-anti-patterns/>2. Anti-Patterns</a><ul>
<li data-nav-id=/navpatterns/2-anti-patterns/nav-upgrade/ title="Nav Upgrade" class=dd-item><a href=/navpatterns/2-anti-patterns/nav-upgrade/>Nav Upgrade</a></li>
<li data-nav-id=/navpatterns/2-anti-patterns/reusable-bugs/ title="Reusable Bugs" class=dd-item><a href=/navpatterns/2-anti-patterns/reusable-bugs/>Reusable Bugs</a></li></ul></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/ title="3. CAL Coding Guidelines" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/>3. CAL Coding Guidelines</a><ul>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/design/ title=Design class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/design/>Design</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/internally-used-dot-net-types/ title="Internally-used DotNet Types" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/internally-used-dot-net-types/>Internally-used DotNet Types</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/internationalization/ title=Internationalization class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/internationalization/>Internationalization</a><ul>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/internationalization/using-calcdate/ title="Using Calcdate" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/internationalization/using-calcdate/>Using Calcdate</a></li></ul></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/localizability/ title=Localizability class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/localizability/>Localizability</a><ul>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/localizability/captionml-for-system-tables/ title="CaptionML on System Pages" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/localizability/captionml-for-system-tables/>CaptionML on System Pages</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/localizability/fieldcaption-and-tablecaption/ title="FIELDCAPTION and TABLECAPTION" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/localizability/fieldcaption-and-tablecaption/>FIELDCAPTION and TABLECAPTION</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/localizability/global-text-constants/ title="Global Text Constants" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/localizability/global-text-constants/>Global Text Constants</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/localizability/use-text-constants/ title="Use Text Constants" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/localizability/use-text-constants/>Use Text Constants</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/localizability/using-optioncaptionml/ title="Using OptionCaptionML" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/localizability/using-optioncaptionml/>Using OptionCaptionML</a></li></ul></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/ title=Readability class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/>Readability</a><ul>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/begin-as-an-afterword/ title="Begin as an 'After Word'" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/begin-as-an-afterword/>Begin as an 'After Word'</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/begin-end/ title="Begin-End - Compound Only" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/begin-end/>Begin-End - Compound Only</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/binary-operator-line-start/ title="Binary Operator to Start Line" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/binary-operator-line-start/>Binary Operator to Start Line</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/blank-lines/ title="Blank Lines.md" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/blank-lines/>Blank Lines.md</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/case-actions/ title="CASE Action" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/case-actions/>CASE Action</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/colon-usage-in-case/ title="Colon usage in CASE" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/colon-usage-in-case/>Colon usage in CASE</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/comments-curly-brackets/ title="Comments inside Curly Brackets" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/comments-curly-brackets/>Comments inside Curly Brackets</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/comments-spacing/ title="Comment Spacing" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/comments-spacing/>Comment Spacing</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/end-else-pair/ title="END ELSE Pair" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/end-else-pair/>END ELSE Pair</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/indentation/ title=Indentation class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/indentation/>Indentation</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/keyword-pairs-indentation/ title="Keyword Pairs - Indentation" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/keyword-pairs-indentation/>Keyword Pairs - Indentation</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/line-start-keywords/ title="Line Start Keywords" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/line-start-keywords/>Line Start Keywords</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/lonely-repeat/ title="Lonely Repeat" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/lonely-repeat/>Lonely Repeat</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/named-invocations/ title="Named Invocations" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/named-invocations/>Named Invocations</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/nested-withs/ title="Nested WITHs" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/nested-withs/>Nested WITHs</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/one-statement-per-line/ title="One Statement Per Line" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/one-statement-per-line/>One Statement Per Line</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/separate-if-and-else/ title="Separate IF and ELSE" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/separate-if-and-else/>Separate IF and ELSE</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/spacing-binary-operators/ title="Spacing Binary Operators" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/spacing-binary-operators/>Spacing Binary Operators</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/spacing-brackets-and/ title="Spacing Brackets and ::" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/spacing-brackets-and/>Spacing Brackets and ::</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/spacing-unary-operators/ title="Spacing Unary Operators" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/spacing-unary-operators/>Spacing Unary Operators</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/suggested-abbreviations/ title="Suggested Abbreviations" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/suggested-abbreviations/>Suggested Abbreviations</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/temporary-variable-naming/ title="Temporary Variable Naming" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/temporary-variable-naming/>Temporary Variable Naming</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/textconst-suffixes/ title="TextConst Suffixes" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/textconst-suffixes/>TextConst Suffixes</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/unary-operator-line-end/ title="Unary Operator Line End" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/unary-operator-line-end/>Unary Operator Line End</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/unnecessary-compound-parenthesis/ title="Unnecessary Compound Parenthesis" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/unnecessary-compound-parenthesis/>Unnecessary Compound Parenthesis</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/unnecessary-else/ title="Unnecessary ELSE" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/unnecessary-else/>Unnecessary ELSE</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/unnecessary-function-parenthesis/ title="Unnecessary Function Parenthesis" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/unnecessary-function-parenthesis/>Unnecessary Function Parenthesis</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/unnecessary-separators/ title="Unnecessary Separators" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/unnecessary-separators/>Unnecessary Separators</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/unnecessary-truefalse/ title="Unnecessary TRUE/FALSE" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/unnecessary-truefalse/>Unnecessary TRUE/FALSE</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/variable-already-scoped/ title="Variable Already Scoped" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/variable-already-scoped/>Variable Already Scoped</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/variable-naming/ title="Variable Naming" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/variable-naming/>Variable Naming</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/readability/variables-declarations-order/ title="Variables Declarations Order" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/readability/variables-declarations-order/>Variables Declarations Order</a></li></ul></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/ux/ title=UX class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/ux/>UX</a><ul>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/ux/actions-images/ title="Actions - Images" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/ux/actions-images/>Actions - Images</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/ux/confirm/ title=CONFIRM class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/ux/confirm/>CONFIRM</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/ux/fielderror/ title=FIELDERROR class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/ux/fielderror/>FIELDERROR</a></li>
<li data-nav-id=/navpatterns/3-cal-coding-guidelines/ux/message-and-error/ title="MESSAGE and ERROR" class=dd-item><a href=/navpatterns/3-cal-coding-guidelines/ux/message-and-error/>MESSAGE and ERROR</a></li></ul></li></ul></li>
<li data-nav-id=/navpatterns/4-get-involved/ title="(OLD) Get Involved" class=dd-item><a href=/navpatterns/4-get-involved/>(OLD) Get Involved</a><ul>
<li data-nav-id=/navpatterns/4-get-involved/code-of-conduct/ title="Code of Conduct" class=dd-item><a href=/navpatterns/4-get-involved/code-of-conduct/>Code of Conduct</a></li>
<li data-nav-id=/navpatterns/4-get-involved/patterns-authors/ title="Patterns Authors" class=dd-item><a href=/navpatterns/4-get-involved/patterns-authors/>Patterns Authors</a></li>
<li data-nav-id=/navpatterns/4-get-involved/template-for-writing-nav-design-patterns/ title="Template for writing Nav Design Patterns" class=dd-item><a href=/navpatterns/4-get-involved/template-for-writing-nav-design-patterns/>Template for writing Nav Design Patterns</a></li></ul></li>
<li data-nav-id=/navpatterns/related-links/ title="Related Links" class=dd-item><a href=/navpatterns/related-links/>Related Links</a></li></ul></li>
<li data-nav-id=/contributing/ title=Contributing class=dd-item><a href=/contributing/><b><i class="fas fa-clone"></i> </b>Contributing</a><ul></ul></li>
</ul>
<div id=shortcuts>
<div class=nav-title>More</div>
<ul>
<li><a class=padding href=https://discord.gg/4wbfNv3><i class="fab fa-discord"></i> BC Discord</a></li>
<li><a class=padding href=https://github.com/microsoft/bcalhelp><i class="fab fa-github"></i> GitHub repo</a></li>
</ul>
</div>
<div id=footer>
<p>Built with <a href=https://github.com/McShelby/hugo-theme-relearn><i class="fas fa-heart"></i></a> by <a href=https://gohugo.io/>Hugo</a></p>
</div>
</div>
</nav>
<div id=body>
<div id=overlay></div>
<div class="padding highlightable">
<div id=top-bar>
<div id=top-github-link>
<a class=github-link title="Edit this page" href=https://github.com/microsoft/bcalhelp/edit/main/content/NAVPatterns/1-patterns/creating-custom-charts/index.md target=blank>
<i class="fas fa-code-branch"></i>
<span id=top-github-link-text>Edit this page</span>
</a>
</div>
<div id=breadcrumbs>
<span id=sidebar-toggle-span>
<a href=# id=sidebar-toggle data-sidebar-toggle>
<i class="fas fa-bars"></i>
</a>
</span>
<span id=toc-menu><i class="fas fa-list-alt"></i></span>
<ol class=links itemscope itemtype=http://schema.org/BreadcrumbList>
<meta itemprop=itemListOrder content="Descending">
<li itemscope itemtype=https://schema.org/ListItem itemprop=itemListElement><meta itemprop=position content="4"><a itemprop=item href=/><span itemprop=name>Home</span></a> > </li>
<li itemscope itemtype=https://schema.org/ListItem itemprop=itemListElement><meta itemprop=position content="3"><a itemprop=item href=/navpatterns/><span itemprop=name>NAV Patterns Archive</span></a> > </li>
<li itemscope itemtype=https://schema.org/ListItem itemprop=itemListElement><meta itemprop=position content="2"><a itemprop=item href=/navpatterns/1-patterns/><span itemprop=name>1. Patterns</span></a> > </li>
<li itemscope itemtype=https://schema.org/ListItem itemprop=itemListElement><meta itemprop=position content="1"><a itemprop=item href=/navpatterns/1-patterns/creating-custom-charts/ aria-disabled=true><span itemprop=name>Creating Custom Charts</span></a></li>
</ol>
</div>
<div class=progress>
<div class=wrapper>
<nav id=TableOfContents>
<ul>
<li><a href=#abstract>Abstract</a></li>
<li><a href=#description>Description</a>
<ul>
<li><a href=#implementation-overview>Implementation Overview</a></li>
<li><a href=#add-in-buffer-table>Add-in Buffer Table</a></li>
<li><a href=#cardpart-page>CardPart page</a></li>
<li><a href=#optional-preserving-user-personalization>Optional: Preserving User Personalization</a></li>
<li><a href=#optional-show-multiple-charts-within-a-single-cardpart>Optional: Show Multiple Charts within a Single CardPart</a></li>
</ul>
</li>
<li><a href=#usage>Usage</a>
<ul>
<li><a href=#nav-specific-example-1>NAV Specific Example 1</a></li>
<li><a href=#nav-specific-example-2>NAV Specific Example 2</a></li>
</ul>
</li>
<li><a href=#nav-usages>NAV Usages</a></li>
<li><a href=#ideas-for-improvement>Ideas for improvement</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div id=head-tags>
</div>
<main id=body-inner>
<h1>Creating Custom Charts</h1>
<p><em>Originally by Nikola Kukrika at Microsoft Development Center Copenhagen</em></p>
<h2 id=abstract>Abstract</h2>
<p>The goal of this solution is to enable you to:</p>
<ol>
<li>Use charts in the web client.</li>
<li>Create charts with custom functionality.</li>
</ol>
<h2 id=description>Description</h2>
<p>This pattern enables you to implement a business chart (Specific Chart type) in a way that is maintainable and reusable on other pages. This also enables you to provide specific functionality that is not possible with the Generic Chart type and it enables you to show charts in the web client.</p>
<p>The Business Chart add-in is a special because it is a combination of .NET and Javascript add-ins depending on the display target. In the web client, it renders a JavaScript control, while in the win client, it renders a .Net control. Because of this behavior, you can expect minor differences in how the chart is presented in the win client versus in the web client. Note that this implementation is specific to NAV platform code, because it is not possible to create add-ins that combines .NET and JavaScript by using a framework API.</p>
<p><a href=5153.Picture1.png><img src=5153.Picture1.png alt=" "></a></p>
<p>Example of the same chart in the win client:</p>
<p><a href=1411.Picture2.png><img src=1411.Picture2.png alt=" "></a></p>
<p>The most obvious differences in chart rendering in the two clients are: Slightly different line heights, slightly different chart height, legends in web-client charts can be used as toggle filters to show/hide groups (this is not possible in the win client).</p>
<h3 id=implementation-overview>Implementation Overview</h3>
<p><a href=1781.Picture5.png><img src=1781.Picture5.png alt=" "></a></p>
<h3 id=add-in-buffer-table>Add-in Buffer Table</h3>
<p>This table is used to encapsulate the logic of the Business Chart Add-in. The table handles the following logic:</p>
<ul>
<li>Storing chart values and conversion from .NET to C/AL and vice versa</li>
<li>Handling of captions: We must use C/AL to provide multilanguage text in add-ins. In addition, the multilanguage text must be encapsulated in a single place, because we pass/read the same dataset from/to the add-in.</li>
<li>DrillDown logic</li>
<li>Other helper data related functions, for displaying date, periods, etc.[Bogdana1] [NK2] [NK3]</li>
</ul>
<p><strong>Note:</strong> It is recommended that you reuse the <strong>Business Chart Buffer <strong>table</strong></strong>(485) as a buffer table or extend. It is a generic table which should cover most of the use cases. Implement a new buffer table only if this table does not meet your needs.</p>
<h3 id=cardpart-page>CardPart page</h3>
<p>The CardPart page hosts the Business Chart add-in and must use the add-in buffer table as a source table.</p>
<p>On the page, you must implement the following triggers:</p>
<ul>
<li><strong>AddInReady</strong> &ndash; Executed when the page is done rendering. Used to initialize the add-in.</li>
<li><strong>DataPointClicked</strong> &ndash; Single-click on an element on the chart.</li>
<li><strong>DataPointDoubleClicked</strong> &ndash; Double-click on an element on the chart</li>
</ul>
<p>The CardPart usually contains a StatusText variable to provide more information about the chart or dataset and a set of actions to control the chart.</p>
<p>The most commonly used actions are:</p>
<ul>
<li><strong>Select Chart</strong>, <strong>Previous Chart</strong>, <strong>Next Chart</strong></li>
<li><strong>Set Period</strong>, <strong>Work Date</strong></li>
<li>Actions to filter the data set</li>
<li><strong>Refresh</strong></li>
<li><strong>Chart Information</strong> &ndash; a tooltip with a description of the chart and how data is calculated.</li>
</ul>
<h3 id=optional-preserving-user-personalization>Optional: Preserving User Personalization</h3>
<p>One of the most common functionalities is personalization. If the chart can be customized by the user, you should store the settings that the user has entered and apply them the next time the chart is loaded.</p>
<p>To do this, you need the following:</p>
<ul>
<li>A setup record to store the data. You can use the <strong>Business Chart User Setup</strong> table (487) or create a new setup table if you need to store more information.</li>
<li>A management codeunit to write/apply the settings to the chart and to encapsulate other logic. Since we should not write code on pages, the code for the actions and other logic that does not apply to the setup record****should go in this codeunit.</li>
<li>Setup pages where users can customize how the chart is shown and set different settings.</li>
</ul>
<p>The relation between the components is visualized in the following diagram[</p>
<p><a href=0246.Picture6.png><img src=0246.Picture6.png alt=" "></a></p>
<h3 id=optional-show-multiple-charts-within-a-single-cardpart>Optional: Show Multiple Charts within a Single CardPart</h3>
<p>This option is useful on a Role Center where you want to show multiple charts using different datasets within a single part. In that case, you need a record to store the last chart selection, the setup records, and code units for separate charts.</p>
<p>See, for example, the implementation of the <strong>Mini Generic Chart</strong> page (1390), which uses <strong>MiniChartManagment</strong> CodeUnit to manage separate management codeunits for charts and their setup records. The last selected chart is stored in a separate table, <strong>Mini Chart Definition</strong> (1310).</p>
<p><a href=1803.Picture7.png><img src=1803.Picture7.png alt=" "></a></p>
<h2 id=usage>Usage</h2>
<p>To implement the pattern, create a new ChartPart and set the source table to <strong>Business Chart Buffer</strong>.</p>
<p>Add a field named <strong>BusinessChart</strong> and set the ControlAddIn property to Microsoft.Dynamics.Nav.Client.BusinessChart.</p>
<p>Then implement the AddInReady event. This event is executed when the page is done rendering. Code within this method must call the Update method from the <strong>Business Chart Buffer</strong> table, Update(CurrPage.BusinessChart) to initialize the chart and assign initial values.</p>
<p>If you need a setup record and codeunit, then it is a good idea to encapsulate this logic within a method.</p>
<h3 id=nav-specific-example-1>NAV Specific Example 1</h3>
<p>Implementation of the <strong>Finance Performance Chart</strong> page (762)</p>
<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-al data-lang=al>BusinessChart::AddInReady<span style=color:#f92672>()
</span><span style=color:#f92672> </span>UpdateChart<span style=color:#f92672>(</span>Period::&#34; &#34;<span style=color:#f92672>)</span>;
<span style=color:#66d9ef>LOCAL</span> UpdateChart<span style=color:#f92672>(</span>Period : <span style=color:#e6db74>&#39;,Next,Previous&#39;</span><span style=color:#f92672>)
</span><span style=color:#f92672> </span>MoveAndUpdateChart<span style=color:#f92672>(</span>Period,<span style=color:#ae81ff>0</span><span style=color:#f92672>)</span>;
<span style=color:#66d9ef>LOCAL</span> MoveAndUpdateChart<span style=color:#f92672>(</span>Period : <span style=color:#e6db74>&#39;,Next,Previous&#39;</span>;Move : <span style=color:#66d9ef>Integer</span><span style=color:#f92672>)
</span><span style=color:#f92672> </span>AccSchedChartManagement<span style=color:#f92672>.</span>GetSetupRecordset<span style=color:#f92672>(</span>AccountSchedulesChartSetup,AccountSchedulesChartSetup<span style=color:#f92672>.</span>Name,Move<span style=color:#f92672>)</span>;
AccSchedChartManagement<span style=color:#f92672>.</span>UpdateData<span style=color:#f92672>(</span>Rec,Period,AccountSchedulesChartSetup<span style=color:#f92672>)</span>;
Update<span style=color:#f92672>(</span>CurrPage<span style=color:#f92672>.</span>BusinessChart<span style=color:#f92672>)</span>;
StatusText <span style=color:#f92672>:=</span> GetCurrentSelectionText<span style=color:#f92672>(</span>&#34;Period Filter Start Date&#34;,&#34;Period Filter End Date&#34;<span style=color:#f92672>)</span>;
</code></pre></div><p>In the MoveAndUpdateChart method, the AccSchedChartManagement codeunit gets a setup record and updates it if necessary. Then, it initializes the chart with setup data and sets the StatusText to show the period for which data is displayed. The same method is used by the actions to move and update the chart so that there is no code duplication.</p>
<p>The following code is used to implement <strong>DataPointClicked</strong></p>
<div class=highlight><pre tabindex=0 style=color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4><code class=language-al data-lang=al>BusinessChart::DataPointClicked<span style=color:#f92672>(</span>point : <span style=color:#66d9ef>DotNet</span> &#34;Microsoft.Dynamics.Nav.Client.BusinessChart.BusinessChartDataPoint&#34;<span style=color:#f92672>)
</span><span style=color:#f92672> </span>SetDrillDownIndexes<span style=color:#f92672>(</span>point<span style=color:#f92672>)</span>;
AccSchedChartManagement<span style=color:#f92672>.</span>DrillDown<span style=color:#f92672>(</span>Rec,AccountSchedulesChartSetup<span style=color:#f92672>)</span>;
</code></pre></div><p>SetDrillDownindexes is a method from the <strong>Business Chart Buffer</strong> table that maps the DotNet point variable to C/AL data, so it must be used. The next method that you must implement is the action to be performed on Drilldown.</p>
<p>The **DataPointDoubleClicked **trigger has the same implementation logic as the DataPointClicked trigger.</p>
<h3 id=nav-specific-example-2>NAV Specific Example 2</h3>
<p>Implementation of chart part 1390 on the <strong>Small Business Role Center</strong> page (9022)</p>
<p><a href=1541.Picture7.png><img src=1541.Picture7.png alt=" "></a></p>
<p>This chart part contains data from multiple charts within a single part. The <strong>Status Text</strong> field shows the name of the chart and the current period. Users can browse through the charts with <strong>Next Chart <strong>and</strong>Previous Chart</strong> or use <strong>Select Chart</strong> to choose from a list of available charts.</p>
<p><a href=2553.Picture8.png><img src=2553.Picture8.png alt=" "></a></p>
<p>On this dialog, users can choose if a chart should be enabled or disabled. If the chart is not enabled, it will be skipped on the **Previous Chart **and <strong>Next Chart</strong> actions. Charts used by this part use different codeunits and setup records. If the user changes the selected chart, this option will be saved and applied next time role center is opened.</p>
<p>Users can also change the period length.</p>
<p><a href=5545.Picture9.png><img src=5545.Picture9.png alt=" "></a></p>
<p>Choosing the <strong>Chart Information</strong> button opens a short description of the chart.</p>
<p><a href=5582.Picture10.png><img src=5582.Picture10.png alt=" "></a></p>
<h2 id=nav-usages>NAV Usages</h2>
<p>Implementation of multiple charts within a single part:</p>
<ul>
<li>Page 1390, <strong>Mini Generic Chart</strong></li>
</ul>
<p>Charts that use a setup record and select the chart with <strong>Customize Chart Setup</strong> pages:</p>
<ul>
<li>Page 772, <strong>Inventory Performance</strong></li>
<li>Page 771, <strong>Purchase Performance</strong></li>
<li>Page 770, <strong>Sales Performance</strong></li>
<li>Page 762, <strong>Finance Performance</strong></li>
</ul>
<p>Chart that uses the <strong>Business Chart User Setup</strong> table:</p>
<ul>
<li>Page 768, <strong>Aged Acc. Receivable Chart</strong></li>
</ul>
<p>Other implementations:</p>
<ul>
<li>Page 972, <strong>Time Sheet Chart</strong></li>
<li>Page 869, <strong>Cash Flow Chart</strong></li>
<li>Page 760, <strong>Trailing Sales Orders Chart</strong></li>
</ul>
<h2 id=ideas-for-improvement>Ideas for improvement</h2>
<p>We should consider making a generic table for the last chart that the user has used.</p>
<p>We should investigate if we could make generic code for selecting periods and other common functionality by using RecordRefs.</p>
<p>Add-In improvements &ndash; Different ways to visualize the data and to pick colors for categories.</p>
<p>As a nice-to-have feature, we could implement functionality to cycle through the charts with a timer.</p>
<footer class=footline>
</footer>
</main>
</div>
<div id=navigation>
<a class="nav nav-prev" href=/navpatterns/1-patterns/create-urls-to-nav-clients/ title="Create URLs to NAV Clients"><i class="fa fa-chevron-left"></i></a>
<a class="nav nav-next" href=/navpatterns/1-patterns/cross-session-events/ title="Cross Session Events"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
<div style=left:-1000px;overflow:scroll;position:absolute;top:-1000px;border:none;box-sizing:content-box;height:200px;margin:0;padding:0;width:200px>
<div style=border:none;box-sizing:content-box;height:200px;margin:0;padding:0;width:200px></div>
</div>
<script src=/js/clipboard.min.js?1636535976></script>
<script src=/js/perfect-scrollbar.min.js?1636535976></script>
<script src=/js/perfect-scrollbar.jquery.min.js?1636535976></script>
<script src=/js/jquery.svg.pan.zoom.js?1636535976></script>
<script src=/js/featherlight.min.js?1636535976></script>
<script src=/js/modernizr.custom-3.6.0.js?1636535976></script>
<script src=/js/relearn.js?1636535976></script>
</body>
</html>