Figure 1. A Multiple Row Data List retrieval with a chart<\/figcaption><\/figure>\n\n\n\nFor developers wanting to insert a chart into an application, this is done via the m-Painter editor. <\/p>\n\n\n\n
Inside m-Painter, first click inside the space you have created for your graph and then click the “Chart” option within the Featured Components menu to open the Chart UI:<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 2. Inserting a chart via the m-Painter editor<\/figcaption><\/figure>\n\n\n\nFrom this point forward, please proceed to the “Using the Chart UI” section for learning about the different options and configurations for charts.<\/p>\n\n\n\n
…Into a m-Power dashboard<\/h3>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 3. A m-Power dashboard with a chart.<\/figcaption><\/figure>\n\n\n\nAs opposed to inserting a chart into an application, this section will show how developers can insert charts into an existing dashboard. <\/p>\n\n\n\n
Run the existing dashboard and press the plus icon on a blank portlet within the dashboard:<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 4. Inserting a chart into a dashboard<\/figcaption><\/figure>\n\n\n\nIn the ‘Add Dashboard Item’ screen, select the option to “Create a Chart”:<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 5. Selecting to Create a Chart from the charting UI.<\/figcaption><\/figure>\n\n\n\nFrom this point forward, please proceed to the “Using the Chart UI” section for learning about the different options and configurations for charts.<\/p>\n\n\n\n
Using the Chart UI<\/h2>\n\n\n\n The first option of the chart UI will be to specify the chart’s data source, as shown in Figure 6. The data must be sourced from either an m-Power application or Data Model. This example will utilize a Data Model that is built over some sales data.<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 6. Selecting the data source for the chart.<\/figcaption><\/figure>\n\n\n\nWhen selecting the data source, whether application or Data Model, developers may utilize the Configure Data screen to pass any additional parameters to filter the chart’s data set (as shown in Figure 7). Otherwise, just press the next button at the bottom right to proceed.<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 7. Configuring the selected data source for the chart<\/figcaption><\/figure>\n\n\n\nThe Configure Chart screen, shown below in Figure 8 is where the chart specific options are configured.<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 8. The Configure Chart UI, where customizing the graph is done.<\/figcaption><\/figure>\n\n\n\nChart Options<\/h3>\n\n\n\n Various parts of the Configure Chart screen in Figure 8 will be discussed in further depth. Focusing on the left-most options include:<\/p>\n\n\n\n
\n
\n
\n\t\t\t\n\t\t\t\tFigure 9. Various configurable chart options<\/figcaption><\/figure>\n<\/div><\/div>\n\n\n\n\n
\nA – Chart Title<\/strong> (required)\n\nProvide a name for the chart. The name will also serve as the title for the chart at runtime, if enabled in the Title and Axis<\/em> section (D). <\/li>\n<\/ul>\n<\/li>\n\n\n\nB – Chart Type* <\/strong>(required)\n\nSelect the chart output type (Bar, Pie, Line, etc.).<\/li>\n<\/ul>\n<\/li>\n\n\n\n C – Data Labels<\/strong>\n\nOptions include the ability to show a legend on the chart and the ability to show the data values on the chart.<\/li>\n<\/ul>\n<\/li>\n\n\n\n D – Title and Axis<\/strong>\n\nUse to show a chart title at runtime, as well as control the text and boundaries of the x-axis and y-axis of the chart. <\/li>\n<\/ul>\n<\/li>\n\n\n\n E – General Options<\/strong>\n\nSet different sizing and margin options for the chart, as well as configure drilldown links. For developers wanting advanced customizations the graph template may be customized from here.<\/li>\n<\/ul>\n<\/li>\n\n\n\n F – Colors<\/strong>\n\nSet the theme and displayed colors associated with the chart output.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n*Note<\/strong>: Depending on the Chart Type selected, various options that are presented in the menus in Figure 9 may be shown\/hidden. <\/p>\n\n\n\nChart Fields and Preview Pane<\/h3>\n\n\n\n On the right-most side of the Configure Chart window, a developer will choose the Chart Fields and Group Fields for the chart, as shown in Figure 10.<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 10. A preview of the chart is shown, based on the selected Chart and Group fields.<\/figcaption><\/figure>\n\n\n\nChart Fields<\/strong> will typically be values such as sales, quantity, units, count, etc. and serve as the numeric values a developer is interested in totaling or displaying as a percentage in the chart output.<\/p>\n\n\n\nAny numeric, non-Dimension fields<\/span> in the underlying dataset will be selectable as Chart Fields.<\/p>\n\n\n\nGroup Fields<\/strong> on the other hand define how the data is grouped for the chart. Good examples include customer, year, quarter, product, ship date, etc. <\/p>\n\n\n\nAny Dimension fields<\/span> in the underlying dataset will be selectable as Group Fields.<\/p>\n\n\n\nAfter selecting the necessary fields, pressing the ‘Preview’ option will render a preview of the current chart that has been configured.<\/p>\n\n\n\n
Note that depending on the selected chart type, multiple Group Fields or Chart Fields may be selected.<\/p>\n\n\n\n
To examine the underlying data the chart is utilizing for the output, pressing the ‘Data’ tab (as shown in Figure 11) will display the queried data. The left-most columns are shaded with a grey-background to indicate their selection as a Chart Field or Group Field.<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 11. The ‘Data’ tab previews the underlying dataset utilized by the Chart<\/figcaption><\/figure>\n\n\n\nA developer may also view the chart template source code using the ‘Template’ option (Figure 12). The template source code is by default in a read-only mode, however the ability to edit the source directly is enabled by selecting the ‘Customize’ button in the General Options<\/em>.<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 12. In the Preview Pane, selecting ‘Template’ displays the chart source code.<\/figcaption><\/figure>\n\n\n\nOnce the appropriate configurations have been made, press the green ‘Finish’ button in the charting UI. If the chart is being inserted into an m-Power application, be sure to additionally save m-Painter.<\/p>\n\n\n\n
Editing an existing chart<\/h2>\n\n\n\nCharts in an m-Power application<\/h3>\n\n\n\n Using Figure 13 as a reference, note that m-Painter will show the developer a stock image of a bar chart (as opposed to the actual selected chart type). To go edit the chart, simply click the ‘Edit’ option in the light-blue selected element menu or select ‘Edit Chart’ from the Element Options menu on the far-right side of m-Painter to bring up the charting UI.<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 13. How to edit an existing chart in m-Painter<\/figcaption><\/figure>\n\n\n\nCharts in an m-Power dashboard<\/h3>\n\n\n\n Using Figure 14 as a reference, click the gear icon on the portlet that contains the chart then press ‘Edit’ to bring up the charting UI.<\/p>\n\n\n\n\n\t\t\t\n\t\t\t\tFigure 14 – Editing a chart in a dashboard.<\/figcaption><\/figure>\n\n\n\nPromoting to Production<\/h2>\n\n\n\n To promote charts to production the underlying data source, whether an m-Power application or a Data Model, must be promoted to production. <\/p>\n\n\n\n
If a custom graph template has been created, move over the appropriate .FTL file in …\/m-power\/mrcjava\/mrcclasses\/mrc-graph-templates\/v2\/custom to the same directory in production. <\/p>\n","protected":false},"excerpt":{"rendered":"
This document will cover how to use the graphing utility in m-Painter. <\/p>\n","protected":false},"author":2,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[308],"ht-kb-tag":[],"class_list":["post-14113","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-latest-charting"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/14113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=14113"}],"version-history":[{"count":81,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/14113\/revisions"}],"predecessor-version":[{"id":14243,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/14113\/revisions\/14243"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=14113"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=14113"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=14113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"\/](\"\/docs\/images\/charting1.png\")