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’re subtotaling by product number so we see the total quantity and sales for each product. Our table looks like this:<\/p>\n\n\n\n When you open up graph properties in m-Painter, you’ll immediately see a change.<\/p>\n\n\n\n You are now working in a tabbed interface that will help walk you through making your graphs. m-Power’s new interface has been designed to make designing graphs much more straightforward and less confusing.<\/p>\n\n\n\n In the “Graph Type” 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’ll go to the “Pie” tab and select the “3D Pie” chart.<\/p>\n\n\n\n We can now move to the “Fields” tab. The default “Selected Fields” are “Shipped Quantity” and “List Price”. We only want to show price, so we’ll drag and drop “Shipped Quantity” back over to “Available Fields” so it doesn’t display on the chart.<\/p>\n\n\n\n If we click over to the “Levels” 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 “Subtotal Level 1 PRDNO” as our report level.<\/p>\n\n\n\n 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\n\n\n We can now move onto the “Descriptions” 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’re going to use a field from the table (“Product Number”), and suffix it with “Total”. If we were just graphing a grand total row and wanted a completely static field, we would select the “Label” option, and type in our field description, such as “Total Sales”.<\/p>\n\n\n\n We’ll now go to the “Options” tab.<\/p>\n\n\n\n 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\n\n\n The last feature in the graphing interface is the “Graph Preview” tab. We can preview the graph without having to save and run our report. The “Graph Preview” 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\n\n\n In our preview, since our labels have two lines on them and because we have so many products, we’ll need to make our pie chart bigger to be able to see our totals, so we’ll go back to our “Options” tab and move to the “General” section. Here, we’ll make our graph 800 pixels wide and 400 pixels long. That should compensate for our larger labels.<\/p>\n\n\n\n And if we look at the “Graph Preview”, sure enough, it does.<\/p>\n\n\n\n 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 “Threshold” is a setting that filters smaller amounts into an “Others” category. If the threshold is raised, more fields will be placed into the “Others” category and won’t display on the screen.<\/p>\n\n\n\n Back in the “Options” tab, we’ll return our width to 600 and our height to 300, and then switch to the “Chart and Plot” section. In there, we’ll pick the “Threshold” tab. The default threshold is 2%, meaning that if an amount is less than 2% of the grand total, it gets placed into the “Others” category. Let’s raise that value from .02 to .05.<\/p>\n\n\n\n That seems to have taken enough out to show everything in a readable format in the “Graph Preview”.<\/p>\n\n\n\n For developers who feel more comfortable with the a text based interface, you can switch to text mode by clicking on the “Legacy Mode” link directly to the right of the “Graph Image Options” text.<\/p>\n\n\n\n If you click on it, you’ll be presented with a warning. Note:<\/strong> Flipping between legacy mode and wizard mode will lose any changes made to the graph properties if they haven’t been saved by clicking OK on the lower right hand side of the “Graph Properties” screen. If you’ve made changes that you haven’t saved and want to, click “Cancel” on the warning and save. Then open up graph properties and click on legacy mode again. This time, click “OK” when the warning comes up and you’ll be brought to the previous interface.<\/p>\n\n\n\n Now that we’ve finished customizing our graph, we can run it. Here it is in a browser window when we run the report:<\/p>\n\n\n\n To convert your existing jFreecharts to use Fusion graphing logic, please do the following:<\/p>\n\n\n\n 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 “jFreeChart” 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\n\n\n In the event you wish to revert back to Fusion Charts, simply reverse the above instructions.<\/p>\n\n\n\n Graph Type Tab<\/a>![\"\"\/](\"\/docs\/vue-images\/orderedProducts.jpg\")
<\/a><\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphing\/graphprop1.png\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphing\/3dpie.png\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphing\/fields.png\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphlevels.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphing\/icon.png\"){kind=icon}
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphing\/graphLabels.png\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphing\/props.png\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphpreview.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphresize.png\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphpreview2.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/threshold.png\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphpreview3.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphing\/legacy.png\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphpropertieslegacymode.jpg\")
<\/figure>\n\n\n\n![\"\"\/](\"\/docs\/images\/graphing\/finished.png\")
<\/figure>\n\n\n\nConverting Between Graph Libraries<\/h2>\n\n\n\n
Upgrading Existing Graphs<\/h3>\n\n\n\n
\n
<script src=\"\/mrcjava\/FusionCharts\/FusionCharts.js\"><\/script><\/code><\/li>\n\n\n\nChanging Graph Libraries<\/h3>\n\n\n\n
Learn more about<\/h2>\n\n\n\n
Fields Tab<\/a>
Levels Tab<\/a>
Descriptions Tab<\/a>
Options Tab<\/a>
General Tab<\/a>
Title Tab<\/a>
Legend Tab<\/a>
Tooltip Tab<\/a>
Drilldown Tab<\/a>
Chart\/Plot Tab<\/a><\/p>\n\n\n\n