{"id":787,"date":"2011-01-05T03:45:25","date_gmt":"2011-01-05T09:45:25","guid":{"rendered":"http:\/\/www.mrc-productivity.com\/legacy\/?page_id=787"},"modified":"2017-10-19T15:27:57","modified_gmt":"2017-10-19T20:27:57","slug":"introduction-to-m-power-graphing","status":"publish","type":"page","link":"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/introduction-to-m-power-graphing","title":{"rendered":"Graphing Interface Overview"},"content":{"rendered":"<h1>m-Power Graphing Overview<\/h1>\n<p><a href=\"#genera\">General Information<\/a><br \/>\n<a href=\"#notes\">Exporting Graphs<\/a><br \/>\n<a href=\"#convert\">Upgrading Legacy Graphs<\/a><br \/>\n<a href=\"#links\">Additional Info<\/a><\/p>\n<h3 id=\"general\">General Information<\/h3>\n<p>The m-Power graphing library supports graphing options that are Flash powered (or JavaScript, if Flash is unavailable) and offer a wide variety of graphing options for the developer to consider. Click <a target=\"_blank\" href=\"\/Products\/charts.html\">here<\/a> to see some of the graphs that are available to be created via the m-Power platform. <\/p>\n<p>Graphs add visual detail and style to reports, as well as improving functionality.  m-Power offers a graphing interface for ease of use during the graph-design process.  In this example, we will be working over three fields in the order detail file: Product Number, Quantity Shipped, and Price. Detail rows have been removed, and we&#39;re subtotaling by product number so we see the total quantity and sales for each product. Our table looks like this:<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphing\/prodsDolls.png\" \/><\/p>\n<p>When you open up graph properties in m-Painter, you&#39;ll immediately see a change.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphing\/graphprop1.png\" \/><\/p>\n<p>You are now working in a tabbed interface that will help walk you through making your graphs. m-Power&#39;s new interface has been designed to make designing graphs much more straightforward and less confusing.<\/p>\n<p>In the &quot;Graph Type&quot; tab you select which graph you want to use. Graphs are grouped by category: Bar, Line, Combination, Pie, and Other. In this example, we will make a 3D Pie chart that will show total sales by product number, so we&#39;ll go to the &quot;Pie&quot; tab and select the &quot;3D Pie&quot; chart.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphing\/3dpie.png\" \/><\/p>\n<p>We can now move to the &quot;Fields&quot; tab. The default &quot;Selected Fields&quot; are &quot;Shipped Quantity&quot; and &quot;List Price&quot;. We only want to show price, so we&#39;ll drag and drop &quot;Shipped Quantity&quot; back over to &quot;Available Fields&quot; so it doesn&#39;t display on the chart.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphing\/fields.png\" \/><\/p>\n<p>If we click over to the &quot;Levels&quot; tab, we can select the level of detail we want your graph to show. In our case, we are looking for the total sales amount of each product number. These amounts appear on Subtotal Row 1, so we will select &quot;Subtotal Level 1 PRDNO&quot; as our report level.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphlevels.jpg\" \/><\/p>\n<p><strong>Note:<\/strong> The Image Data Collection icon automatically moves when you select your level. This icon represents from which level your data is being pulled.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphing\/icon.png\" \/><\/p>\n<p>We can now move onto the &quot;Descriptions&quot; tab. Here, we can change the labels for our pie sections. You have the option to either type in a static label, select a field from the table to use, or you can do both, which is what we will do here. We&#39;re going to use a field from the table (&quot;Product Number&quot;), and suffix it with &quot;Total&quot;. If we were just graphing a grand total row and wanted a completely static field, we would select the &quot;Label&quot; option, and type in our field description, such as &quot;Total Sales&quot;.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphing\/graphLabels.png\" \/><\/p>\n<p>We&#39;ll now go to the &quot;Options&quot; tab.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphing\/props.png\" \/><\/p>\n<p>Here we can customize the look and feel of our graph. There are tabs all the way down the side with different categories of options to change. Lets leave these alone for a moment and see what our graph looks like.<\/p>\n<p>The last feature in the graphing interface is the &quot;Graph Preview&quot; tab. We can preview the graph without having to save and run our report. The &quot;Graph Preview&quot; tab allows you to obtain instant feedback on what your changes will look like in real time without having to run your report.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphpreview.jpg\" \/><\/p>\n<p>In our preview, since our labels have two lines on them and because we have so many products, we&#39;ll need to make our pie chart bigger to be able to see our totals, so we&#39;ll go back to our &quot;Options&quot; tab and move to the &quot;General&quot; section. Here, we&#39;ll make our graph 800 pixels wide and 400 pixels long. That should compensate for our larger labels.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphresize.png\" \/><\/p>\n<p>And if we look at the &quot;Graph Preview&quot;, sure enough, it does.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphpreview2.jpg\" \/><\/p>\n<p>On the other hand, such a big graph might be too big for some users. We can bring the graph back down to its old size and change the threshold instead. The &quot;Threshold&quot; is a setting that filters smaller amounts into an &quot;Others&quot; category. If the threshold is raised, more fields will be placed into the &quot;Others&quot; category and won&#39;t display on the screen.<\/p>\n<p>Back in the &quot;Options&quot; tab, we&#39;ll return our width to 600 and our height to 300, and then switch to the &quot;Chart and Plot&quot; section. In there, we&#39;ll pick the &quot;Threshold&quot; tab. The default threshold is 2%, meaning that if an amount is less than 2% of the grand total, it gets placed into the &quot;Others&quot; category. Let&#39;s raise that value from .02 to .05.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/threshold.png\" \/><\/p>\n<p>That seems to have taken enough out to show everything in a readable format in the &quot;Graph Preview&quot;.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphpreview3.jpg\" \/><\/p>\n<p>For developers who feel more comfortable with the a text based interface, you can switch to text mode by clicking on the &quot;Legacy Mode&quot; link directly to the right of the &quot;Graph Image Options&quot; text.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphing\/legacy.png\" \/><\/p>\n<p>If you click on it, you&#39;ll be presented with a warning. <strong>Note:<\/strong> Flipping between legacy mode and wizard mode will lose any changes made to the graph properties if they haven&#39;t been saved by clicking OK on the lower right hand side of the &quot;Graph Properties&quot; screen. If you&#39;ve made changes that you haven&#39;t saved and want to, click &quot;Cancel&quot; on the warning and save. Then open up graph properties and click on legacy mode again. This time, click &quot;OK&quot; when the warning comes up and you&#39;ll be brought to the previous interface.<\/p>\n<p><img decoding=\"async\" class=\"border\" alt=\"\" src=\"\/legacy\/images\/graphpropertieslegacymode.jpg\" \/><\/p>\n<p>Now that we&#39;ve finished customizing our graph, we can run it. Here it is in a browser window when we run the report:<\/p>\n<p><img decoding=\"async\" alt=\"\" src=\"\/legacy\/images\/graphing\/finished.png\" \/><\/p>\n<p><!--\n\n<h3 id=\"notes\">Special Notes<\/h3>\n\n\n\n\n\n<div style=\"padding-left: 15px;\">\n\n<ul>\n\n\n<li>By default m-Power graphs are not supported in non-HTML output as they require Flash and\/or JavaScript to display.  If you want to export a graph to another format (i.e. PDF, Excel, etc.), you must first convert the graph to a legacy <a href=\"#convert\">jFreeChart graph<\/a>, described below.<\/li>\n\n<\/ul>\n\n<\/div>\n\n--><\/p>\n<h3 id=\"convert\">Converting Between Graph Libraries<\/h3>\n<p><strong>Upgrading Existing Graphs<\/strong><br \/>\nTo convert your existing jFreecharts to use Fusion graphing logic, please do the following:<br \/>\n1. Recompile the application and choose to overwrite the Application Properties.<br \/>\n2. Open m-Painter, go into source view. Find the code &quot;&lt;\/head&gt;&quot;. Directly before this, add the following code:<br \/>\n<code>&lt;script src=\"\/mrcjava\/FusionCharts\/FusionCharts.js\"&gt;&lt;\/script&gt;<\/code><br \/>\n3. Open m-Painter, and open Graph Properties.  Select the appropriate Fusion chart, and then save this.  The application is now set to work with Fusion charts.<\/p>\n<p><strong>Changing Graph Libraries<\/strong><\/p>\n<p>Some customers may choose to continue utilizing jFreecharts as their graphing library. To convert your graphs to do this, open application properties and navigate to the graph tab.  Change the graphLibrary property to be set to &quot;jFreeChart&quot; and click accept.  Next, open m-Painter, and open Graph Properties.  Select the appropriate jFreechart, and then save this.  The application is now set to work with jFreecharts.<\/p>\n<p>In the event you wish to revert back to Fusion Charts, simply reverse the above instructions.<\/p>\n<h3 id=\"links\">Learn more about:<\/h3>\n<p><a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/graph-type-tab\">Graph Type Tab<\/a><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/fields-tab\">Fields Tab<\/a><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/levels-tab\">Levels Tab<\/a><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/descriptions-tab\">Descriptions Tab<\/a><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/options-tab\/general-tab\">Options Tab<\/a><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/options-tab\/general-tab\">General Tab<\/a><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/options-tab\/title-tab\">Title Tab<\/a><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/options-tab\/legend-tab\">Legend Tab<\/a><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/options-tab\/tooltip-tab\">Tooltip Tab<\/a><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/options-tab\/drilldown-tab\">Drilldown Tab<\/a><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/graphs\/options-tab\/chartplot-tab\">Chart\/Plot Tab<\/a><\/p>\n<p>To review information on how to create graphs via the jFreeChart library, which is now deprecated, please click <a target=\"_blank\" href=\"\/legacy\/jFreeCharts.pdf\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>m-Power Graphing Overview General Information Exporting Graphs Upgrading Legacy Graphs Additional Info General Information The m-Power graphing library supports graphing options that are Flash powered (or JavaScript, if Flash is unavailable) and offer a wide variety of graphing options for the developer to consider. Click here to see some of the graphs that are available [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3569,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-787","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/787","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/comments?post=787"}],"version-history":[{"count":43,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/787\/revisions"}],"predecessor-version":[{"id":8771,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/787\/revisions\/8771"}],"up":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/3569"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/media?parent=787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}